知识笔记（九十六）———在vue中使用echarts

本文主要是介绍知识笔记（九十六）———在vue中使用echarts，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、安装

npm install echarts --save

2、在vue中引入（全局引入）

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3、在vue中的使用

需要用到echart的地方先设置一个div的id、宽高

提示：
可以在一个页面中引入多个数据报表模板
使用div进行位置的排版放置

4、模板代码放在哪个位置

重点注意：其中const option = { }就是我们需要引进echart图表的代码

<template><div><div ref="chart" style="width:50%;height:376px"></div></div></template>

要在mounted生命周期函数中实例化echarts对象。确保dom元素已经挂载到页面中。

mounted(){this.getEchartData()  },methods: {getEchartData() {const chart = this.$refs.chartif (chart) {const myChart = this.$echarts.init(chart)const option = {...}myChart.setOption(option)window.addEventListener("resize", function() {myChart.resize()})}this.$on('hook:destroyed',()=>{window.removeEventListener("resize", function() {myChart.resize();});})}}

5、完整的一个vue页面实例：

<template><div><div ref="chart" style="width:50%;height:376px"></div><div ref="chart1" style="width:50%;height:376px"></div></div></template><script>export default {data() {},mounted() {this.getEchartData()this.getEchartData1()},methods: {getEchartData() {const chart = this.$refs.chartif (chart) {const myChart = this.$echarts.init(chart)const option = { legend: {},tooltip: {},dataset: {source: [['订单', 43.3, 85.8],['订单1', 83.1, 73.4],['订单2', 86.4, 65.2],['订单3', 72.4, 53.9],['订单4', 82.4, 53.9],['订单5', 42.4, 53.9],['订单6', 72.4, 53.9],['订单7', 72.4, 53.9]]},xAxis: { type: 'category' },yAxis: {},series: [ { type: 'bar' }, { type: 'bar' }]}myChart.setOption(option)window.addEventListener("resize", function() {myChart.resize()})}this.$on('hook:destroyed',()=>{window.removeEventListener("resize", function() {myChart.resize();});})},getEchartData1() {const chart1 = this.$refs.chart1if (chart1) {const myChart = this.$echarts.init(chart1)const option = {title: {text: 'Stacked Line'},tooltip: {trigger: 'axis'},legend: {data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']},yAxis: {type: 'value'},series: [{name: 'Email',type: 'line',stack: 'Total',data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230]},{name: 'Union Ads',type: 'line',stack: 'Total',data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330]},{name: 'Video Ads',type: 'line',stack: 'Total',data: [150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330]},{name: 'Direct',type: 'line',stack: 'Total',data: [320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330]},{name: 'Search Engine',type: 'line',stack: 'Total',data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330]}]}myChart.setOption(option)window.addEventListener("resize", function() {myChart.resize()})}this.$on('hook:destroyed',()=>{window.removeEventListener("resize", function() {myChart.resize();});})},},watch: {},created() {}}
</script>

接着去页面中看吧，如有不显示现象请等待下一篇文章...

这篇关于知识笔记（九十六）———在vue中使用echarts的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---