Echars使用指南

概念介绍

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

快速入门

①基于HTML创建脚本

<!DOCTYPE html>
<html lang="zh_CN">
<head><meta charset="UTF-8"><title>首页</title><!-- 引入 ECharts 文件 --><script src="echars/jquery.js"></script><script src="echars/echarts.min.js"></script>
</head>
<body><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="main" style="width: 600px;height:400px;background-color: blanchedalmond"></div>
</body>
</html>

②渲染组件

<script>$(function(){var myChart = echarts.init($("#char_bar")[0]);// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['品类销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{type: 'bar',name: '品类销量',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
})
</script>

③渲染结果

基础概念

echarts 实例

一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。

系列（series）

系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。

echarts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）等。如下图，右侧的 option 中声明了三个 系列（series）：pie（饼图系列）、line（折线图系列）、bar（柱状图系列），每个系列中有他所需要的series.data

<script>$(function(){var myChart = echarts.init($("#char_bar2")[0]);// 指定图表的配置项和数据var option= {title: {text: 'ECharts图例基本使用和'},tooltip: {},legend: {data:['品类销量','利润点',"市场占比"]},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{type: 'bar',name: '品类销量',data: [5, 20, 36, 10, 10, 20]},{type: 'line',name: '利润点',data: [3, 15, 15, 5, 8, 12]},{type: 'pie',name: '市场占比',center:["80%",80],radius:50,data: [{name:"华南",value:150},{name:"华北",value:100},{name:"华中",value:60},{name:"其他",value:50}]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);})
</script>

类同地，下图中是另一种配置方式，系列的数据从 dataset 中取：

var option= {title: {text: 'ECharts图例基本使用'},dataset:{source:[["衬衫",5,3,"华南",150],["羊毛衫",20,15,"华北",100],["雪纺衫",36,15,"华中",60],["裤子",10,5,"其他",50],["高跟鞋",10,8],["袜子",20,12]]},tooltip: {},legend: {data:['品类销量','利润点',"市场占比"]},xAxis: {type:"category"},yAxis: {},series: [{type: 'bar',name: '品类销量',encode:{x:0,y:1}},{type: 'line',name: '利润点',encode:{x:0,y:2}},{type: 'pie',name: '市场占比',center:["80%",80],radius:50,encode:{itemName:3,value:4}}]
};

组件（component）

在系列之上，echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）等。我们注意到，其实系列（series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。如下图，右侧的 option 中声明了各个组件（包括系列），各个组件就出现在图中。

坐标系

很多系列，例如 line（折线图）、bar（柱状图）、scatter（散点图）、heatmap（热力图）等等，需要运行在 “坐标系” 上。坐标系用于布局这些图，以及显示数据的刻度等等。

一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）三种组件。

xAxis、yAxis 被 grid 自动引用并组织起来，共同工作。我们来看下图，这是最简单的使用直角坐标系的方式：只声明了 xAxis、yAxis 和一个 scatter（散点图系列），echarts 暗自为他们创建了 grid 并关联起他们：

散点图系列

var option={title: {text: '散点分布案例'},legend:{data:["点分布"]},tooltip:{},xAxis:{},yAxis:{},series:[{type:"scatter",name:"点分布",data:[[13,44],[51,51],[51,32],[67,19],[19,33]]}]
}

折线图

var option={title: {text: '折线分布图'},legend:{data:["折线图"]},tooltip:{},xAxis:{type: "category",data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]},yAxis:{min:0,max:100,interval:10},series:[{type:"line",name:"折线图",data:[10,20,40,35,40,20,10]}]
}

柱状图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F9q6Wabx-1585185588044)(assets/image-20200319165901828.png)]

var option={title: {text: '柱状分布图'},legend:{data:["柱状图"]},tooltip:{},xAxis:{type: "category",data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]},yAxis:{min:0,max:100,interval:10},series:[{type:"bar",name:"柱状图",data:[10,20,40,35,40,20,10]}]
}

不同Y轴

var option={title: {text: '不同Y轴'},legend:{data:["访问量1","访问量2"]},tooltip:{},xAxis:{data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]},yAxis:[{min:0,max:50,interval:5},{min:0,max:100,interval:5}],series:[{type:"bar",name:"访问量1",data:[10,20,40,35,40,20,10],yAxisIndex:0},{type:"line",name:"访问量2",data:[55,15,40,35,40,25,100],yAxisIndex:1}]
}

不同x/y轴

var option={title: {text: '不同X和Y使用grid分离',left:"45%",top:0},grid:[{top:50,height:"80%",width:"40%"},{top:50,height:"80%",width:"40%",right:"5%"}],legend:{data:["访问量1","访问量2"],left:"80%",top:0},tooltip:{},xAxis:[{ data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"],gridIndex:0,type:"category"},{ data:["mon","tus","wes","thu","fri","sat","sun"],gridIndex:1,type:"category"}],yAxis:[{min:0,max:50,interval:5,gridIndex:0},{min:0,max:100,interval:10,gridIndex:1}],series:[{type:"bar",name:"访问量1",data:[10,20,40,35,40,20,10],yAxisIndex:0,xAxisIndex:0},{type:"line",name:"访问量2",data:[55,15,40,35,40,25,100],yAxisIndex:1,xAxisIndex:1}]
}

饼状图

var option = {legend:{data:["访问来源","周访问量"]},tooltip:{},xAxis:{type: "category",data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]},yAxis:{min:0,max:100,interval:10},grid:{left:"5%",width:"60%"},series : [{name: '访问来源',type: 'pie',radius: '55%',center:["80%","50%"],radius:55,data:[{value:0, name:'视频广告'},{value:274, name:'联盟广告'},{value:310, name:'邮件营销'},{value:100, name:'直接访问'},{value:90, name:'搜索引擎'},{value:95, name:'广告推广'}]},{type:"bar",name:"周访问量",data:[10,20,40,35,40,20,10]}]
};