主要描述以ECharts柱狀圖為展開的一些相關功能點的使用，有些不僅限於柱狀圖中使用，有點雜亂，我儘量描述的清楚一點。本文主要放我專案中用到的相關操作，至於其他以後用到還會更新。
這裡所描述的內容ECharts官網中都可以查詢的到，如有感覺描述不清晰的請前往官網自行檢視，也歡迎大家批評指正。

附上官網連結：https://echarts.apache.org/zh/index.html

1. 修改 x y 軸線和字型顏色

一般這個用的最多，但總是會忘記怎麼修改，索性記錄下。以 x 軸為例，y 軸同理。

xAxis: {
  axisLine: { // 軸線顏色
    lineStyle: {
      color: 
 
'#297ACC',
    },
  },
  axisLabel: { // 刻度文字顏色
    textStyle: {
      color: '#F8FBFF',
    },
  },
},

2. 自定義彈窗內容

如圖所示：點選柱狀圖後希望在彈窗中加入 總指數：xx

let option = {
    // 修改 tooltip 部分的程式碼
    tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 座標軸指示器，座標軸觸發有效
            type: 'shadow', //
 
 預設為直線，可選為：'line' | 'shadow'
          },
          // 主要程式碼 部分
          formatter(params) {
            console.log('params', params);
            let str = '';
            str += `<div>${params[0].name}</div>`;
            str += `<div>總指數:${sum[params[0].dataIndex]}</div>`;
            for
 
 (let i = 0; i < params.length; i += 1) {
              // 圖例顯示的資料較多時需要迴圈資料，這樣才可以成功的給多條資料新增值
              str +=
                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color};"></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 軸資料文字過長的處理

上圖中黃色框中的效果，文字過長的處理，可以參考以下文章：

Echarts x軸文字內容太長的幾種解決方案 ：https://www.cnblogs.com/tzwbk/p/12883078.html
echarts x/y軸座標文字過長解決辦法-換行 ：https://blog.csdn.net/qq_34531925/article/details/78258820