ECharts常用配置项

全栈开发日记

发布于 2022-05-13 14:24:23

4850

发布于 2022-05-13 14:24:23

文章被收录于专栏：全栈开发日记

这里直接是干货

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>

<div id="chart" style="width: 800px;height:400px;"></div>

</body>
<script>
    //初始化该图表
    var chart = echarts.init(document.getElementById('chart'));

    var option={
        //标题，包含副标题
        title:{},

        //图例控制块，控制颜色和名字
        legend:{},

        //控制图表坐标系部分，包括背景、宽高、边距等
        grid:{},

        //控制x轴的样式和配置
        xAxis:{},

        //控制y轴的样式和配置
        yAxis:{},

        //指定极坐标系，用于散点图和折线图
        polar:{},

        //雷达图组件
        radar:{},

        //数据提示框、悬浮框
        tooltip:{},

        //鼠标悬浮时指示坐标轴当前刻度值
        axisPointer:{},

        //工具栏组件，包含导出图片、还原、缩放图表等工具
        toolbox:{},

        //多个ECharts之间进行切换、播放等操作
        timeline:{},

        //指定图表类型，如：折线图、柱状图等
        series:{},

        //指定该图表中各个数据的代表颜色
        color:{},

        //指定该图表的背景颜色
        backgroundColor:{},

        //指定全局的字体样式
        textStyle:{}

    };
    //使用刚指定的配置项和数据显示图表
    chart.setOption(option);
</script>
</html>

配置项详细用法，后面有时间也总结一下。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-10-25，如有侵权请联系 cloudcommunity@tencent.com 删除

基础