echarts自定義系列

首先上效果圖，最近接觸了沒做過的echarts自定義,記錄一下解決方案

tooltip提示重疊的所有資料

在tooltip裡設定trigger為axios、axiosPointer設定type為cross之後再label的formatter裡面觸發會列印兩個params、一個有當前滑鼠位置對應在x軸的數值，另一個是當前的所有資料

拿到這兩個資料後儲存起來，在tooltip的formatter進行使用

圖列換行

在legend中，legend.data是顯示圖例的陣列

1. 在所需換行的地方插入空的字串 “” 或者是 “/n”

let legendsData = ["銀時", "銀時5", "王二小", "猹", "↵", "ink", "i123nk", "321", "qqq", "↵", "oso", "V"];
or
let legendsData = ["銀時", "銀時5", "王二小", "猹", "", "ink", "i123nk", "321", "qqq", "", "oso", "V"];
//將陣列放入legend中
 

2. 還有一種就是給 legend的width 設值legend.width是顯示圖例的區域的寬度 寬度不夠自動換行

3. 第三種辦法是用 formatter進行設值

最後貼上核心程式碼

// 載入報表內容
    initEchart () {
      var t = window.devicePixelRatio
      this.$refs[this.chartRef].style.zoom = t

      var fontSize = this.$diffDevice()
      var titlefontsize = 18
      if (window.devicePixelRatio > 1.25) {
        titlefontsize = 14
      }
      const that = this
      this.barChart = echarts.init(this.$refs[this.chartRef])
      let data = this.echart.dataList
      let categories = this.echart.laneList


      let types = []
      let colors = Color.getPieChartColor()
      this.echart.maintainProjectList.forEach((item, index) => {
        let newObj = {
          name: item,
          color: colors.length >= index + 1 ? colors[index] : ""
        }
        types.push(newObj)
      })
      let newSeries = []
      data.forEach((item, index) => {
        // 過濾item顏色
        let type = {}
        types.forEach((item1, index1) => {
          if (item.name == '') {
            type = {
              name: '',
              color: '#fff',
            }
          } else if (item.name == item1.name) {
            type = item1
          }
        })
        item.itemStyle = {
          normal: {
            color: type.color
          }
        }
        // 配置newSeries
        let newSeriesData = {
          type: "custom",
          renderItem,
          itemStyle: {
            opacity: 0.8,
            color: type.color,
            fontSize: fontSize
          },
          name: item.name,
          label: {
            show: true,
            //圖形上顯示數字
            formatter: (params) => {
              return params.value[3] > 2 ? params.data.year : ''
            }
          },
          encode: {
            x: [1, 2],
            y: 0
          },
          data: [item]
        }
        // push
        newSeries.push(newSeriesData)
      })
      function renderItem (params, api) {
        let categoryIndex = api.value(0)
        // 這裡使用 api.coord(...) 將數值在當前座標系中轉換成為螢幕上的點的畫素值。
        let start = api.coord([api.value(1), categoryIndex])
        let end = api.coord([api.value(2), categoryIndex])
        // 這裡使用 api.size(...) 獲得 Y 軸上數值範圍為 1 的一段所對應的畫素長度。
        let height = api.size([0, 1])[1] * 0.9
        // shape 屬性描述了這個矩形的畫素位置和大小。
        // 其中特殊得用到了 echarts.graphic.clipRectByRect，意思是，
        // 如果矩形超出了當前座標系的包圍盒，則剪裁這個矩形。
        // 如果矩形完全被剪掉，會返回 undefined.
        let rectShape = echarts.graphic.clipRectByRect(
          {
            // 矩形的位置和大小。
            x: start[0],
            y: start[1] - height / 2,
            width: end[0] - start[0],
            height: height
          },
          {
            // 當前座標系的包圍盒。
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
          }
        )
        // 這裡返回為這個 dataItem 構建的圖形元素定義
        return (
          rectShape && {
            // 表示這個圖形元素是矩形。還可以是 'circle', 'sector', 'polygon' 等等。
            type: "rect",
            shape: rectShape,
            // 用 api.style(...) 得到預設的樣式設定。這個樣式設定包含了
            // option 中 itemStyle 的配置和視覺對映得到的顏色。
            style: api.style()
          }
        )
      }
      let currentSeriesData = []
      let mouseCurrent = 0
      let option = {
        color:['#fff'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              show: false,
              formatter: function (params) {
                if (params.seriesData.length !== 0) {
                  currentSeriesData = params.seriesData
                }
                if (params.seriesData.length === 0) {
                  mouseCurrent = params.value
                }
              }
            }
          },
          formatter: function (params) {
            let tipArr = []
            currentSeriesData.forEach((item, index) => {
              if (item.value[1] <= mouseCurrent && item.value[2] >= mouseCurrent) {
                tipArr.push(item)
              }
            })
            let str = ''
            tipArr.forEach((item, index) => {
              if (!item.data.name) {
                return
              }
              str += item.marker + item.data.year + '&nbsp' + (item.data.name || item.data.data_laneName) + '&nbsp' + '樁號' + item.value[1] + '-' + item.value[2] + '&nbsp' + item.value[3] + '公里' + '<br/>'
            })
            return str
          }
        },
        title: {
          text: "歷年養護方案",
          left: "center",
          textStyle: {
            fontSize: titlefontsize
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {
              pixelRatio: window.devicePixelRatio
            }
          }
        },
        legend: {
          top: 20,
          data: this.echart.maintainProjectList,
          itemHeight: 10,
          textStyle: {
            fontSize: fontSize
          },
          left: 'center',
          width: '80%',

        },
        // 區域縮放
        dataZoom: [
          {
            type: "slider",
            filterMode: "weakFilter",
            xAxisIndex: [0, 1],
            showDataShadow: false,
            height: 10,
            bottom: 10,
            borderColor: "transparent",
            backgroundColor: "#e2e2e2",
            handleIcon:
              "M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z", // jshint ignore:line
            handleSize: 20,
            handleStyle: {
              shadowBlur: 6,
              shadowOffsetX: 1,
              shadowOffsetY: 2,
              shadowColor: "#aaa"
            },
            labelFormatter: ""
          },
          {
            type: 'slider',
            yAxisIndex: 0,
            filterMode: 'weakFilter',
            showDataShadow: false,
            width: 10,
            left: 55,
            borderColor: "transparent",
            backgroundColor: "#e2e2e2",
            handleIcon:
              "M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z", // jshint ignore:line
            handleSize: 20,
            handleStyle: {
              shadowBlur: 6,
              shadowOffsetX: 1,
              shadowOffsetY: 2,
              shadowColor: "#aaa"
            },
            labelFormatter: ""
          }
        ],
        grid: {
          height: "auto",
          // top: 70
          top: this.echart.maintainProjectList.length > 7 ? 80 : 60,
          bottom:50,
        },
        xAxis: [
          {
            min: Math.floor(this.echart.minPile),
            max: Math.floor(this.echart.maxPile),
            // 間隔最小範圍
            minInterval: 0.5,
            // 不顯示0
            scale: true,
            // 分割段數
            splitNumber: 30,
            name: '上行線',
            nameLocation: 'start',
            nameTextStyle: {
              color: '#000',
              fontSize: fontSize,
              padding: [25, 0, 0, 0]
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#ccc"
              }
            },
            axisTick: {
              length: 0,
            },
            axisLabel: {
              color: '#000',
              fontSize: fontSize,
              showMaxLabel: true,
              showMinLabel: true,
            }
          }, {
            min: Math.floor(this.echart.minPile),
            max: Math.floor(this.echart.maxPile),
            minInterval: 0.5,
            scale: true,
            splitNumber: 30,
            name: '下行線',
            nameLocation: 'start',
            nameTextStyle: {
              color: '#000',
              fontSize: fontSize,
              padding: [0, 0, 25, 0]
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#ccc"
              }
            },
            axisTick: {
              length: 0,
            },
            axisLabel: {
              color: '#000',
              fontSize: fontSize,
              showMaxLabel: true,
              showMinLabel: true,
            }
          }
        ],
        yAxis: {
          data: categories,
          axisLabel: {
            color: '#000',
            fontSize: fontSize,
            // align: 'left'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ccc"
            }
          },
          axisTick: {
            length: 50,
            margin: 10,
            lineStyle: {
              // color: "#d4d4d4"
              color: '#ccc'
            }
          },
          axisLine: {
            lineStyle: {
              color: "#ccc"
            }
          }
        },
        series: newSeries
      }
      this.barChart.setOption(option, true)
    },

    // 圖表重新整理
    resizeChart () {
      if (this.barChart && this.barChart['resize']) {
        this.barChart.resize()
      }
    },