Echarts 是最常用的前端数据展示库， 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

前端数据展示的利器，但是文档配置项的说明对完全没用过的人来说摸不着头脑(反正我刚开始没看懂)。结合官方栗子和网友的使用心得好不容易懂了它的套路，借此好好整理下用法心得。

01基本使用方法

无论你是要画柱状图还是折线图，你都需要

1. 引入 echarts.js，在 html 里创建一个

   并定好宽高

2. 调用 echarts.init(容器dom元素) ，生成 echarts 容器实例

3. 设置图表的配置项，调用该实例的 setOption 方法渲染图表

举个栗子：

<div id="bar" style="width: 100%;height:400px;">div>   <script src="../echarts.min.js">script><script>    var barChart = echarts.init(document.getElementById('bar'));    var opt = {       // 配置项略    }    barChart.setOption(opt);script>

配置项是画图的关键，这里的配置项决定你画出来的是什么图。

假设你要画个简单的柱状图，直接在官网的 example 里找到柱状图把示例的配置项 copy and paste  到你的图表 opt。

echart 示例网址：https://www.echartsjs.com/examples/zh/index.html

echats 各式各样的图表

折线图的配置项示例

一般来说，如果你要画的图非常简单，基本都能找到对应的示例，对示例的配置项代码稍作修改即可满足你的需求。

02基本配置项

配置项分两类，一类是每个图表都有的通用配置，一类是特定图表独有的配置项。

这里整理了一些常用的通用配置项。

参考文档改版了，写的比较清晰：https://www.echartsjs.com/zh/option.html

标题   标题是图表的标题，通过 opt 的 title 属性配置，不配置的话不显示标题。

var opt = {      // 图表标题      title: {        text: "图表标题文字",        subtext:"图表子标题",        textStyle: { // 标题样式            fontSize: 14,            align: 'center'        },        subtextStyle: { // 子标题样式            align: 'center'        },      }  } barChart.setOption(barOpt);

图表标题

更详细配置参考官网文档。

x 轴 和 y 轴   二维坐标系的图表设置 x、y 轴通过 xAxis 和 yAxis 配置。其中 type 有三种，设置为 category 的表示类目，需要再传一个类别名称数组；设置为 value时会根据数据的数目生成合适的数值轴

var opt = {      // x 轴     xAxis : [            {                type : 'category',                data : ['日用品', '电器', '食品', '饮品', ],            }        ],        yAxis : [            {                type : 'value'            }        ],  } barChart.setOption(barOpt);

图表 x、y 轴

更详细配置参考官网文档。

图表内容   图表内容通过 series 配置。其中 type 表示你要画的是什么类型的图表，例如 bar 表示柱状图，line 表示折线图，pie 表示饼图等等。data 是图表的数据，例如要画柱状图就需要一个数组数据，如果要画其他的图，就要提供对应数据结构的数据，具体参看官网 example 里的 series 配置。

var opt = {      series : [            {                name:'销售量',                type:'bar',                barWidth: '60%', // 柱子的宽度                data: [2700, 1100, 900, 900]            }        ]  } barChart.setOption(barOpt);

图表内容

series 数据类型可以是对象或者数组。如果是数组，则会在同一个图表画多个内容。

更详细配置参考官网文档。

图例   如果有多个 series ，则需要配置图例，图例内容通过 legend 配置。x 、 y  表示在 x 轴 y 轴位置。x :  'left' ，'right' ，'center' ;     y  : 'top', 'middle', 'bottom'  data ：图例的名称数组

var opt = {      series : [            {                name:'销售量',                type:'bar',                data: [2700, 1100, 900, 900]            },            {                name:'产量',                type:'bar',                data: [3000, 2200, 1000, 2000]            }        ],        // 图例        legend: {            x : 'right',            y : 'top',            data: ['销售量', '产量']        },  } barChart.setOption(barOpt);

图例内容

更详细配置参考官网文档。

图表位置   图表在容器内的位置通过 grid 配置，上下左右的间距：

var opt = {        grid: {            left: '3%',            right: '4%',            bottom: '3%',            top: '1%',        },  } barChart.setOption(barOpt);

更详细配置参考官网文档。

提示框   当鼠标放到图表内容里出现提示框，通过 tooltip 配置。trigger

'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。

'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。

var opt = {         tooltip : {            trigger: 'axis',            axisPointer : {            // 坐标轴指示器，坐标轴触发有效                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'            }        },  } barChart.setOption(barOpt);

更详细配置参考官网文档。

03文档使用

文档连接：https://www.echartsjs.com/zh/option.html

现在官网文档比以前的要更清晰了。第一个选项卡是配置项，可以看到 setOption({

// 配置项的属性

})

当前官网文档

然后有很详细的配置属性说明，例如 title：

选项图

里面还有对应的例子，点击 edit 可以看详细配置。

注意，有时候这些例子会有一些文档没有的配置项，例如这个例子里 grid 的

x 、y、x2、y2 ，这种只能自己摸索了。

文档没有的属性

第二个选项卡　 API　是实例的一些方法，像获取实例的位置、宽高或者对图表操作行为作一些特殊处理会用到。

下篇介绍如何用 Echarts 做词云图，敬请期待。

END嗨，你还在看吗？