echarts常用配置項【持續更新】-有解無憂

折線圖，配置Y軸最小間隔為整數，刻度起始不會強制從0開始

    yAxis: {
        minInterval: 1, // 整數
        scale: true,  // y軸資料,根據資料的最大最小值進行計算
    },

設定Y軸分割線虛線

yAxis: {
        type: 'value',
        name: "Nitrogen dioxide(ppb)",
        axisLine: {
            show: true,
            lineStyle: {
                color: 'black' //左側顯示線
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',  // Y軸分割線 虛線，默認實線
                color: 'grey'
            }
        },
        axisLabel: {
            fontSize: 14
        }
    },

設定漸變色

（https://gallery.echartsjs.com/editor.html?c=xtnmUAK2r）

        color: {
                 type: 'linear',
                 x: 1,
                 y: 0,
                 x2: 0.5,
                 y2: 1,
                 colorStops: [{
                     offset: 1,
                     color: 'rgba(68, 145, 253, 0)'
                 }, {
                     offset: 0.5,
                     color: 'rgba(68, 145, 253, .5)'
                 }, {
                     offset: 0,
                     color: 'rgba(68, 145, 253, 1)'
                 }],
                 globalCoord: false
              },

symbolSize根據value值設定

      let symbolSizeMin = 50  //圖表顯示的size最小值
      let symbolSizeMax = 150  //圖表顯示的size最大值

      let valueMin = Math.min.apply(Math, this.v1)  //獲取要顯示的陣列的最小值
      let valueMax = Math.max.apply(Math, this.v1)  // 陣列最大值
      
      let symbolSizeRate = (symbolSizeMax - symbolSizeMin) / (valueMax - valueMin)
      let symbolSizeMinD = symbolSizeMin - valueMin * symbolSizeRate

      let seriesData = https://www.cnblogs.com/ycc1/archive/2020/10/26/[]
      this.n1.forEach((item, index) => {
        seriesData.push(
          {'name': item,
            'value': this.v1[index],
            x: index == 0 ? 500: 0,
            y: index == 0 ? 50: 0,
            'symbolSize': this.v1[index] * symbolSizeRate + symbolSizeMinD,  // 動態設定symbolSize
            'draggable': true,
            'itemStyle': {
                'normal': {
                    'borderColor': colors[index % colors.length],
                    'shadowColor': colors[index % colors.length],
                    'color': colors[index % colors.length],
                    'borderWidth': 4,
                    'shadowBlur': 100,
                }
            }
          }
        )
      })
      option['series'][0]['data'] = seriesData
      console.log(series)

      chart.setOption(option)

參考：

https://echarts.apache.org/zh/option.html#yAxis.scale

術語速查手冊

https://echarts.apache.org/zh/cheat-sheet.html

立體柱狀圖：

https://gallery.echartsjs.com/editor.html?c=x0ou4zifid

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/193641.html

標籤：其他

上一篇：如何巧妙使用some函式來優化性能

下一篇：如何巧妙使用some函式來優化性能