1、在项目下terminal安装依赖 npm install echarts -S

2、在WebStorm    src/main.js中全局引入

import echarts from 'echarts'复制

Vue.prototype.$echarts = echarts复制

3、编写代码，在mounted函数中调用echart的实例

<template>
    <div id="myChart" :style="{width:'600px',height:'300px'}"></div>
</template>

<script>
  export default {
    name: 'Echartdemo',
    data(){
      return{
        msg: 'EChart demo'
      }
    },
    mounted(){
      this.drawLine()
    },
    methods: {
      drawLine(){
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        myChart.setOption({
          title: { text: 'xxx高铁商品销量统计' },
          tooltip: {},
          xAxis: {
            data: ["水果","酸奶","可乐","矿泉水","瓜子花生","扑克牌"]
          },
          yAxis:{},
          series:[{
            name: '销售',
            type: 'bar',
            data: [105,40,16,100,210,80]
          }]
        });
      }
    }
  }
</script>

<style scoped>

</style>复制