vue中echart的用法

1) 下载  npm install echarts --save

2)引入 import * as echarts from 'echarts'

3)   <div id="main" ref="main"></div>  // 设置宽高

4) // 写在方法里面 

methods: {

    getChart () {

      const myChart = echarts.init(this.$refs.main)

      // 绘制图表

      myChart.setOption({

        color: '#FFBF00',

        toolbox: {

          // left: '50%',

          feature: {

            dataView: { show: true, readOnly: false },

            magicType: { show: true, type: ['line', 'bar'] },

            restore: { show: true },

            saveAsImage: { show: true }

          }

        },

        title: {

          text: '月新增文章数',

          left: 'center'

        },

        legend: {

          top: '30',

          data: [

            '月新增文章数',

            'Union Ads',

            'Video Ads',

            'Direct',

            'Search Engine'

          ]

        },

        xAxis: {

          type: 'category',

          boundaryGap: false,

          data: [

            '2021-01-01',

            '2021-02-02',

            '2021-03-01',

            '2021-04-01',

            '2021-05-01',

            '2021-06-01',

            '2021-07-01'

          ]

        },

        yAxis: {

          type: 'value',



          axisLine: {

            onZero: false,

            lineStyle: {

              color: 'red'

            }

          },



          name: '月新增文章数',



          nameTextStyle: {

            color: 'red'

          }

        },

        series: [

          {

            name: '月新增文章数',

            smooth: true,

            label: {

              padding: '40px'

            },

            data: [150, 230, 224, 218, 135, 147, 260],

            type: 'line',

            areaStyle: {}

          }

        ]

      })

    }}

5) 调用

  mounted () {

    this.getChart()



  },