VUE 如何使用 Echarts

VUE 如何使用 Echarts

1. 打开项目终端 输入 npm install echarts --save 然后点击回车
   如果是成功就是下图这样

2. 在把下面两行代码引入men.js这里做的是中全局引入Echarts
   import echarts from 'echarts'
Vue.prototype.$echarts = echarts
   如图所示

3. 在视图层使用

<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>
export default {
  name: "app",
  methods: {
    drawChart() {
      // 用Dom获取上面已经创建的标签，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      let option = {
		  xAxis: {
		        type: 'category',
		        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	      },
	      yAxis: {
	        type: 'value'
	      },
	      series: [{
	        data: [820, 932, 901, 934, 1290, 1330, 1320],
	        type: 'line'
	      }]
  	  };	
      // 使用刚指定的配置项和数据显示图表的。
      myChart.setOption(option);
    }
   },
   mounted() {
	    this.drawChart();
   }
  }
</script>

4. 最后的成果
   
   如果想要其它样式就去官网复制代码然后替换 代码中 let option = …