vue使用Echarts问题汇总

1、想用多雷达图实现单雷达图展示如何做?

实现效果（不同的indicator和不同的series结合到一起单个显示）

实现思路：由于多边形不一样数据不一样还想单个展示，先获取第一个展示的数据，legend点击事件(legendselectchanged)调用自己 传递对应参数 访问接口（会形成递归需要使用mychart.off(‘legendselectchanged’)）具体代码如下所示：
说明：legend就是雷达图上方的选项根据data数据的name属性定义的
indicator就是多边形角的名称

// 多雷达图
    getRadarData(url, param) {
      return this.$http.get(`${url}/${param}?day=90`)
    },
    async getChartRadar(url, param) {
      let {data: res} = await this.getRadarData(url, param)
      // 定义echarts中series里的data数据格式和indicator数据格式
      let data1 = [{
        value: [],
        name: 'ip'// legend
      }, {
        value: [],
        name: 'url'// legend
      }, {
        value: [],
        name: 'domain'// legend
      }, {
        value: [],
        name: 'email'// legend
      }, {
        value: [],
        name: 'hash'// legend === 传递的参数param
      }], indicator = [];
      // 判断是否有数据
      if (Object.keys(res.data).length === 0) {
        this.echarts2Loading = false
        this.textShow = true
        return
      }
      this.echarts2Loading = false
      // 获取series里的data数据对应的参数下标 用于之后转换格式保存的value
      let index = data1.findIndex((v) => {
        return v.name === param // 获取当前展示的数据对应的下标
      })
      // 循环数据并赋值给series里的data和转换成indicator格式
      for (let data of res.data.values()) {
        data1[index].value.push(data.count)
        indicator.push({
          text: data.channelName,// 这里就是添加图形的边
          color: '#333',
          max: 100
        })
      }
      // 这里修改了indicator最大值为数据的最大值 除了都是0的数据值（因为数据值不固定，防止值太小看不清楚）
      for (let i = 0; i < data1[index].value.length; i++) {
        if (data1[index].value[i] > 0) {
          indicator.map(item => {
            return item.max = Math.max.apply(null, data1[index].value);
          })
        }
      }
      // 设置多个series 有几个legend就有几个series
      let series = data1.map(item => {
        return {
          type: 'radar',
          areaStyle: {},
          tooltip: {
            trigger: 'item'
          },
          data: [item]
        }
      })
      let title = this.title
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart1)
      // 绘制图表
      myChart.setOption({
        title: {
          text: title
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: true,
          selectedMode: 'single', // 选项 单选设置
          textStyle: {
            color: '#333'
          }
        },
        xAxis: {
          show: false
        },
        yAxis: {
          show: false
        },
        radar: [{
          // 多边形展示的名称
          indicator: indicator,
          radius: 200,
          center: ['50%', '50%'],
        },
        ],
        series,
      });
      let that = this;// 用于调用自身声明的this
      myChart.off('legendselectchanged'); // 解绑
      myChart.on('legendselectchanged', function (params) { // legend点击事件 
      	// 调用自身 这里传递的是 接口 和 接口接收的参数legend的name
        that.getChartRadar(url, params.name)
      })

    },

2、Echarts只显示100px的问题

解决办法：添加settimeout

 setTimeout(()=>{
          let myChart = this.$echarts.init(this.$refs.myChart0)
          let titleText = this.title
          // 绘制图表
          myChart.setOption({
            color: ['#5B8FF9'],
            title: {
              text: titleText
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              orient: 'vertical',
              left: 'center',
              bottom: 'bottom',
              data: ['发件异常趋势图']
            },
            grid: {
              top: '50px',
              left: '40px',
              right: '5px',
              bottom: '50px',
              backgroundColor: '#fff',
              width: 'auto', //图例宽度
            },
            xAxis: {
              type: 'category',
              data: dataList,
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#cbc6c6',  //更改坐标轴文字颜色
                }
              },
              axisTick: {show: false}, //隐藏横坐标刻度小线条
            },
            yAxis: {
              type: 'value',
              axisLine: { //y轴
                show: false
              },
              axisTick: { //y轴刻度线
                show: false
              },
              splitLine: { //网格线
                show: true,
                lineStyle: {
                  color: ['#f4f4f4'],
                  width: 1,
                  type: 'solid'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#cbc6c6',  //更改坐标轴文字颜色
                }
              },
            },
            series: [{
              name: titleText,
              smooth: true,
              data: matchedCount,
              type: 'line',
              label: {
                position: "top",
                show: true,
                distance: 8.5
              },
              symbol: "circle",
              symbolSize: 6,
              symbolOffset: [0, 0]
            }]
          })
},800)

3、同一个地方展示不同的Echarts会出现重叠现象以及数据错乱

如图所示：

// 需要在每个Echarts定义之前清除一下
let myChart = this.$echarts.init(this.$refs.myChart1)
myChart.clear()// *清空echarts
myChart.setOption({...})