使用Echart绘制小程序图表碰到的一个问题以及解决方式

使用Echart绘制小程序图表碰到的一个问题以及解决方式

问题描述：

开发的小程序中的图表echart中X轴是项目数值，Y轴是日期；我要实现点击相对应的项目的时候，显示的提示（tooltip）中插入一个项目名称，不同的项目，名称不同。这个项目名称，是没有在X轴或Y轴分类出现的，是完全独立的字段，不知道如何实现？

设计图如下:

通过实验证明，无论是X还是Y轴，显示的内容都是可以用formatter自定义的，所以可以先把独立的字段对应的数组一项一项和X或Y对应的数组合并成一个字符串数组，然后使用的时候根据情况剪切。

为了看得比较轻松直观，分三块关键代码：

关键代码（一）

_fetchData (num) {
    request({
      method: 'GET',
      url: `/api/douyinLiveMonitorTask/live/analyze/${this.props.uid}/${num}`
    }).then((resp)=>{
      let yData = []
      let xData = []
      for (var i =0; i < resp.data.salesAmountList.length; i++) {
        yData.splice(0, 0, resp.data.salesAmountList[i].liveDate + resp.data.salesAmountList[i].liveTitle)
        xData.splice(0, 0, resp.data.salesAmountList[i].salesAmount)
      }
      this.setState({
        liveData: resp.data,
        xData: xData,
        yData: yData
      },() => this.refresh())
    })
  }

关键代码（二）

yAxis: [
        {
          type: 'category',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            formatter: (value) => {
              value = value.slice(0, 10)
              return value;
            },
          },
          data: this.state.yData
        }
      ],

关键代码（三）

var option = {
      color: ['#3398DB'],
      tooltip: {
        show: true,
        trigger: 'axis',
        formatter: function (params) {
          console.log(params)
          if (params[0].data > 9999) {
            params[0].data = (params[0].data/10000).toFixed(2) + 'w'
            return params[0].name.slice(0, 10) + '\r\n' + params[0].name.slice(10) + '\r\n' + params[0].data
          } else {
            return params[0].name.slice(0, 10) + '\r\n' + params[0].name.slice(10) + '\r\n' + params[0].data
          }
        }
      },

总结一下就是，向这种网上都找不到，文档里又写的不是很清楚的问题，就应该多思考，多去尝试，不要觉得不可能实现，不试怎么知道呢？实践出真知O(∩_∩)O哈哈~

文章已转移到个人公众号，有帮到你的话，用发财的小手关注一下我的公众号呗~