7天带你搞定一个图表框架echarts

Echarts是什么？

是一个使用 JavaScript 实现的开源可视化库。具体来说，Echarts就是一个图表库，提供了折线图、柱状图、散点图、饼图、K线图等类型的图表，可以通过配置参数来显示不同类型的图表。

简单使用Echarts

1. 首先在官网中下载适合的版本：

http://echarts.baidu.com/download.html

2. 在html中引入Echarts

<!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script>

3. 在html中创建一个的容器

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div>

4. 创建一个简单的柱状图

// 基于容器，初始化Echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { //标题 title: { text: 'ECharts 入门示例' }, //提示框组件 tooltip: {}, //图例 legend: { data:['销量'] }, //直角坐标系 grid 中的 x 轴 xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, //直角坐标系 grid 中的 y 轴 yAxis: {}, //series[i] 来表示系列列表 series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; //使用刚刚配置的配置项和数据显示图表 myChart.setOption(option);

上述案例中，

title属性是用于配置图表标题xAxis和yAxis属性是用于配置直角坐标系中的x、y轴series属性是用户配置图表类型和数据内容tooltip是提示框组件，当鼠标移动时触发触发legend是图例组件，现在展现了不同系列的标记，颜色和名字 data：图例的数据数组。如果 data 没有被指定，会自动从当前系列中获取，一般要与series中的name对应

折线/面积图的基础用法

接下来我们通过不同的图表实例具体的对配置项进行解析

var myChart = echarts.init(document.getElementById('main')); var option = { //标题，包含主标题和副标题 title: { //主标题 text: '折线/面积图', //副标题 subtext: 'series的type为line', //标题定位 top: '10px', left: 'center' }, //直角坐标系内绘图网格 grid: {}, //直角坐标系 grid 中的 x 轴 xAxis: { //坐标轴类型。可选属性有value：数值轴，适用于连续数据 ，log 对数轴。适用于对数数据 //category：类目轴，适用于离散的类目数据，time：时间轴，适用于连续的时序数据 type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, //直角坐标系 grid 中的 y 轴 yAxis: { type: 'value' }, //series[i] 来表示系列列表。其中，每个系列通过 type 决定自己的图表类型 //设置 Echarts 系列的类型为折线/面积图 series: [{ //设置图表数据 data: [820, 932, 901, 934, 1290, 1330, 1320], //设置图表类型 type: 'line' }] } myChart.setOption(option);

在上述案例中，

title属性是用于配置图表标题 text用于设置标题主标题、subtext用于设置标题副标题top和left用于对标题进行定位， grid属性是用于画出直角坐标系，在没有任何配置项时可以省略不写。xAxis和yAxis属性是用于配置直角坐标系中的x、y轴 tpye是设置坐标轴类型，可选参数有value、category、time、logdata是类目数据，在类目轴（type: ‘category’）中有效。 series属性是用户配置图表类型和数据内容 type是设置图表类型，可用于直角坐标系和极坐标系上。data是系列中的数据内容数组。数组项通常为具体的数据项