ECharts圖表——封裝通用配置

　　前言

　　前段時間在做大屏項目，大量用到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);

　　下面的第一個圖表這個簡單示例的效果 

　　效果

　　簡單實現了一下常用的圖表

 

　　自定義官方主題

　　介紹

　　https://echarts.apache.org/zh/download-theme.html

　　除了我們自己封裝通用代碼之外，echarts是提供了多種主題、以及自定義主題

 

 

　　主題使用示例

<script src="echarts.js"></script>
<!-- 引入 vintage 主題 -->
<script src="theme/vintage.js"></script>
<script>
// 第二個參數可以指定前面引入的主題
var chart = echarts.init(document.getElementById('main'), 'vintage');
chart.setOption({
    ...
});
</script>

 

　　測試

　　下面是一個簡單圖表的使用過程：

　　0、前期准備：

　　　　1、vue項目引入echarts

　　　　2、創建指定寬高的DOM容器

　　1、引入下載的自定義主題代碼

    import echartUtil from "@/utils/echartUtil"
    import "@/assets/js/china.js"
    import "@/assets/js/huanzi-qch-theme.js"

　　2、初始化 echart

let echart = vue.$echarts.init(document.getElementById('echart1'),"huanzi-qch-theme");

　　3、獲取數據

let serieData = [];
let xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
let legendData = [
    "衣服",
    "褲子"
];
let metaDate = [
    echartUtil.getRandomArray(7),
    echartUtil.getRandomArray(7),
];

　　4、處理數據

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);
}

　　5、個性化配置

let option = {
    title: {
        text: '測試圖表標題',
    },
    legend:{
        data:legendData,
    },
    xAxis:{
        data:xAxisData,
    },
    yAxis:{
        name:"單位：數量"
    },
    series:serieData,
};

　　6、圖表設置配置

echart.setOption(option);

　　7、綁定點擊事件

echart.on("click", function (param) {
    console.log(param);
});

　　

　　效果

　　主題的方式，只能設置顏色、字體等，其他的屬性設置在自定義主題代碼了不生效，想要做到其他地方也統一，最好配合上我們的通用代碼

 

 

　　后記

　　echarts圖表，是開發中常用到的功能，正所謂好記性不如爛筆頭，特此記錄，以便后面再需要畫echarts圖表時有地方可以參考

　　經過實現簡單例子可以發現，最好方式是（圖表樣式配色可根據UI要求，在官方工具中隨時進行調整；而偏功能性的統一在我們通用封裝實現）：

　　在主題中實現系列顏色、字體字號等樣式的統一，其他地方的統一（例如tooltip等）配合我們的通用代碼封裝實現

　　

 

　　代碼開源

 　　注：admin后端數據庫文件在admin后端項目的resources/sql目錄下面

 

　　代碼已經開源、托管到我的GitHub、碼雲：

　　GitHub：https://github.com/huanzi-qch/fast-scaffold

　　碼雲：https://gitee.com/huanzi-qch/fast-scaffold

 

　　PS：本文的代碼在前端portal項目中