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']
      }
    ]
  }