echarts快速入门（vue2）

一、npm安装

//终端命令
npm install echarts --save

二、引入echarts

<script>

    import * as echarts from 'echarts'

</script>

三、选择需要的示例

<template>
    <div id="main" style="height: 300px;width: 500px;float:left;display: inline;"></div>
</template>

<script>
  import * as echarts from 'echarts';

  export default {
    data() {
      return {

      }
    },

     mounted() {
      var chartDom = document.getElementById('one')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      }

      option && myChart.setOption(option)
    }

</script>

简化mounted：

<script>
import * as echarts from 'echarts'

  let chartDom
  let myChart
  let option

  export default {
    data() {
      return {

      }
    },

    mounted: {
        this.openLine()
    },

    methods: {
      openLine() {
        chartDom = document.getElementById('one')
        myChart = echarts.init(chartDom)
        option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line'
            }
          ]
        }

        option && myChart.setOption(option)
      }
     },
    }
</script>