echarts问题

1、

document.getElementById(id).removeAttribute('_echarts_instance_')

2、

let myChart = this.$echarts.init(document.getElementById('xxx'))
myChart.setOption(option)

 3、跟随缩放

        let myChart = this.$echarts.init(document.getElementById('data'));
        myChart.setOption(option);
        window.onresize = myChart.resize()

雷达图按需求设置字体颜色

  let dataNormal = data.map((item) => { if (item >= 4) { return item} else { return } });
  let dataLow = data.map((item) => { if (item < 4) { return item} else { return } });

series: [
            {
              radius: '65%',
              center: ['0%', '50%'],
              type: 'radar',
              data: [
                {
                  value: data,
                }
              ],
              label: {
                // 显示数据
                show: false,
                // 文本位置
                position: 'top',
                distance: 7,
                // offset:[12,0]
              },
              // 设置区域边框和区域的颜色
              itemStyle: {
                normal: {
                  color: '#36b5e7',
                  lineStyle: {
                    color: '#36b5e7',
                  },
                },
              },
            },
            {
              radius: '65%',
              center: ['0%', '50%'],
              type: 'radar',
              //radarIndex: 1,
              data: [
                {
                  value: dataNormal,
                  //在拐点处显示数值
                  label: {
                    normal: {
                      show: true,
                      color: '#36b5e7'
                    }
                  }

                }
              ],
              // 设置区域边框和区域的颜色
              lineStyle: {
                 0,
                labelLine: {
                  show: false   //隐藏标示线
                }
              },
              itemStyle: {
                normal: {
                  color: '#36b5e7',
                  show: false
                }
              },
              silent: true,
              z: 2
            },
            {
              radius: '65%',
              center: ['0%', '50%'],
              type: 'radar',
              //radarIndex: 1,
              data: [
                {
                  value: dataLow,
                  //在拐点处显示数值
                  label: {
                    normal: {
                      show: true,
                      color: '#ff0000'
                    }
                  }

                }
              ],
              lineStyle: {
                 0,
                labelLine: {
                  show: false   //隐藏标示线
                }
              },
              silent: true,
              z: 3
            }
          ]

 X轴 多余省略号显示

xAxis: [
          {
            type: 'category',
            data: data.category,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              show:true,
              interval: 0, //强制所有标签显示
              align:'center',
              // margin: 115, //标签向右移动 如果yAxis 跟 xAxis换了,这个margin应该调为0才能看见标签显示
              textStyle: {
                color: '#000',
              },
              formatter: function (params) {   //标签输出形式
                let index = 10;
                let newstr = '';
                for (let i = 0; i < params.length; i += index) {
                  let tmp = params.substring(i, i + index);
                  newstr += tmp + '
';
                }
                if (newstr.length > 4) {
                  return newstr.substring(0, 4) + '...';
                } else {
                  return '
' + newstr;
                }
              }
            }
          }
        ],

 柱状图点击范围

        // 范围点击
        myChart.getZr().on('click', params => {
          const pointInPixel = [params.offsetX, params.offsetY];
          if (myChart.containPixel('grid', pointInPixel)) {
            let xIndex = myChart.convertFromPixel({seriesIndex: 0}, [params.offsetX, params.offsetY])[0];
            let option = myChart.getOption()
            let val = option.xAxis[0].data[xIndex]
          }
        }

        //将可以响应点击事件的范围内，鼠标样式设为pointer-----------------
        myChart.getZr().on('mousemove', function (params) {
          var pointInPixel = [params.offsetX, params.offsetY]
          if (myChart.containPixel('grid', pointInPixel)) {
            myChart.getZr().setCursorStyle('pointer')
          }
        })
        myChart.on('mouseout', function (params) {
          var pointInPixel = [params.offsetX, params.offsetY]
          if (!myChart.containPixel('grid', pointInPixel)) {
            myChart.getZr().setCursorStyle('default')
          }
        })

 柱状图颜色

          series: [{
            name: '差评数',
            barWidth: 23,
            data: ldata,
            type: 'bar',
            itemStyle: {
              normal: {
                // 颜色
                // color: '#00a1e0',
                // 隔行变色
                // color: function (params) {
                //   //首先定义一个数组
                //   let colorList = ['#00a1e0', '#ff8900'];
                //   if (params.dataIndex % 2 == 0) {
                //     return colorList[0]
                //   } else {
                //     return colorList[1]
                //   }
                // },
                // 渐变色
                // color: new this.$echarts.graphic.LinearGradient(
                //   0, 0, 0, 1,
                //   [
                //     {offset: 0, color: '#2B71D9'},
                //     {offset: 1, color: '#3CDAF2'}
                //   ]
                // ),
                // 设置不同颜色
                color: function (params) {
                  let colorList = [
                    '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                  ];
                  return colorList[params.dataIndex]
                },
                barBorderRadius: [8, 8, 8, 8],
                label: {
                  show: true,
                  position: 'top',
                  fontSize: 12,
                  // color: "#00a1e0"
                  // formatter: '{b}
{c}'
                  formatter: '{c}'
                },
              }
            },
          }]

 高度跟随数据长度自适应

  <div style="height: 8rem;overflow-y: scroll">
    <div class="office" id="office"></div>
  </div>

          this.$echarts.dispose(document.getElementById('office'));
          let myChart = this.$echarts.init(document.getElementById('office'));
          myChart.setOption(option);
          // 柱状图y轴的长度 option.yAxis.data.length
          this.autoHeight = option.yAxis[0].data.length * 20 + 120;
          // 获取 ECharts 实例容器的 dom 节点。
          myChart.getDom().style.height = this.autoHeight + "px";
          myChart.getDom().childNodes[0].style.height = this.autoHeight + "px";
          myChart.getDom().childNodes[0].childNodes[0].setAttribute("height",this.autoHeight);
          myChart.getDom().childNodes[0].childNodes[0].style.height = this.autoHeight + "px";
          myChart.resize();

自动计算最大最小值

yAxis：[
       max: (value) => {
           return value.max
       },
       min: (value) => {
            return value.min
       }
]

X轴出现负数不美观的处理，如下

axisLine: {
      onZero: false
}