Vue ECharts图表通用配置详解

前言

本篇来学习下ECharts图表中的通用配置

标题

title：标题

title: { text: "分数", // 标题文字 textStyle: { color: 'red' // 文字颜色 }, borderWidth: 2, // 标题边框宽度 borderColor: 'blue', // 标题边框颜色 borderRadius: 5, // 标题边框圆角 left: 50, // 标题的位置 top: 10 // 标题的位置 } 

效果

提示框

tooltip：提示框

触发类型: trigger：可选值有item\axis

触发时机: triggerOn：可选值有 mouseOver\click

格式化显示: formatter

字符串模板

var option = { tooltip: { trigger: 'item', triggerOn: 'click', formatter: '{b}:{c}' } } 

模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 ‘axis’ 的时候，会有多个系列的数据，此时可 > 以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, > {d}在不同图表类型下代表数据含义为：

• 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
• 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
• 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
• 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

回调函数

var option = { tooltip: { trigger: 'item', triggerOn: 'click', formatter: function (arg) { return arg.name + ':' + arg.data } } } 

效果

工具按钮

toolbox：工具按钮

toolbox: { feature: { saveAsImage: {}, // 将图表保存为图片 dataView: {}, // 是否显示出原始数据 restore: {}, // 还原图表 dataZoom: {}, // 数据缩放 magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持 type: ['bar', 'line'] } } } 

效果

图例

legend：图例，用于筛选类别,需要和 series 配合使用

• legend 中的 data 是一个数组
• legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致

 legend: { data: ['分数', '年龄'] // series中name值保持一致 } 

完整代码

到此这篇关于Vue ECharts图表通用配置介绍的文章就介绍到这了,更多相关Vue ECharts配置内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站！