echarts在vue中使用的感悟

echarts作為圖表展示的強大存在，每當使用後臺系統，或多或少都會使用到，但是作為菜鳥的我，則是一路採坑，各種頭大，比比皆是，為了避免下次再犯同樣的錯誤，特意記錄下來，與大家共勉之

闡述我的圖表樣式

• 柱狀圖

最原始的圖形

更改後的樣式

option = {
    tooltip: { //觸發滑鼠經過 彈窗
      show: true,
      trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        barWidth: '40', //柱形圖寬度
        itemStyle: {
            normal: {
                color: 'pink', //背景色 
                label: { // 在柱形圖上顯示具體資料
                    show: true,
                    position: 'top', // 所在的位置
                    textStyle: { // 資料展示的樣式
                        fontSize: '20',
                        fontWeight: 'bold',
                        color: 'skyblue'
                    }
                },
            }
        }
    }]
};
 

通過修改後便可以達到相應的效果，但是官方文件太多，又沒有明顯的註釋，指定那是哪，看起來很痛苦。原本這些不難，但是有些用法不能按自己的思維推，只能踩坑 ==> 看文件 ==> 踩坑

進入重點，談談 彈框 tooltip這點事

• tooltip 可以在多個狀態下使用， 全域性 ，區域性資料 都可以 ，今天只提全域性中資料展示這塊，都大同小異,
• tooltip中的一個重要現實資料的屬性formatter
  • 字串型別， 可以通過嘗試就可以試出來

  • 函式型別

    此時重點提提這個函式型別 formatter(parmas, ticket, callback) {}

• params可以直接打印出來看看，series裡的資料
• ticket非同步回撥標識 ，只是不理解為什麼加這個東西，之後瞭解到，作用類似id，起到指定這個回撥函式跟這個是一起，指定唯一
• callback寫業務邏輯，官方說話是 資料請求後獲取，但是個人發現，顯示的內容跟字串方法顯示結果一樣，只是資料晚回來而已。 如果資料並不在series中呢，甚至沒有多大關係，哪該怎麼辦？？？

問題丟擲：如何做到彈窗資料跟series中不存在明顯聯絡

• 為了這個問題，我已連續幾日各種搜尋，各種逛論壇，看原創作者視訊，都沒有找到有效路徑，知道那天與同事溝通，他忽然提了一句，通過索引進行關聯，瞬間前途一片光明

export default{
  data() {
    return {
        data: [ // 製造假資料
          {axisData: '週一', seriesData: 11, formatterData: 1},
          {axisData: '週二', seriesData: 22, formatterData: 2},
          {axisData: '週三', seriesData: 33, formatterData: 3},
          {axisData: '週四', seriesData: 44, formatterData: 4},
          {axisData: '週五', seriesData: 55, formatterData: 5},
          {axisData: '週六', seriesData: 66, formatterData: 6},
          {axisData: '週日', seriesData: 77, formatterData: 7}
        ],
        formatterDataList: [],
        myecharts: '', //例項
        option: {
            tooltip: { //觸發滑鼠經過 彈窗
            show: true,
            trigger: 'axis',
            formatter(params) {}
            },
            xAxis: {
                type: 'category',
                data: [],
            },
            yAxis: {
                type: 'value'
            },
            series: [{
              type: 'bar',
                data: [],
            }]
        }
    }
},
created() {
  this.getData()
 
},
mounted() {
  // 初始化
  this.myecharts = echarts.init(this.$refs.charts)
  this.myecharts.setOption(this.option)
  const that = this
  window.addEventListener('resize', function() {
    that.myecharts.resize()
  })


},

methods: {

   /**
    * 資料獲取
    */
    getData() { 
      const data = this.data
      let axisData      = [],
          seriesData    = [],
          formatterData = []

      for (let i = 0, leng = data.length ; i < leng - 1; i++ ) {
        let item = data[i]
        axisData.push(item.axisData)
        seriesData.push(item.seriesData)
        formatterData.push(item.formatterData)
      }   

      this.option.xAxis.data     = axisData
      this.option.series[0].data = seriesData
      this.formatterDataList     = formatterData
      this.showData()
    },

    /**
     * 業務邏輯處理 
     */
    showData() { 
      const that = this
      this.option.tooltip.formatter = function(params) {
          // console.log(params)
          const index = params[0].dataIndex, // 因為索引唯一，正好通過這個進行關聯
                data  = that.formatterDataList
          let res  = `資料顯示: ${data[index]}`
          return res
      }
    }
  }       
}

主要是如何找到資料之間的關聯性，只要找到一切都好說了