ECharts圖表——封裝通用配置

qch發表於2021-01-22
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);

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

　　效果

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

　　後記

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

 

　　程式碼開源

 　　注：admin後端資料庫檔案在admin後端專案的resources/sql目錄下面

 

　　程式碼已經開源、託管到我的GitHub、碼雲：

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

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

 

　　PS：本文的程式碼在前端portal專案中

 

相關文章