1.解决以下几点问题
1.新数据和旧数据合并的问题(旧数据残留在画布上)
2.根据axios动态修改表现数据2.初始需求：根据不同的按钮，切换画布的数据表现
3.表现
4.代码实现
import { use } from 'echarts/core'; // 挂载组件方法
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart } from 'echarts/charts'; // 引入 柱状图类型
import {
// 相关组件
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent,
} from 'echarts/components';
// InjectionKey 引入
// THEME_KEY 主题关键字
// UPDATE_OPTIONS_KEY 刷新画布关键字
import VChart,{ THEME_KEY, UPDATE_OPTIONS_KEY } from 'vue-echarts';
// 挂载
use([
CanvasRenderer,
BarChart,
// LineChart,
TitleComponent,
TooltipComponent,
LegendComponent,
GridComponent,
]);
export default ({
mixins: [infoList], // 个人通用方法库
components: {
VChart, //
},
provide: {
[THEME_KEY]: 'while', // 白色主题
[UPDATE_OPTIONS_KEY]: {notMerge:true}, // 新旧数据不合并,需要使用object的形式传入
},
data(){
return {
echartOption: {
title: {
text: 'Traffic Sources',
left: 'center',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: [],
},
yAxis: [
{
type: 'value',
name: '数量',
min: 0,
interval: 1,
axisLabel: {
formatter: '{value}单'
}
},
{
type: 'value',
name: '金额',
min: 0,
interval: 50,
axisLabel: {
formatter: '￥{value}'
}
},
],
series: [],
}
}
},
//新获取一个EchartOption对象
getNewEchartOption() {
let EchartOption = {
series: [],
yAxis: [],
xAxis: {
type: 'category',
data: [],
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
title: {
text: 'Traffic Sources',
left: 'center',
},
}
return EchartOption
},
// 获取一个series数据
makeOneseries(name, func, data, yindex) {
let Oneseries = {
name: name,
type: 'bar',
yAxisIndex: yindex,
emphasis: {
focus: 'series'
},
tooltip: {
valueFormatter: func
},
data: data,
}
return Oneseries
},
// 提示数据的方法
makeDanFunc(value) {
return value + ' 单';
},
// 汇总数据
makeSumData(titleText) {
// console.log(this.fzSumReports)
if (!this.fzSumReports) { return } // 没有数据即刻返回
this.echartOption = this.getNewEchartOption() // 重新获取新的对象
this.echartOption.yAxis.push(this.makeDanYaxis(), this.makeYuanYaxis()) // 重构y坐标,数组位代表第n个y坐标
this.echartOption.title.text = titleText // 修改标题
let orderCount = []
let rightCount = []
let notRightCount = []
let orderMoney = []
this.fzSumReports.forEach((item) => {
orderCount.push(item.orderCount)
rightCount.push(item.rightCount)
notRightCount.push(item.notRightCount)
orderMoney.push(item.orderMoney)
})
this.echartOption.xAxis.data = this.formatYMD2Str(this.dateList) // 修改x坐标的值
this.echartOption.series = [] // 重新创建关键数据，其实直接修改值即可在画布呈现
this.echartOption.series.push(this.makeOneseries('总订单数', this.makeDanFunc, orderCount, 0)) // series数据，对标第一y轴
this.echartOption.series.push(this.makeOneseries('生效订单数', this.makeDanFunc, rightCount, 0))
this.echartOption.series.push(this.makeOneseries('失效订单数', this.makeDanFunc, notRightCount, 0))
this.echartOption.series.push(this.makeOneseries('金额', this.makeYuanFunc, orderMoney, 1)) // series数据，对标第二y轴
},
// 单一数据
makeDetialData(titleText) {
this.echartOption = this.getNewEchartOption()
this.echartOption.title.text = titleText
this.echartOption.xAxis.data = this.formatYMD2Str(this.dateList)
this.echartOption.series = []
let orderCount = []
let rightCount = []
let notRightCount = []
let orderMoney = []
this.freezerIds
switch (titleText) {
case '订单总收入':
this.echartOption.yAxis.push(this.makeYuanYaxis())
this.fzDetailReports.forEach(item1 => {
this.filterDateList(item1.reportList, titleText, orderMoney)
this.echartOption.series.push(this.makeOneseries(this.filterDict(item1.freezerId,'freezerName'), this.makeYuanFunc, orderMoney, 0))
})
break
case '订单总数':
this.echartOption.yAxis.push(this.makeDanYaxis())
this.fzDetailReports.forEach(item1 => {
this.filterDateList(item1.reportList, titleText, orderCount)
this.echartOption.series.push(this.makeOneseries(this.filterDict(item1.freezerId,'freezerName'), this.makeDanFunc, orderCount, 0))
})
break
case '生效订单总数':
this.echartOption.yAxis.push(this.makeDanYaxis())
this.fzDetailReports.forEach(item1 => {
this.filterDateList(item1.reportList, titleText, rightCount)
this.echartOption.series.push(this.makeOneseries(this.filterDict(item1.freezerId,'freezerName'), this.makeDanFunc, rightCount, 0))
})
break
case '不生效订单总数':
this.echartOption.yAxis.push(this.makeDanYaxis())
this.fzDetailReports.forEach(item1 => {
this.filterDateList(item1.reportList, titleText, notRightCount)
this.echartOption.series.push(this.makeOneseries(this.filterDict(item1.freezerId,'freezerName'), this.makeDanFunc, notRightCount, 0))
})
break
default:
console.log("not right")
break
}
console.log(this.echartOption.series)
},
filterDateList(useList, ty, showList) {
this.dateList.forEach(date => {
let one = useList.filter(function (item) {
if (item.dateKey == date) { return item }
})
let setp = 0
if (one) {
switch (ty) {
case '订单总收入':
setp = one[0].orderMoney
break
case '订单总数':
setp = one[0].orderCount
break
case '生效订单总数':
setp = one[0].rightCount
break
case '不生效订单总数':
setp = one[0].notRightCount
break
default:
console.log(ty)
setp = 0
break
}
}
showList.push(setp)
})
},
},
})5.几个注意点
5.1：[UPDATE_OPTIONS_KEY]: {notMerge:true}, // 解决数据合并问题
5.2：vue-echart的画布关联数据（如例：this.echartOption），直接修改里面的数据可以直接在画布中看到变化
*.特别注意
1.有很多前端代码的理解可能不太对，因为不是专业的前端开发，只是恰好要捣鼓一下前端的表现
2.写这个是因为vue-echart还比较少的文档，查个新旧数据不合并的资料都比较困难，就把解决了的方案说一下，仅供参考
更多推荐
vue-echart简单使用
发布评论