1.2 配置语法

 第一步：创建 HTML 页面

引入 echarts.min.js：

第二步: 为 ECharts 准备一个具备高宽的 DOM 容器

实例中 id 为 main 的 div 

第三步: 设置配置信息 

进行配置：

option 表示使用 json 数据格式的配置来绘制图表：

标题

 效果：

 提示信息

配置提示信息：

效果

图例组件

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

 

其中legend自身常用的配置属性如下：

orient：设置图例的朝向【vertical // 垂直显示或者horizontal // 水平显示】

x/y(left/top)设置图例在X轴方向上的位置以及在Y轴方向上的位置

样式设置

itemGap控制每一项的间距，也就是图例之间的距离属性值为数值，不带单位

itemHeight控制图例图形的高度属性值为数字，不加单位

textStyle设置图例文字样式属性值为一个对象

selected设置图例的某个选项的数据默认是显示还是隐藏

如果某选项设置为false，那么图标上的数据也会默认不显示，而图例会以灰色样式显示

 

 data图例上显示的文字信息，如果不设置该项，默认会以series设置的信息作为图例信息。如果设置该项，必须与series设置的信息一致，才会生效。而该属性的作用：可以单独对图例中某个选项进行单独设置样式

 X 轴

配置要在 X 轴显示的项:

Y 轴

配置要在 Y 轴显示的项。

系列列表

每个系列通过 type 决定自己的图表类型:

 

---

Echarts中legend属性使用的方法详解_JavaScript_网络编程 - 编程客栈 

ECharts 配置语法 | 菜鸟教程