ECharts入门 | 易学教程

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

一、ECharts基础用法

// 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); //配置图表选项和数据 var option = { } // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);

二、配置项

1.title标题组件，包含主标题和副标题。

text: 主标题文本
textStyle: 主标题文本样式
subtext: 副标题文本
subtextStyle: 副标题文本样式

2. legend：图例组件。

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

legend: {
type: ‘scroll’,
orient: ‘vertical’,
right: 10,
top: 20,
bottom: 20,
}
data: 图例的数据数组。

数组项通常为一个字符串，每一项代表一个系列的 name (和series中的name对应)

data: [{
name: ‘系列1’,
// 强制设置图形为圆。
icon: ‘circle’,
// 设置文本为红色
textStyle: {
color: ‘red’
}
}]

3.xAxis：直角坐标系 grid 中的 x 轴。

data: 图例的数据数组。
数组项通常为一个字符串，每一项代表一个系列的 name (和series中的name对应)

/ 所有类目名称列表
data: [‘周一’, ‘周二’, ‘周三’, ‘周四’, ‘周五’, ‘周六’, ‘周日’]
// 每一项也可以是具体的配置项，此时取配置项中的 value 为类目名
data: [{
value: ‘周一’,
// 突出周一
textStyle: {
fontSize: 20,
color: ‘red’
}
}, ‘周二’, ‘周三’, ‘周四’, ‘周五’, ‘周六’, ‘周日’]

4.yAxis：直角坐标系 grid 中的 y 轴。一般情况下单个 grid 组件最多只能放左右两个 y 轴,默认不指定

5. toolbox：工具栏。

内置有
(1)导出图片，
(2)数据视图，
(3)动态类型切换，
(4)数据区域缩放，
(5)重置
五个工具。
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true
},
或者： saveAsImage: { },

        restore: {     },
        dataView: {      },
        dataZoom: {      },
        magicType: {
            show: true,
            type: ['line','bar']
        },
        brush: {      },
    }

6. series：系列列表。每个系列通过 type 决定自己的图表类型

series: [{

    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
},{

    name: '产量',
    type: 'line',
    data: [7, 30, 50, 11, 40, 80]
}]

以上是Echarts最常见的入门级配置。

来源：CSDN

作者：河南云和数据

链接：https://blog.csdn.net/weixin_40664002/article/details/103920491

标签

图例