您的位置：首页 > 健康 > 养生 > Echarts - 多个页面内有N个 echarts 图表，封装组件 CommonEcharts 快捷实现

Echarts - 多个页面内有N个 echarts 图表，封装组件 CommonEcharts 快捷实现

2024/12/25 8:40:50 来源：https://blog.csdn.net/m0_53562074/article/details/139167581  浏览:  次   关键词：Echarts - 多个页面内有N个 echarts 图表，封装组件 CommonEcharts 快捷实现

目录

  • 子组件
  • 父组件使用
    • 注意
  • option 文件
  • 效果展示
  • 相关数据处理（代码备份 - 可不看）
    • 数据处理后页面展示

子组件

CommonEcharts.vue

<template><div><div v-for="id in domId" :id="id" :key="id" class="echarts" /></div>
</template><script>
export default {name: 'CommonEcharts',components: {},props: {info: {type: Object,required: true},domId: {type: Array,required: true},optionsObj: {type: Object,required: true}},data() {return {EchartsObj: {}}},computed: {},watch: {info() {this.init()}},mounted() {window.addEventListener('resize', () => {this.domId.forEach((id) => {if (document.getElementById(id)) {this.EchartsObj[id] = this.$echarts.init(document.getElementById(id))this.EchartsObj[id].resize()}})})this.init()},created() {},methods: {init() {this.domId.forEach((id) => {if (this.EchartsObj[id]) {this.EchartsObj[id].dispose()}const dom = document.getElementById(id)if (!dom) returnthis.EchartsObj[id] = this.$echarts.init(dom)this.EchartsObj[id].setOption(this.optionsObj[id])})}}
}
</script><style lang='scss' scoped>
.echarts {height: 400px;
}
</style>

父组件使用

<template><CommonEcharts :info="info" :dom-id="domId" :options-obj="optionsObj" />
</template><script>
import { lineEcharts, scatterEcharts, barEcharts } from './echarts-options'
import CommonEcharts from './CommonEcharts.vue'export default {name: 'JdcTimeEcharts',components: {CommonEcharts},props: {info: {type: Object,required: true}},data() {return {domId: ['JdcTimeEcharts1', 'JdcTimeEcharts2', 'JdcTimeEcharts3']}},computed: {optionsObj() {return {JdcTimeEcharts1: lineEcharts(),JdcTimeEcharts2: scatterEcharts(),JdcTimeEcharts3: barEcharts()}}}
}
</script><style lang='scss' scoped>
</style>

注意

  • domId 中数据 要与 optionsObj 中数据一一对应

option 文件

echarts-options.js

