echarts踩坑总结

1，有关echarts引用的相关报错直接写这句  import * as echarts from 'echarts'

2，折线图

chartsObj = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type:'none', // 默认为line，不关闭会有引线跟随
      },
      formatter(params:any) { //自定义提示框，可打印params查看
        let str = ''
        params.forEach((item:any)=>{
        		str += `${item.name} 
            

              

              资产数：${item.value}
            
`
            })
        return (str);
      },
    },
    grid: {
      top: '5%',
      left: '1%',
      right: '2.5%',
      bottom: '5%',
      containLabel: true // 区域自适应
    },
    xAxis: {
      type: 'category',
      axisTick: { // 是否显示刻度线
        show: false
      },    
      boundaryGap: false, // 不留白，从原点开始
      axisLine: { //横坐标横线线条
        lineStyle: {
          type: 'solid',
          color: '#ccc',
        }
      },
      axisLabel: { // 横坐标字体
        textStyle: {
          color: '#4D5059 ' 
        }
      },
      splitLine: { // 横坐标上方线条显示及颜色
        show:true,
        lineStyle : {
          color: '#cccc',
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false
      },
      axisLine: {
        show:true,
        lineStyle: {
          type: 'solid',
          color: '#ccc',
        }
      },
      axisLabel: { // y轴文字设置
        textStyle: {
          color: '#4D5059 '
        },
        lineStyle: {
          color: '#F2F4F7',
        }
      },
      splitLine: {
        lineStyle : {
          color: '#cccc',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        data: [],
        type: 'line',
        symbol:'circle',
        smooth:true,
        symbolSize:10,//拐点大小
        itemStyle: {
          normal: {
            color: '#FF8543', //改变折线点的颜色
            lineStyle: {
              color: '#FF8543' //改变折线颜色
            }
          }
			  },
        areaStyle: { // 区域渐变色
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
                  offset: .2,
                  color: 'rgba(255,133,67,0.16)'
              }, {
                  offset: .8,
                  color: 'rgba(66, 133, 244, 0)'
              }])
          }
        },
        showSymbol: false, // 是否展示折线上的圆点默认
      }
    ]
  }

　3，饼图　

chartsObj ={
    title: {
      textStyle: {
        fontFamily: 'PingFangSC-Medium, sans-serif',
        fontWeight: 500,
        fontSize: 14
      },
      bottom: '15%',
      left: '40%'
    },
    legend: {
        right:10,
        top:10,
        orient : 'vertical',
        icon: "circle",
        type: "scroll", // 是否开启切换图例分页
        itemWidth: 12, // 图例标记的图形宽度。
        itemHeight: 12, //  图例标记的图形高度。
        width: 'auto', // 图例组件的宽度
        height: 'auto', // 图例组件的高度
    },
    tooltip: {
     // trigger: 'item',
      formatter(item:any) {
        let str = ''
        str += `${item.name} 
          

            

            数量：${item.value}
          
`
        return str;
      }
    },
    series: [
      {
        type: 'pie',
        bottom: '20%',
        radius: ['60%', '90%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
              show: false,
          },
        },
        data: [],
        color:['#F5222D', '#FF8543', '#FFBB00', '#4285F4']
      }
    ]
  }

4，一般各种图标要自适应缩放，所以添加监听事件

      window.addEventListener('resize',this.handleWindowResize)   5 ，当组件离开要在销毁生命周期中释放掉以及清空监听事件     this.myChartDate.dispose()     window.removeEventListener('resize',this.handleWindowResize)   6，其他补充  1.饼图title,不要使用百分比；top和bottom可以，尤其是left和right最好别用，会有下图问题；可用x,y属性控制     title: {      x:'center',       bottom:'15%',     }

 2,折线图y轴线条真的是无语了，想要加颜色必须加上show：true;x轴就不用加；

     axisLine: {         show:true,         lineStyle: {           type: 'solid',           color: '#E7EFFD',         }       },