Vue中 使用echarts

vue项目开发中，需要使用echarts报表，使用方法如下：

1.使用npm, 安装echarts

npm install echarts --save -dev

2. vue 页面代码

<template>
  <div>
      <div id="zxt"></div>
  </div>
</template>

<script>
  const echarts = require('echarts');
	export default {
		components: {},
		name: "test",
		data () {
			return {}
		},
		mounted () {
			// 初始化echarts实例
     		 const echart = echarts.init(document.getElementById('zxt'))
     		 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'
			    }]
			};
			// 实例赋值 渲染图表
      		echart.setOption(option)
		}
	}
</script>

总结

1. 项目先安装echarts
2. 定义一个容器
3. 然后 echarts.init 方法初始化一个 echarts 实例
4. 使用 setOption 方法赋值生成图表

以上仅供参考，欢迎斧正！附echarts官方文档：https://echarts.baidu.com/examples/