vue-echart简单使用

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 = titleTextthis.echartOption.xAxis.data = this.formatYMD2Str(this.dateList)this.echartOption.series = []let orderCount = []let rightCount = []let notRightCount = []let orderMoney = []this.freezerIdsswitch (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))})breakcase '订单总数':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))})breakcase '生效订单总数':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))})breakcase '不生效订单总数':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))})breakdefault: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 = 0if (one) {switch (ty) {case '订单总收入':setp = one[0].orderMoneybreakcase '订单总数':setp = one[0].orderCountbreakcase '生效订单总数':setp = one[0].rightCountbreakcase '不生效订单总数':setp = one[0].notRightCountbreakdefault:console.log(ty)setp = 0break}}showList.push(setp)})},},
})

5.几个注意点

5.1：[UPDATE_OPTIONS_KEY]: {notMerge:true}, // 解决数据合并问题

5.2：vue-echart的画布关联数据（如例：this.echartOption），直接修改里面的数据可以直接在画布中看到变化

*.特别注意

1.有很多前端代码的理解可能不太对，因为不是专业的前端开发，只是恰好要捣鼓一下前端的表现

2.写这个是因为vue-echart还比较少的文档，查个新旧数据不合并的资料都比较困难，就把解决了的方案说一下，仅供参考

vue-echart简单使用相关推荐

用Vue实现简单的echarts在线编辑器
用Vue实现简单的echarts在线编辑器简述思路效果图页面分布 main.js的配置其中ace编辑器的配置按钮功能实现思路具体实现图表初始化图表组件传给父组件option配置对象 ...
用php做一个简单的汇率,vue实现简单实时汇率计算功能
最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快.刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着 ...
react构建淘票票webapp，及react与vue的简单比较。
前言前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...
前端app调起摄像头只显示在页面_猫也能看得懂的教程之一分钟使用Vue搭建简单Web页面...
本教程适合人群: 已经了解过过html.js.css,想深入学习前端技术的小伙伴有前端开发经验.但是没有使用过Vue的小伙伴有过其他编程经验,对前端开发感兴趣的小伙伴学习本教程之后你将会: 了解 ...
基于vue-cli、elementUI的Vue超简单入门小例子
基于vue-cli.elementUI的Vue超简单入门小例子这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. 开始写例子之前,先对环境的部署做点简单 ...
Vue + echart 实现中国地图和省市地图（可切换省份
vue + echart 实现中国地图和省市地图(可切换省份) - 伏沙金 - 博客园
01.vue的简单实例
前段框架vue.js非常热门,每个vue应用都是通过创建vue函数创建新的vue实例开始,首先我们来创建一个简单的vue实例多手动写写代码,你会发现真的很烦躁 <!DOCTYPE html&g ...
Vue实现简单图表~满满的干货
文章目录前提:安装数据报表的插件 Vue实现简单图表的步骤导入echarts 为ECharts准备一个具备大小(宽高)的Dom 基于准备好的dom,初始化echarts实例指定图表的配置项和数据 ...
从vue项目简单了解什么是SSR
从vue项目简单了解什么是SSR SSR 从0到1开始初始化项目 server.js SSR vue是单页应用,创建的项目不利于SEO爬虫,因为SEO爬虫是爬网页的源代码,而vue创建的项目是通过j ...
vue+echart图表数据切换
vue+echart图表数据切换前言一.效果图二.代码演示 1.准备阶段 2.HTML片段 3.js片段 4.css片段总结前言最近有个需求,同一个echart图表点击切换不同数据,花了点 ...

vue-echart简单使用

vue-echart简单使用相关推荐

最新文章

热门文章