Echarts图表常用功能配置，Demo示例

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

先看下效果图：

就如上图所示，都是些常用的基本配置。 Legend分页，X轴设置，Y轴设置，底部缩放条设置，数值显示样式设置，工具箱设置，自定义工具按钮，绑定点击事件等等。这些配置代码中都做了简单的注释。下面看下代码，代码总共分为了3个js文件，分别如下：

1. option.js

2. demo.js

// 示例图-操作类
export default class Demo { // 构造函数
constructor(option, echarts) {
this.option = option;
this.echarts = echarts;
} // 初始化图表
init() {
this.echarts.setOption(this.option, true);
} // X轴坐标文字旋转角度
xTextRotate(deg) {
this.option.xAxis.axisLabel.rotate = parseInt(deg, 10);
this.init();
} // 系列数值的显示位置
seriesLabelPosition(position) {
let series = this.option.series;
let newSeries = series.map((item) => {
item.label.position = position;
return item;
});
this.option.series = newSeries;
this.init();
} // 系列数值是否显示
seriesLabelDisplay(mark) {
let series = this.option.series;
let newSeries = series.map((item) => {
item.label.show = mark;
return item;
});
this.option.series = newSeries;
this.init();
} // 系列数值 %
seriesLabelWithPercent(mark) {
let series = this.option.series;
let newSeries = series.map((item) => {
item.label.formatter = mark ? '{c}%' : '{c}';
return item;
});
this.option.series = newSeries;
this.init();
} // 系列数值旋转
seriesLabelRotate(deg) {
let series = this.option.series;
let newSeries = series.map((item) => {
item.label.rotate = parseInt(deg, 10);
return item;
});
this.option.series = newSeries;
this.init();
} // 底部拖动条是否显示
dataZoomDisplay(mark) {
if(mark) {
this.option.dataZoom[0].show = true;
this.option.dataZoom[0].end = 50;
} else {
this.option.dataZoom[0].show = false;
this.option.dataZoom[0].end = 100;
}
this.init();
} // 提示模式
tooltipModel(model) {
this.option.tooltip.axisPointer.type = model;
this.init();
} // Y轴线条
yLineStyle(style) {
if(style === 'none') {
this.option.yAxis.axisLine.show = false;
} else {
this.option.yAxis.axisLine.show = true;
this.option.yAxis.axisLine.lineStyle.type = style;
}
this.init();
} // Y轴分割线
ySplitLineStyle(style) {
if(style === 'none') {
this.option.yAxis.splitLine.show = false;
} else {
this.option.yAxis.splitLine.show = true;
this.option.yAxis.splitLine.lineStyle.type = style;
}
this.init();
} // 绑定事件
bindEvent(eventName, eventAction) {
this.echarts.on(eventName, eventAction);
} // 自适应调整
resize() {
this.echarts.resize();
}
}

3. index.js

import echarts from 'echarts';
import option from './option';
import Demo from './demo';// 根据id获取元素
let $ = id => document.getElementById(id);// 初始化图表
let demo = new Demo(option, echarts.init($('echarts')));
demo.init();// 是否显示数值
$('sel1').addEventListener('change', (e) => {
demo.seriesLabelDisplay(e.target.value === '1');
});// 数值显示位置
$('sel2').addEventListener('change', (e) => {
demo.seriesLabelPosition(e.target.value);
});// 数值 %
$('sel3').addEventListener('change', (e) => {
demo.seriesLabelWithPercent(e.target.value === '1');
});// X轴文字旋转角度
$('sel4').addEventListener('change', (e) => {
demo.xTextRotate(e.target.value);
});// 底部拖动条是否显示
$('sel5').addEventListener('change', (e) => {
demo.dataZoomDisplay(e.target.value === '1');
});// 设置提示模式
$('sel6').addEventListener('change', (e) => {
demo.tooltipModel(e.target.value);
});// Y轴线条
$('sel7').addEventListener('change', (e) => {
demo.yLineStyle(e.target.value);
});// 数值旋转
$('sel8').addEventListener('change', (e) => {
demo.seriesLabelRotate(e.target.value);
});// Y轴分割线
$('sel9').addEventListener('change', (e) => {
demo.ySplitLineStyle(e.target.value);
});// 绑定点击事件
demo.bindEvent('click', (param) => {
alert(`${param.name} - ${param.seriesName} - ${param.data}`);
});// 浏览器窗口大小改变时，图表自适应
window.addEventListener('resize', () => { demo.resize(); });

option.js 是echarts的配置项，单独一个配置对象。 demo.js是一个类，里面定义了一些方法用来操作图表，改变图表的一些样式和行为。 index.js是实际页面调用的js文件，它引入了option.js 和 demo.js。因为用了webpack 进行打包，打包后的文件名为bundle.js，所以index.html文件只引用了一个bundle.js文件。

index.html

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Echarts图表示例</title>
<style>
.echarts {
width: 100%;
height: 700px;
margin-top: 50px;
padding-bottom: 10px;
}
.operate {
margin-top: 50px;
min-height: 100px;
background-color: #eee;
padding: 20px;
border: 1px solid #69a5e9;
}
select, button {
padding: 10px;
width: 180px;
margin: 5px 10px;
}
.echarts-table {
width: 100%;
border-collapse: collapse;
}
.echarts-table thead {
background-color: #eee;
}
.echarts-table th, .echarts-table td {
border: 1px solid #ddd;
text-align: center;
padding: 10px 0;
}
</style>
</head><body>
<div id="echarts" class="echarts"></div>
<div class="operate">
<select name="sel1" id="sel1">
<option value="1">显示数值</option>
<option value="0">隐藏数值</option>
</select>
<select name="sel2" id="sel2">
<option value="inside">数值内部显示：居中</option>
<option value="insideBottom">数值内部显示：底部</option>
<option value="top">数值外部显示：顶部</option>
</select>
<select name="sel3" id="sel3">
<option value="0">数值隐藏 %</option>
<option value="1">数值添加 %</option>
</select>
<select name="sel4" id="sel4">
<option value="0">X轴文字旋转 00 度</option>
<option value="30" selected>X轴文字旋转 30 度</option>
<option value="60">X轴文字旋转 60 度</option>
<option value="90">X轴文字旋转 90 度</option>
</select>
<select name="sel5" id="sel5">
<option value="1">显示底部拖动条</option>
<option value="0">隐藏底部拖动条</option>
</select>
<select name="sel6" id="sel6">
<option value="shadow">tooltip：阴影模式</option>
<option value="line">tooltip：线条模式</option>
<option value="cross">tooltip：交叉模式</option>
</select>
<select name="sel7" id="sel7">
<option value="none">Y轴线条：隐藏</option>
<option value="solid" selected>Y轴线条：实线 solid</option>
<option value="dashed">Y轴线条：虚线 dashed</option>
<option value="dotted">Y轴线条：虚线 dotted</option>
</select>
<select name="sel8" id="sel8">
<option value="0">数值旋转 00 度</option>
<option value="30">数值旋转 30 度</option>
<option value="60">数值旋转 60 度</option>
<option value="90">数值旋转 90 度</option>
</select>
<select name="sel9" id="sel9">
<option value="none">Y轴分割线：隐藏</option>
<option value="solid" selected>Y轴分割线：实线 solid</option>
<option value="dashed">Y轴分割线：虚线 dashed</option>
<option value="dotted">Y轴分割线：虚线 dotted</option>
</select>
</div>
<script src="bundle.js"></script>
</body></html>