vue+echarts 图标组件

<template>
  <div ref="echartLine" class="echart" :style="{margin:'0px', padding:'30px',width: '100%', height: '100%'}" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  methods: {
    initChart(cname, data) {
      let getchart = echarts.init(this.$refs.echartLine)
      if (getchart == null) {
        getchart = echarts.init(this.$refs.echartLine)
      }
      const dateList = data.map(item => {
        return item[0]     //x轴
      })
      const valueList = data.map(item => {
        return item[1]    //y轴
      })
      var option = {

        tooltip: {
          trigger: 'axis'
        },
        legend: {
          textStyle: {
            color: '#61A1FF'
          },
          data: [cname]
        },
        grid: { // 调整图表上下左右位置
          top: '10%',
          left: '3%',
          right: '8%',
          bottom: '11%',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dateList,
          axisLabel: {
            textStyle: {
              color: '#61A1FF'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#61A1FF'
            }
          }
        },
        series: [
          {
            name: cname,
            type: 'line',
            stack: '总量',
            showSymbol: false,
            smooth: true,
            data: valueList,
            itemStyle: {
              normal: {
                color: '#61A1FF',
                lineStyle: {
                  color: '#61A1FF'
                }
              }
            }
          }
        ]
      }

      getchart.setOption(option)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        getchart.resize()
      })
    }

  }

}
</script>

<style>
</style>