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: {
                width: 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: {
                width: 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 + '\n';
                }
                if (newstr.length > 4) {
                  return newstr.substring(0, 4) + '...';
                } else {
                  return '\n' + 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}\n{c}'
                  formatter: '{c}'
                },
              }
            },
          }]