Vue中 使用echarts

vue項目開發中，需要使用echarts報表，使用方法如下：

1.使用npm, 安裝echarts

npm install echarts --save -dev

1. 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/