Echarts 是最常用的前端数据展示库, 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
前端数据展示的利器,但是文档配置项的说明对完全没用过的人来说摸不着头脑(反正我刚开始没看懂)。结合官方栗子和网友的使用心得好不容易懂了它的套路,借此好好整理下用法心得。
01 基本使用方法无论你是要画柱状图还是折线图,你都需要
引入 echarts.js,在 html 里创建一个
并定好宽高调用 echarts.init(容器dom元素) ,生成 echarts 容器实例
设置图表的配置项,调用该实例的 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 各式各样的图表
折线图的配置项示例
一般来说,如果你要画的图非常简单,基本都能找到对应的示例,对示例的配置项代码稍作修改即可满足你的需求。
0 2基本配置项配置项分两类,一类是每个图表都有的通用配置,一类是特定图表独有的配置项。
这里整理了一些常用的通用配置项。
参考文档改版了,写的比较清晰: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 做词云图,敬请期待。
![711b759f8236ab956bc7d5793cd6a62e.png](https://i-blog.csdnimg.cn/blog_migrate/211cf679445cf1ef89b1dce091db71e1.png)