vue中echarts动态刷新数据（x轴y轴和title）

动态刷新数据（x轴y轴和title）"/>

vue中echarts动态刷新数据（x轴y轴和title）

最近需求做一个数据表，根据筛选条件不一样，渲染不同的内容。，主要如下图

如图，一开始什么都没有的时候默认显示title，当进行筛选的时候横轴和纵轴都显示相应的数据。问题就是，我按照其他百度问题说的做，直接赋值语句上this.chart.setOption(newVal);

然而并没有什么屁用。。。。。

因为需求是有数据时改变x轴和y轴数据，隐藏标题的渲染，百度到几乎都是差不多一样的解法之后，，，，我放弃了百度，自己上，因为之前有做echarts的经验，所以摸索起来花了一个多小时把它整出来了，最关键代码先贴出来，心急的小伙伴看完就差不多可以自己撸起袖子干了。

   axiasy: function(newVal, oldVal) {console.log(newVal, oldVal)this.chart.clear()  // 清空echarts之前渲染的数据this.lineOption.series[0].data = this.axiasy  //赋值y轴this.lineOption.xAxis[0].data = this.axiasx   //赋值x轴this.lineOption.title.show = this.emptyshow    //标题的展示和隐藏this.chart.setOption(this.lineOption, true)    //赋值好之后将数据set进去完事}

上面就是我研究出来的，哈哈，满足需求就很爽！

人恨话不多，上代码（由于某种原因，echarts的线图是直接抽出来的插件，so我把它展示一下，觉得难以理解可以看别人的渲染，只是修改的时候渲染的时候看这个就行）

<template><div :id="id" :class="className" :axiasx="axiasx" :axiasy="axiasy" :style="{height:height,width:width}" />
</template><script>
import echarts from 'echarts'
import resize from './mixins/resize'export default {mixins: [resize],props: {className: {type: String,default: 'chart'},id: {type: String,default: 'chart'},width: {type: String,default: '200px'},height: {type: String,default: '200px'},axiasx: {type: Array,default: () => []},axiasy: {type: Array,default: () => []},emptyshow: {//展示标题与否type: Boolean,default: true},titles: {//是否输入不同的标题提示type: String,default: ''}},data() {return {chart: null,lineOption: {backgroundColor: '#394056',tooltip: {trigger: 'axis',axisPointer: {lineStyle: {color: '#57617B'}},formatter: '时间：{b} \n 使用率：{c}%'},title: {text: '暂无数据，选择医院及日期后将自动渲染',show: this.emptyshow,textStyle: {color: '#fff',fontSize: 16},textAlign: 'middle',top: '50%',left: '45%'},grid: {top: 100,left: '5%',right: '5%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',boundaryGap: false,name: '时间',nameTextStyle: {color: 'rgb(0,253,255,0.6)',fontSize: 16},axisLine: {lineStyle: {color: 'rgb(23,255,243,0.3)'}},axisLabel: {margin: 10,textStyle: {fontSize: 14,color: '#fff'}},data: this.axiasx}],yAxis: [{type: 'value',name: '使用率(%)',nameTextStyle: {color: 'rgb(0,253,255,0.6)',fontSize: 16},max: 100,axisTick: {show: false},axisLine: {lineStyle: {color: 'rgb(23,255,243,0.3)'}},axisLabel: {margin: 10,textStyle: {fontSize: 14,color: '#fff'}},splitLine: {lineStyle: {color: 'rgb(23,255,243,0.3)'}}}],series: [{name: '使用率',type: 'line',// smooth: true,//是否需要曲线平滑symbol: 'circle',symbolSize: 5,lineStyle: {normal: {width: 1}},areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(23, 255, 243, 0.5)'}, {offset: 0.8,color: 'rgba(23, 255, 243, 0)'}], false),shadowColor: 'rgba(0, 0, 0, 0.1)',shadowBlur: 10}},itemStyle: {normal: {color: 'rgba(23, 255, 243)',borderWidth: 12,label: {show: true,position: 'top',textStyle: {color: '#fff',fontSize: 14},formatter: '{c}%'}}},data: this.axiasy}]}}},watch: {axiasy: function(newVal, oldVal) {console.log(newVal, oldVal)this.chart.clear()this.lineOption.series[0].data = this.axiasythis.lineOption.xAxis[0].data = this.axiasxthis.lineOption.title.show = this.emptyshowthis.chart.setOption(this.lineOption, true)},titles: function(newVal, oldVal) {console.log(newVal, oldVal)this.chart.clear()this.lineOption.title.text = this.titlesthis.chart.setOption(this.lineOption, true)}},mounted() {this.initChart()},beforeDestroy() {if (!this.chart) {return}this.chart.dispose()this.chart = null},methods: {initChart() {this.chart = echarts.init(document.getElementById(this.id))this.chart.setOption(this.lineOption)}}
}
</script>

由于引入了mixins/resize，所以也把它贴出来

export default {data() {return {$_sidebarElm: null}},mounted() {this.__resizeHandler = this.debounce(() => {if (this.chart) {this.chart.resize()}}, 100)window.addEventListener('resize', this.__resizeHandler)this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)},beforeDestroy() {window.removeEventListener('resize', this.__resizeHandler)this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)},methods: {// use $_ for mixins properties// .html#Private-property-names-essential$_sidebarResizeHandler(e) {if (e.propertyName === 'width') {this.__resizeHandler()}},debounce(func, wait, immediate) {let timeout, args, context, timestamp, resultconst later = function() {// 据上一次触发时间间隔const last = +new Date() - timestamp// 上次被包装函数被调用时间间隔 last 小于设定时间间隔 waitif (last < wait && last > 0) {timeout = setTimeout(later, wait - last)} else {timeout = null// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用if (!immediate) {result = func.apply(context, args)if (!timeout) context = args = null}}}}
}

主组件就根据条件传参进来即可

<div class="chart-container"><chart height="92%" width="100%" :axiasx="axiasx" :axiasy="axiasy" :emptyshow="emptyShow" :titles="noneTitle" /></div><script>
import Chart from '@/components/Charts/LineMarker'
import { Message } from 'element-ui'
import { fetchEcharts, fetchClassTable, fetchhospitalList } from '@/api/api-request'
export default {name: 'TabPane',components: { Pagination, Chart },props: {type: {type: String,default: 'et'}},data() {return {selectValue: null, // 选择的医院options: [],axiasx: [],axiasy: [], // 画图的y轴emptyShow: true, // 定义是否已经可以渲染sortValue: '', // 排序条件选择noneTitle: '', // 选择查看的图表没有数据dateValue: [new Date(new Date().getTime() - 3600 * 1000 * 24), new Date()],listLoading: false, // 加载数据回来后变为falselistQuery: {page: 1,limit: 20,total: 12},tableData: []}},created() {this.getHospital()},methods: {getHospital() {fetchhospitalList().then(res => {console.log(res)if (res.errcode === 0) {this.options = res.hospital_listconst list = getHosMessage(res)this.$storemit('hospital/SET_HOSPITAL_LIST', list[0])this.$storemit('hospital/SET_DEPARTMENT_LIST', list[1])this.$storemit('hospital/SET_ORGINHOSPITAL_LIST', res.hospital_list)}this.loading = false}) },getList() {// 只是折线图const params = { 'page': this.listQuery.page, 'hospital_id': this.selectValue, 'start_date': this.dateValue[0], 'end_date': this.dateValue[1] }fetchEcharts(params).then(res => {console.log(res)if (res.errcode === 0) {const arrx = []const arry = []const item = res.use_rate_listif (item.length > 0) {for (let i = 0; i < item.length; i++) {arrx.push(item[i].day)arry.push(parseFloat(item[i].use_rate) * 100)}this.axiasx = arrxthis.axiasy = arrythis.emptyShow = false} else {console.log('我是没有数据的显示')this.noneTitle = '抱歉！您选择的医院在本时间段并没有数据~'this.emptyShow = true}}})console.log(this.dateValue)// 筛选的日期},handleFilter() {if (!this.selectValue) {Message({message: '请选择需要查看的医院！',type: 'error',duration: 2 * 1000})return} else if (!this.dateValue) {Message({message: '请选择需要查看的时间段！',type: 'error',duration: 2 * 1000})return}this.getList()}}
}
</script>

最终经过筛选条件出来后，显示如下：

有数据时显示

没有数据时显示

最后，不要问我为什么不直接调用init函数，因为重新渲染dom节点是需要付出代价的！！！！