echarts踩坑总结

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 += `<span style="font-size: 14px;">${item.name}</span> 
            <div style="margin-top: 20px;display:flex;align-items:center;">
              <div style="display: inline-block;width: 7px;border-radius: 50%;height:7px;background: #FF8543;"></div>
              <span style="padding-left: 8px">资产数：<span style="font-weight: 600">${item.value}</span></span>
            </div>`
            })
        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 += `<span style="font-size: 14px;color:${item.color};">${item.name}</span> 
          <div style="margin-top: 5px;display:flex;align-items:center;">
            <div style="display: inline-block;width: 7px;border-radius: 50%;height:7px;background: ${item.color};"></div>
            <span style="padding-left: 8px";>数量：<span style="font-weight: 600">${item.value}</span></span>
          </div>`
        return str;
      }
    },
    series: [
      {
        type: 'pie',
        bottom: '20%',
        radius: ['60%', '90%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
              show: false,
          },
        },
        data: [],
        color:['#F5222D', '#FF8543', '#FFBB00', '#4285F4']
      }
    ]
  }