如何在vue中使用vue-echarts插件

1.先下载echarts

npm install echarts -S

2.在用到的组件中导入

<script>
   import ECharts from 'vue-echarts'
	// 导入echarts的图形类型
	import 'echarts/lib/chart/radar'
	import 'echarts/lib/chart/line'
    import 'echarts/lib/chart/bar'
    import 'echarts/lib/chart/pie'
	// 导入工具部分
	import 'echarts/lib/component/tooltip'
	import 'echarts/lib/component/title';
	// register component to use
	import 'echarts/lib/component/legendScroll';
	// register component to use
	import 'echarts/lib/component/dataZoom';
	import 'echarts/lib/component/markPoint';
	import 'echarts/lib/component/markLine';
	import 'echarts/lib/component/markArea';
	import 'echarts/lib/component/dataZoom';
	export default{
		components:{
			'v-chart': ECharts
		}
	}
</script>

3.在data里的polar里面放入opation里面的内容

export default{
	data(){
	  return{
		 polar:{
		 
	     }
	  }
    }
}

4.在template里面引入组件

<v-chart style="width:300px;height:200px;" class="echart" :options="polar"/>

5.使用完成,在页面测试一下

发布了25 篇原创文章 · 获赞 0 · 访问量 653

猜你喜欢

转载自blog.csdn.net/JamesHKK/article/details/103797600