话不多说:先看实现效果图:点击下拉框,更改原数据,折线图实时渲染。
一、echarts基本使用
1. 安装echarts
npm install echarts --save
这里说明一下问题,如果不加版本号,默认安装最新版。问题是最新版在下面的引入会报错 ,所以我安装了@4.9.0版的echarts,使用起来没问题。
npm install echarts@4.9.0 --save
2. 我使用的vue cli3,需要在main.js文件中全局引入echarts
// 全局引入echarts组件用于绘制图表
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3. 在.vue文件里直接使用即可。
<template>
<div>
<div id="chartLineBox" style="width: 100%;height: 360px;"></div>
</div>
</template>
<script>
export default {
name: 'FreshmenManageAdmitted',
data () {
return {
// 指定图表的配置项和数据
option: {
tooltip: { // 设置tip提示
trigger: 'axis'
},
legend: { // 设置区分(哪条线属于什么)
},
xAxis: { // 设置x轴
type: 'category',
boundaryGap: false, // 坐标轴两边不留白
data: ['2021-3-1', '2021-3-2', '2021-3-3', '2021-3-4', '2021-3-5', '2021-3-6', '2021-3-7'],
name: '日期', // X轴 name
nameTextStyle: { // 坐标轴名称的文字样式
fontSize: 16,
padding: [0, 0, 0, 20]
}
},
yAxis: {
name: '正确率',
nameTextStyle: {
fontSize: 16,
padding: [0, 0, 10, 0]
},
type: 'value'
},
series: [{ name: '拍手', data: [40, 70, 80, 30, 60, 50, 90], type: 'line' },
{ name: '找小狗', data: [70, 40, 50, 80, 30, 90, 50], type: 'line' }]
}
}
},
mounted () {
this.chartChange()
},
methods: {
chartChange () {
const myEcharts = this.$echarts.init(document.getElementById('chartLineBox'), 'vintage')
// 使用刚指定的配置项和数据显示图表。
myEcharts.setOption(this.option, true)
}
}
}
</script>
4. 使用官方的样式,网址:https://echarts.apache.org/zh/theme-builder.html
下载选择的样式.js文件即可使用,网站支持自定义样式,并导出代码,比女朋友都贴心-.-有木有。
js代码:
// 三种样式表,可以选择一种使用
import 'assets/css/macarons.js'
import 'assets/css/customed.js'
import 'assets/css/vintage.js'
this.myEcharts = this.$echarts.init(document.getElementById('chartLineBox'), 'vintage')
this.myEcharts.setOption(this.option, true)
二、数据动态绑定及表格实时渲染问题
先上代码:当然是使用watch啦,watch大法好啊,为了数据变化时实时刷新表格,在监听到属性值发生改变时,重新渲染一次表格。
敲重点:echarts不会自动帮你渲染数据的,需要手动再次调用setOption函数。
再次敲重点,重点,重点:看到 this.myEcharts.setOption(this.option, true)这一行代码了吗?最后这个属性'true'真是nb坏了,没它不行。
上官方代码:setOption的函数定义,option是指图表的配置项和数据,notMerge是指是否不跟之前设置的 option
进行合并。默认为 false
。即表示合并。如果为 true
,表示所有组件都会被删除,然后根据新option
创建所有新组件。
也就是说如果不设置noeMerge就会自动合并数据,离谱!千万要设置,千万要设置,千万要设置。
(option: Object, notMerge?: boolean, lazyUpdate?: boolean)
or
(option: Object, opts?: {
notMerge?: boolean;
replaceMerge?: string | string[];
lazyUpdate?: boolean;
})
export default {
name: 'StudentCourseDataChart',
props: {
xData: {
type: Array,
default () {
return []
}
},
yData: {
type: Array,
default () {
return []
}
}
},
watch: {
'xData': function (val) {
this.chartChange()
},
'yData': function (val) {
this.chartChange()
}
},
methods: {
chartChange () {
this.myEcharts = this.$echarts.init(document.getElementById('chartLineBox'), 'vintage')
this.option.xAxis.data = this.xData
for (var i = 0; i < this.yData.length; i++) {
this.yData[i]['type'] = 'line'
}
this.option.series = this.yData
// 使用刚指定的配置项和数据显示图表。
this.myEcharts.setOption(this.option, true)
}
}
数据部分如下:上面的循环添加'type'属性只是为了简化原数据内容,若不加这个属性会报错。
const StudentCourseChartDataX = ['2021-3-1', '2021-3-2', '2021-3-3', '2021-3-4', '2021-3-5', '2021-3-6', '2021-3-7']
const StudentCourseChartDataY = [{ name: '拍手', data: [40, 70, 80, 30, 60, 50, 90] },
{ name: '找小狗', data: [70, 40, 50, 80, 30, 90, 50] }]
也可以使用计算属性实时更新数据,这里就不展示了。