简单介绍echarts使用

//div:
 <div id="main" style="width: 535px"></div>

//引入
import * as echarts from 'echarts'


//挂载
 mounted() { this.echarts() }

//方法
methods:{
echarts(){

  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ]
};

option && myChart.setOption(option);

 }
}


 //tips:
 //悬浮数据：tooltip: { trigger: 'axis'}
 //圆点消失：symbol: 'none',
 //刚开始没有圆点，悬浮上有圆点： showSymbol: false

          var chartDom = document.getElementById('main')
          var myChart = echarts.init(chartDom)
          var option
          option = {
            tooltip: {
              trigger: 'item',
              show: true,
            },
            series: [
              {
                type: 'pie',
                radius: '90%',
                itemStyle: {
                  color: function (params) {
                    var colorList = [
                      {
                        c1: '#50D58B',
                        c2: '#BCE897',
                      },
                      {
                        c1: '#34C9C9',
                        c2: '#1890FF',
                      },
                    ]
                    return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: colorList[params.dataIndex].c1,
                      },
                      {
                        offset: 1,
                        color: colorList[params.dataIndex].c2,
                      },
                    ])
                  },
                },

                data: [
                  { value: 0, name: '采购金额' },
                  { value: 0, name: '采购总金额' },
                ],
                label: {
                  normal: {
                    position: 'inside',
                    show: false,
                    position: 'inside',
                    formatter: '{b}:{d}%',
                  },
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                  },
                },
              },
            ],
          }

          option && myChart.setOption(option)

  var chartDom = document.getElementById('payment')
          var myChart = echarts.init(chartDom)
          var option
          option = {
            tooltip: {
              trigger: 'item',
            },

            color: ['#1890FF', '#50D58B'],
            series: [
              {
                type: 'pie',
                radius: ['70%', '85%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  normal: {
                    show: true,
                    position: 'center',
                    formatter: function () {
                        return `${number}\r\n 总金额`
                    },
                    textStyle: {
                      fontSize: 15,
                      color: '#2C2955',
                    },
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: 15,
                      color: '#2C2955',
                    },
                  },
                },
                data: [
                  // { value: 100, name: '已回款金额' },
                  // { value: 150, name: '剩余回款金额' },
                ],
              },
            ],
          }

          option && myChart.setOption(option)

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis',
    type: 'line',
    textStyle: {
      color: '#8FE7FF'
    }
  },
  color: ['#8DD5CB', '#826FF8', '#4DBBFF', '#FF7B8B', '#DFC141'],
  legend: {
    data: ['告警类型1', '告警类型2', '告警类型3', '告警类型4', '告警类型5']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '告警类型1',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210],
      showSymbol: false,
      smooth: true,

      itemStyle: {
        normal: {
          lineStyle: {
            color: '#00F6B8'
          }
        }
      }
    },
    {
      name: '告警类型2',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310],
      showSymbol: false,
      smooth: true,
      itemStyle: {
        normal: {
          lineStyle: {
            color: '#AB90DF'
          }
        }
      }
    },
    {
      name: '告警类型3',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410],
      showSymbol: false,
      smooth: true,
      itemStyle: {
        normal: {
          lineStyle: {
            color: '#4DBBFF'
          }
        }
      }
    },
    {
      name: '告警类型4',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320],
      showSymbol: false,
      smooth: true,
      itemStyle: {
        normal: {
          lineStyle: {
            color: '#FF7B8B'
          }
        }
      }
    },
    {
      name: '告警类型5',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      showSymbol: false,
      smooth: true,
      itemStyle: {
        normal: {
          lineStyle: {
            color: '#DFC141'
          }
        }
      }
    }
  ]
};

option && myChart.setOption(option);