import * as Echarts from 'echarts'// 折线图 - 参考示例 https://www.makeapie.cn/echarts_content/xS9Oh_JY06.html
export function lineEcharts() {return {backgroundColor: '#080b30',title: {text: '多线图',textStyle: {align: 'center',color: '#fff',fontSize: 20},top: '5%',left: 'center'},tooltip: {trigger: 'axis',axisPointer: {lineStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(0, 255, 233,0)'},{offset: 0.5,color: 'rgba(255, 255, 255,1)'},{offset: 1,color: 'rgba(0, 255, 233,0)'}],global: false}}}},grid: {top: '15%',left: '5%',right: '5%',bottom: '15%'// containLabel: true},xAxis: [{type: 'category',axisLine: {show: true},splitArea: {// show: true,color: '#f00',lineStyle: {color: '#f00'}},axisLabel: {color: '#fff'},splitLine: {show: false},boundaryGap: false,data: ['A', 'B', 'C', 'D', 'E', 'F']}],yAxis: [{type: 'value',min: 0,// max: 140,splitNumber: 4,splitLine: {show: true,lineStyle: {color: 'rgba(255,255,255,0.1)'}},axisLine: {show: false},axisLabel: {show: false,margin: 20,textStyle: {color: '#d1e6eb'}},axisTick: {show: false}}],series: [{name: '注册总量',type: 'line',smooth: true, // 是否平滑showAllSymbol: true,// symbol: 'image://./static/images/guang-circle.png',symbol: 'circle',symbolSize: 15,lineStyle: {normal: {color: '#00b3f4',shadowColor: 'rgba(0, 0, 0, .3)',shadowBlur: 0,shadowOffsetY: 5,shadowOffsetX: 5}},label: {show: true,position: 'top',textStyle: {color: '#00b3f4'}},itemStyle: {color: '#00b3f4',borderColor: '#fff',borderWidth: 3,shadowColor: 'rgba(0, 0, 0, .3)',shadowBlur: 0,shadowOffsetY: 2,shadowOffsetX: 2},tooltip: {show: false},areaStyle: {normal: {color: new Echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: 'rgba(0,179,244,0.3)'},{offset: 1,color: 'rgba(0,179,244,0)'}],false),shadowColor: 'rgba(0,179,244, 0.9)',shadowBlur: 20}},data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02]},{name: '注册总量',type: 'line',smooth: true, //是否平滑showAllSymbol: true,// symbol: 'image://./static/images/guang-circle.png',symbol: 'circle',symbolSize: 15,lineStyle: {normal: {color: '#00ca95',shadowColor: 'rgba(0, 0, 0, .3)',shadowBlur: 0,shadowOffsetY: 5,shadowOffsetX: 5}},label: {show: true,position: 'top',textStyle: {color: '#00ca95'}},itemStyle: {color: '#00ca95',borderColor: '#fff',borderWidth: 3,shadowColor: 'rgba(0, 0, 0, .3)',shadowBlur: 0,shadowOffsetY: 2,shadowOffsetX: 2},tooltip: {show: false},areaStyle: {normal: {color: new Echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: 'rgba(0,202,149,0.3)'},{offset: 1,color: 'rgba(0,202,149,0)'}],false),shadowColor: 'rgba(0,202,149, 0.9)',shadowBlur: 20}},data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14]}]}
}
// 散点图 - 参考示例 https://www.makeapie.cn/echarts_content/xZvv5T7_R6.html
export function scatterEcharts() {return {tooltip: {position: 'top'},legend: {left: 'center'},title: [],xAxis: {name: '公开年份',nameLocation: 'center',nameGap: 30,type: 'category',data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021'],boundaryGap: false,splitLine: {show: false},axisLine: {show: false}},yAxis: {name: 'IPC分类号',nameLocation: 'center',nameGap: 50,type: 'category',data: ['G06F', 'G06Q', 'G10L', 'G06K', 'H04L', 'G16H', 'G05B', 'G08C', 'H04N', 'H04M'],axisLabel: {margin: 20},splitLine: {show: true,lineStyle: {type: 'dashed'}},axisLine: {show: false}},series: [{name: 'G06F',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 0, 444],[1, 0, 699],[2, 0, 951],[3, 0, 1126],[4, 0, 1347],[5, 0, 1993],[6, 0, 3096],[7, 0, 5196],[8, 0, 1750],[9, 0, 222]],animationDelay: (idx) => {return idx * 5}},{name: 'G06Q',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 1, 484],[1, 1, 239],[2, 1, 351],[3, 1, 126],[4, 1, 347],[5, 1, 993],[6, 1, 2096],[7, 1, 5196],[8, 1, 1750],[9, 1, 222]],animationDelay: (idx) => {return idx * 5}},{name: 'G10L',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 2, 44],[1, 2, 69],[2, 2, 1951],[3, 2, 116],[4, 2, 147],[5, 2, 993],[6, 2, 3096],[7, 2, 596],[8, 0, 1750],[9, 2, 222]],animationDelay: (idx) => {return idx * 5}},{name: 'G06K',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 3, 1444],[1, 3, 1699],[2, 3, 1951],[3, 3, 1126],[4, 3, 147],[5, 3, 1993],[6, 3, 396],[7, 3, 5196],[8, 3, 150],[9, 3, 2212]],animationDelay: (idx) => {return idx * 5}},{name: 'H04L',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 4, 444],[1, 4, 699],[2, 4, 951],[3, 4, 1126],[4, 4, 1347],[5, 4, 1993],[6, 4, 3096],[7, 4, 5196],[8, 4, 1750],[9, 4, 222]],animationDelay: (idx) => {return idx * 5}},{name: 'G16H',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 5, 444],[1, 5, 699],[2, 5, 951],[3, 5, 1126],[4, 5, 1347],[5, 5, 1993],[6, 5, 3096],[7, 5, 5196],[8, 5, 1750],[9, 5, 222]],animationDelay: (idx) => {return idx * 5}},{name: 'G05B',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 6, 444],[1, 6, 699],[2, 6, 951],[3, 6, 1126],[4, 6, 1347],[5, 6, 1993],[6, 6, 3096],[7, 6, 5196],[8, 6, 1750],[9, 6, 222]],animationDelay: (idx) => {return idx * 5}},{name: 'G08C',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 7, 444],[1, 7, 699],[2, 7, 951],[3, 7, 1126],[4, 7, 1347],[5, 7, 1993],[6, 7, 3096],[7, 7, 5196],[8, 7, 1750],[9, 7, 222]],animationDelay: (idx) => {return idx * 5}},{name: 'H04N',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 8, 444],[1, 8, 699],[2, 8, 951],[3, 8, 1126],[4, 8, 1347],[5, 8, 1993],[6, 8, 3096],[7, 8, 5196],[8, 8, 1750],[9, 8, 222]],animationDelay: (idx) => {return idx * 5}},{name: 'H04M',type: 'scatter',symbolSize: (val) => {return val[2] % 40},data: [[0, 9, 444],[1, 9, 699],[2, 9, 951],[3, 9, 1126],[4, 9, 1347],[5, 9, 1993],[6, 9, 3096],[7, 9, 5196],[8, 9, 1750],[9, 9, 222]],animationDelay: (idx) => {return idx * 5}}]}
}
// 柱状图 - 参考示例 https://www.makeapie.cn/echarts_content/xQWEnqAtdc.html
export function barEcharts() {return {backgroundColor: '#001120',tooltip: {trigger: 'axis',axisPointer: {// 坐标轴指示器，坐标轴触发有效type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'}},legend: {data: ['邮件营销', '联盟广告'],textStyle: {color: 'rgba(55,255,249,1)'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],splitLine: {show: false},axisLine: {lineStyle: {color: 'rgba(55,255,249,1)'}},axisLabel: {color: 'rgba(55,255,249,1)'}}],yAxis: [{type: 'value',splitLine: {show: false},axisLine: {lineStyle: {color: 'rgba(55,255,249,1)'}}}],series: [{name: '邮件营销',type: 'bar',barWidth: 20,itemStyle: {barBorderRadius: 20,color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(55,255,249,1)'},{offset: 1,color: 'rgba(0,222,215,0.2)'}])},data: [120, 132, 101, 134, 90, 230, 210]},{// 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20type: 'bar',barWidth: 20,barGap: '-100%',stack: '广告',itemStyle: {color: 'transparent'},data: [100, 102, 81, 114, 70, 210, 190]},{name: '联盟广告',type: 'bar',barWidth: 20,barGap: '-100%',stack: '广告',itemStyle: {barBorderRadius: 20,color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0.4,color: 'rgba(255,252,0,1)'},{offset: 1,color: 'rgba(8,228,222,0.2)'}])},data: [220, 182, 191, 234, 290, 330, 310]}]}
}

效果展示

在这里插入图片描述

相关数据处理（代码备份 - 可不看）

/**** echarts 折线图、散点图 - 数据处理 ****/// 数据源
const info = {itemMap: {警告: [{total: 28,cfzl: '1',cfzlView: '警告',wfxl: '12',wfxlView: '超速行驶',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 3,cfzl: '1',cfzlView: '警告',wfxl: '17',wfxlView: '未低速通过',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 6,cfzl: '1',cfzlView: '警告',wfxl: '26',wfxlView: '违法停车',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 21,cfzl: '1',cfzlView: '警告',wfxl: '28',wfxlView: '违法装载',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 3,cfzl: '1',cfzlView: '警告',wfxl: '49',wfxlView: '其他影响安全行为',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 1,cfzl: '1',cfzlView: '警告',wfxl: '28',wfxlView: '违法装载',jtfs: 'B21',jtfsView: '中型栏板半挂车'}],罚款: [{total: 56,cfzl: '2',cfzlView: '罚款',wfxl: '12',wfxlView: '超速行驶',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 6,cfzl: '2',cfzlView: '罚款',wfxl: '17',wfxlView: '未低速通过',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 12,cfzl: '2',cfzlView: '罚款',wfxl: '26',wfxlView: '违法停车',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 42,cfzl: '2',cfzlView: '罚款',wfxl: '28',wfxlView: '违法装载',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 6,cfzl: '2',cfzlView: '罚款',wfxl: '49',wfxlView: '其他影响安全行为',jtfs: 'B11',jtfsView: '重型栏板半挂车'},{total: 2,cfzl: '2',cfzlView: '罚款',wfxl: '28',wfxlView: '违法装载',jtfs: 'B21',jtfsView: '中型栏板半挂车'}]},columns: [{ jtfs: 'B11', jtfsView: '重型栏板半挂车' },{ jtfs: 'B21', jtfsView: '中型栏板半挂车' }]
}// 处理代码
function optionsObj() {const xAxisData = []const yAxisData = []this.info?.columns?.forEach((item) => {!xAxisData.includes(item.jtfsView) && xAxisData.push(item.jtfsView)})const seriesNameList = Object.keys(this.info?.itemMap)const seriesList1 = []const seriesList2 = []seriesNameList.forEach((seriesName) => {const data1 = []this.info?.itemMap[seriesName].forEach((i) => {const xIndex = xAxisData.findIndex((xItem) => xItem === i.jtfsView)const yIndex = yAxisData.findIndex((yItem) => yItem === i.wfxlView)if (!yAxisData.includes(i.wfxlView)) {yAxisData.push(i.wfxlView)seriesList2.push({name: i.wfxlView,data: [[xIndex, seriesList2.length, i.total]]})} else {const seriesList2Index = seriesList2.findIndex((seriesList2Item) => seriesList2Item.name === i.wfxlView)const seriesDataIndex = seriesList2[seriesList2Index].data.findIndex((dataItem) => dataItem[0] === xIndex && dataItem[1] === yIndex)if (seriesDataIndex !== -1) {seriesList2[seriesList2Index].data[seriesDataIndex] = [xIndex,yIndex,i.total + seriesList2[seriesList2Index].data[seriesDataIndex][2]]} else {seriesList2[seriesList2Index].data.push([xIndex, yIndex, i.total])}}data1[xIndex] = (data1[xIndex] || 0) + (i.total || 0)})seriesList1.push({name: seriesName,data: data1})})console.log('xAxisData----', xAxisData)console.log('yAxisData----', yAxisData)console.log('seriesList1----', seriesList1)console.log('seriesList2----', seriesList2)return {// 折线图JdcTimeEcharts1: lineEcharts({xAxisData,seriesList: seriesList1}),// 散点图JdcTimeEcharts2: scatterEcharts({xAxisName: '车辆类型',xAxisData,yAxisData,seriesList: seriesList2})}
}// 处理结果
const xAxisData = ['重型栏板半挂车', '中型栏板半挂车']
const yAxisData = ['超速行驶', '未低速通过', '违法停车', '违法装载', '其他影响安全行为']
const seriesList1 = [{name: '警告',data: [61, 1]},{name: '罚款',data: [122, 2]}
]
const seriesList2 = [{name: '超速行驶',data: [[0, 0, 84]]},{name: '未低速通过',data: [[0, 1, 9]]},{name: '违法停车',data: [[0, 2, 18]]},{name: '违法装载',data: [[0, 3, 63], [1, 3, 3]]},{name: '其他影响安全行为',data: [[0, 4, 9]]}
]/**** echarts图表option配置项 ****/
// import * as Echarts from 'echarts'// 折线图
function lineEcharts({ xAxisData = [], seriesList = [] }) {const colorList = ['#00b3f4','#00ca95','#fce07e','#f18585','#8fcde5','#62b58e','#fd9d75','#ae80c3']const defaultColor = '#ee96d6'return {backgroundColor: '#080b30',title: {show: !xAxisData.length && !seriesList.length,text: '暂无数据',left: 'center',top: 'center',textStyle: {color: '#fff'}},tooltip: {trigger: 'axis',axisPointer: {lineStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(0, 255, 233,0)'},{offset: 0.5,color: 'rgba(255, 255, 255,1)'},{offset: 1,color: 'rgba(0, 255, 233,0)'}],global: false}}}},grid: {top: '15%',left: '5%',right: '5%',bottom: '15%'// containLabel: true},xAxis: [{type: 'category',axisLine: {show: true},splitArea: {// show: true,color: '#f00',lineStyle: {color: '#f00'}},axisLabel: {color: '#fff'},splitLine: {show: false},boundaryGap: false,// data: ['A', 'B', 'C', 'D', 'E', 'F']data: xAxisData}],yAxis: [{type: 'value',min: 0,// max: 140,splitNumber: 4,splitLine: {show: true,lineStyle: {color: 'rgba(255,255,255,0.1)'}},axisLine: {show: false},axisLabel: {show: false,margin: 20,textStyle: {color: '#d1e6eb'}},axisTick: {show: false}}],series: seriesList.map((item, index) => {return {name: item.name,type: 'line',smooth: true,showAllSymbol: true,symbol: 'circle',symbolSize: 15,lineStyle: {normal: {color: colorList[index] || defaultColor,shadowColor: 'rgba(0, 0, 0, .3)',shadowBlur: 0,shadowOffsetY: 5,shadowOffsetX: 5}},label: {show: true,position: 'top',textStyle: {color: colorList[index] || defaultColor}},itemStyle: {color: colorList[index] || defaultColor,borderColor: '#fff',borderWidth: 3,shadowColor: 'rgba(0, 0, 0, .3)',shadowBlur: 0,shadowOffsetY: 2,shadowOffsetX: 2},areaStyle: {normal: {color: new Echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: (colorList[index] || defaultColor) + '4d' // 30%},{offset: 1,color: (colorList[index] || defaultColor) + '00' // 0%}],false),shadowColor: (colorList[index] || defaultColor) + 'e6', // 90%shadowBlur: 20}},// data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02]data: item.data}})}
}
// 散点图
function scatterEcharts({ xAxisName = '', xAxisData = [], yAxisData = [], seriesList = [] }) {return {title: {show: !xAxisData.length && !yAxisData.length && !seriesList.length,text: '暂无数据',left: 'center',top: 'center',textStyle: {color: '#fff'}},tooltip: {position: 'top',formatter: function(params) {return (yAxisData[params.value[1]] +'<br />' +params.marker +xAxisData[params.value[0]] +'：' +params.value[2])}},legend: {show: false,left: 'center'},xAxis: {name: xAxisName,nameLocation: 'center',nameGap: 30,type: 'category',boundaryGap: false,splitLine: {show: false},axisLine: {show: false},// data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021'],data: xAxisData},yAxis: {name: '',nameLocation: 'center',nameGap: 50,type: 'category',axisLabel: {margin: 20},splitLine: {show: true,lineStyle: {type: 'dashed'}},axisLine: {show: false},// data: ['G06F', 'G06Q', 'G10L', 'G06K', 'H04L', 'G16H', 'G05B', 'G08C', 'H04N', 'H04M'],data: yAxisData},series: seriesList.map((item) => {return {name: item.name,type: 'scatter',symbolSize: (val) => {return val[2] % 40},animationDelay: (idx) => {return idx * 5},// data: [//   [0, 0, 444],//   [1, 0, 699],//   [2, 0, 951],//   [3, 0, 1126],//   [4, 0, 1347],//   [5, 0, 1993],//   [6, 0, 3096],//   [7, 0, 5196],//   [8, 0, 1750],//   [9, 0, 222]// ],data: item.data}})}
}

数据处理后页面展示

在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

最新新闻

热搜词

合同比对：如何确保纸质与电子合同条款一致性？ 为什么大家越来越重视大数据的发展？ Pytorch分布式训练 iPhone获取设备UDID，安装测试包 PHP 自学全套书籍推荐 润滑油代理商合同范本：详细指导与实践指南

声明：本站所有新闻及新闻图片来源于其他网站，如有侵权，请及时联系我们！

客户服务 | 关于我们 | 版权声明

版权所有：

Copyright 2024 尧图网 All Rights Reserved.QQ:809451989