vue-cli echarts可视化的方法

1. 使用Vue create 项目文件名 创建好项目之后,使用cd 项目文件名进入项目里面，再使用命令npm install echarts -S下载echarts
2. 在src下面的main.js文件中添加代码块

import echarts from 'echarts'
 
Vue.prototype.$echarts = echarts

3.在src\components目录下新建Test.vue文件，代码如下

<template>
    <div id="myChart"></div>
</template>
<script>
/* eslint-disable */
export default {
    name: 'Test',
 
    mounted(){
        this.drawLine();
    },
    methods:{
        drawLine(){
            // 基于准备好的dom，初始化echarts实例
            const myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption({
                title: { text: '在Vue项目中使用echarts'},
                tooltip: {},
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'line',
                    data:  [5, 20, 36, 10, 10, 20],
                    smooth: true
                }]
            });
        }
    }
    
}
</script>
 
<style scoped>
    #myChart{
        width: 500px;
        height: 300px;
    }
</style>

4.修改App.vue

<template>
  <div id="app">
    <Test/>
  </div>
</template>
 
<script>
import Test from './components/Test'
 
export default {
  name: 'App',
  components: {
   Test
  }
}
</script>
 
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

5.npm run serve