前段时间在做大屏项目，大量用到echarts图表，大屏对设计规范要求比较高，而大屏项目，经常会因为业务方面的原因、或者是数据方面的原因改动UI设计，所有图表的代码也是三天一小改、五天一大改
因此，项目里有统一的echarts图表配置，能统一所有图表的样式，修改起来也方便，如果有需要特殊设置的地方，再实例化echarts图表时覆盖通用配置或自行扩展配置即可
封装EchartUtil工具类，方便获取通用配置，以及部分相关的方法
通用配置主要有：
统一的grid大小；
统一的title标题样式；
统一的各个系列的color；
统一的legend位置，样式；
统一的x轴、y轴、tooltip的formatter方法；
统一的series样式（例如bar、line等）；
统一的文字字体、大小、颜色的设置；
formatter中，有使用到rich富文本，为了体现出效果，目前是textStyle，颜色是红色，字体大小10，在格式化时，遍历字符串，如果当前字符时数字，样式改成颜色蓝色，字体大小12
下面是一个简单图表的使用过程：
0、前期准备：
1、vue项目引入echarts
2、创建指定宽高的DOM容器
1、引入工具类
import echartUtil from "@/utils/echartUtil" import "@/assets/js/china.js"
2、初始化 echart
let echart = this.$echarts.init(document.getElementById('echart1'));
3、读取通用配置
let option = echartUtil.getEchartOption();
4、获取数据
let serieData = [];
let xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
let legendData = [
"衣服",
"裤子"
];
let metaDate = [
echartUtil.getRandomArray(7),
echartUtil.getRandomArray(7),
];
5、处理、加工数据
for (let i = 0; i < legendData.length; i++) {
let serie = echartUtil.getEchartOption().series;
if(i % 2 === 0){
serie.type = "bar";
}else{
serie.type = "line";
}
serie.name = legendData[i];
serie.data = metaDate[i];
serieData.push(serie);
}
6、个性化配置
option.tooltip.formatter = function (params) {
params["units"] = ["件","条"];
return echartUtil.getEchartOption().tooltip.formatter(params);
};
option.yAxis.name = "单位：数量";
option.xAxis.data = xAxisData;
option.legend.data = legendData;
option.series = serieData;
7、图表使用配置
echart.setOption(option);
8、绑定点击事件、并设置自动轮播
echart.on("click", function (param) {
console.log(param);
});
echartUtil.autoHover(echart);
下面的第一个图表这个简单示例的效果
简单实现了一下常用的图表
echarts图表，是开发中常用到的功能，正所谓好记性不如烂笔头，特此记录，以便后面再需要画echarts图表时有地方可以参考
注：admin后端数据库文件在admin后端项目的resources/sql目录下面
代码已经开源、托管到我的GitHub、码云：
GitHub：https://github.com/huanzi-qch/fast-scaffold
码云：https://gitee.com/huanzi-qch/fast-scaffold
PS：本文的代码在前端portal项目中
