echarts柱状图的相关应用指南
主要描述以ECharts柱状图为展开的一些相关功能点的使用，有些不仅限于柱状图中使用，有点杂乱，我尽量描述的清楚一点。本文主要放我项目中用到的相关操作，至于其他以后用到还会更新。
这里所描述的内容ECharts官网中都可以查找的到，如有感觉描述不清晰的请前往官网自行查看，也欢迎大家批评指正。
附上官网链接：Apache ECharts
1. 修改 x y 轴线和字体颜色
一般这个用的最多，但总是会忘记怎么修改，索性记录下。以 x 轴为例，y 轴同理。
xAxis: {
axisLine: { // 轴线颜色
lineStyle: {
color: '#297ACC',
},
},
axisLabel: { // 刻度文字颜色
textStyle: {
color: '#F8FBFF',
},
},
},
2. 自定义弹窗内容
如图所示：点击柱状图后希望在弹窗中加入 总指数：xx （总指数为当前项的所有图例值的总和，该数值我们后端会返回，我这里只需保存即可）
let option = { // 通过修改该配置项来实现 tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', }, // 主要代码部分 formatter(params) { let str = ''; // name：当前项的名称 如上面的 “西城街道” str += `<div>${params[0].name}</div>`; // sum 是我自定义的一个数组 存放了后端返回的 总指数 的值 str += `<div>总指数:${sum[params[0].dataIndex]}</div>`; for (let i = 0; i < params.length; i += 1) { // marker：小圆点，seriesName：图例名称，data：当前图例对应的数据 str += `${params[i].marker} <span>${params[i].seriesName}</span> : <span>${params[i].data ? params[i].data : '暂无'}</br>`; } return str; }, }, };
通过打印 params 我们可以看到（只展示部分，可以自行打印查看）：
3. 点击单个柱状条目 触发事件
如图所示：希望点击“开发区”的柱状条，可以使其他地方的数据跟着改变，这里只需要获取到当前点击条目的名称即可，可根据需要获取想要的数据。
// 点击 纵向坐标轴 的柱形(如上图柱形) this.leftCharts为当前初始化的echarts实例
this.leftCharts.getZr().on('click', (params) => {
const pointInPixel = [params.offsetX, params.offsetY];
if (this.leftCharts.containPixel('grid', pointInPixel)) {
const xIndex = this.leftCharts.convertFromPixel(
{ seriesIndex: 0 },
pointInPixel,
)[1];
const op = this.leftCharts.getOption();
// 自定义事件等
// op.yAxis[0].data[xIndex] 当前点击的 Y轴 的名称
// this.$emit('cityItemInfos', op.yAxis[0].data[xIndex]);
}
});
// 点击 横向坐标轴 的柱形时 只需修改这一部分为
const xIndex = this.leftCharts.convertFromPixel(
{seriesIndex: 0 },
pointInPixel,
)[0];
// op.xAxis[0].data[xIndex] 当前点击的 X 轴坐标的名称
此部分写在 this.leftCharts.setOption(option)后即可
4. 加入自定义工具栏并添加事件
如图所示：红色框中的效果，点击切换 前 或 后十五家企业的排名
let option = { // ... 这里是你图表的配置项 };
option.toolbox = {
feature: {
myTool1: {
show: true,
title: `切换${that.code === 0 ? '后十五家' : '前十五家'}排名`,
icon:
'path://M512 66.56a445.44 445.44 0 1 0 445.44 445.44 445.952 445.952 0 0 0-445.44-445.44z m0 819.03616A373.59616 373.59616 0 1 1 885.59616 512 374.016 374.016 0 0 1 512 885.59616z m204.58496-320.73728H296.28928a37.85216 37.85216 0 0 0-27.1872 62.82752l138.60864 145.18272a35.92192 35.92192 0 1 0 51.96288-49.60768l-82.6368-86.528h339.54816a35.92704 35.92704 0 0 0 0-71.87456z m-421.504-105.984h420.29568a37.84704 37.84704 0 0 0 27.1872-62.8224L603.9552 250.88a35.92192 35.92192 0 1 0-51.96288 49.6128l82.63168 86.5536H295.08096a35.92192 35.92192 0 0 0 0 71.84384z',
onclick() {
// 自定义点击事件的内容 这里我需要再次调用该图表的初始化方法
that.code = that.code === 0 ? 1 : 0;
that.drawCharts(that.code);
},
},
},
emphasis: {
iconStyle: {
textPosition: 'left', // 文字在icon左边
},
},
iconStyle: {
color: '#5afa19',
},
zlevel: 10,
top: '20px',
right: '10px',
};
此处icon中地址为：path://+iconfont中图标的SVG代码的path部分，如下箭头内的内容
5. x y 轴数据文本过长的处理
上图中黄色框中的效果，文字过长的处理，可以参考以下文章：
