当前位置： 首页 > news >正文

echarts模板化开发，简易版配置大屏组件-根据配置文件输出图形和模板（vue2+echarts5.0）

news 来源：原创 2025/4/23 8:27:52

实现结果
在这里插入图片描述
项目结构
在这里插入图片描述
根据我的目录和代码 复制到项目中

echartsTemplate-echarts图形

pie实例

<template><div :id="echartsId"></div>
</template>
<script>
export default {name: '',components: {},mixins: [],props: ['echartsId', 'echartsJsonData'],data() {return {};},computed: {},watch: {echartsJsonData: {handler(to) {// console.log(to, 'to');if (to) {let _this = this;this.$nextTick(() => {_this.getEcharts();});}},immediate: true,},},mounted() {},methods: {getEcharts() {const pieCharts = this.$echarts.init(document.querySelector('#' + this.echartsId));let chartData = [95.65, 96.15, 96.82, 97.45, 97.85, 99.23, 99.79, 100.77, 100.03,101.75, 101.42, 101.54, 101.24, 102.65, 103.08, 103.22, 102.87,101.86, 101.3, 100.04, 101.08, 98.58, 98.42, 99, 98.94, 99.21,99.29, 100.2, 100.41, 100.26, 101.88, 103.26, 105.1, 109.39,108.48, 108.71, 108.18, 109.15, 109.6, 106.76, 107.35, 106.77,105.99, 105.48, 104.52, 104.25, 104.94, 103.35, 103.55,];const xData = Array.from({ length: chartData.length },(_, index) => index);let options = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',},},grid: {top: 10,left: 10,bottom: 10,right: 10,containLabel: true,},xAxis: {type: 'category',data: xData,},yAxis: {scale: true,},series: [{symbolSize: 10,data: xData.map((x, i) => [x, chartData[i]]),type: 'scatter',},],};// 渲染 echartspieCharts.setOption(options, true);pieCharts.resize();},},
};
</script>
<style lang="" scoped></style>

dataHandle.js-数据处理方法

export const handleSlpmle = (data) => {// console.log(data);return data;
};

echartsGet.vue-模板调用，图形模板根据配置文件调用

<template><div><!-- 如果echartsJsonSet useFlag等于true的话那就是省份的特殊样式--><divv-if="echartsJsonSet"style="position: relative":style="{height: echartsJsonSet.height,width: echartsJsonSet.width,}"id="combatTable":class="echartsJsonSet.useFlag? `${echartsJsonSet.tempId} ${echartsJsonSet.tempId}_${echartsJsonSet.value}`: `${echartsJsonSet.tempId}`"><!-- 使用 component 标签配合 is 属性 --><div v-if="echartsJsonSet"><componentv-for="(item, index) in echartsJsonSet.echartsList":key="index":is="item.type":echartsId="item.tempName":echartsJsonData="item":style="{width: item.width,height: item.height,}":class="`${item.tempName} echartsList`"></component></div></div></div>
</template>
<script>
import pie from './echartsTemplate/pie.vue';
import areaEcharts from './echartsTemplate/areaEcharts.vue';
import bar from './echartsTemplate/bar.vue';
import lineBar from './echartsTemplate/lineBar.vue';
import lineEcharts from './echartsTemplate/lineEcharts.vue';
import mapEcharts from './echartsTemplate/mapEcharts.vue';
import radar from './echartsTemplate/radar.vue';
import stacked from './echartsTemplate/stacked.vue';
import trabecula from './echartsTemplate/trabecula.vue';
export default {name: '',components: {pie,areaEcharts,bar,lineBar,lineEcharts,mapEcharts,radar,stacked,trabecula,},mixins: [],// 'echartsJson'标准模板，默认值 'areaEchartsJson'地区模板，如果某个地区的某个图需要特殊方式显示props: ['echartsJson'],data() {return { echartsJsonSet: null };},computed: {},watch: {echartsJson: {handler(to) {if (to) {console.log(to, 'ttotooto');this.echartsJsonSet = to;}},immediate: true,},},mounted() {},methods: {},
};
</script>
<style lang="" scoped></style>

echartsTempCss.less模板css，根据规则生成的class名

.G000 {background: rgba(175, 199, 223);.echartsList {position: absolute;}.G00001 {top: 10px;left: 10px;}.G00002 {top:201px;left: 10px;}.G00003 {top: 10px;left: 267.5px;}.G00004 {top: 392px;left: 10px;border: 1px solid rgb(245, 246, 247);}.G00005 {top: 392px;left: 267.5px;border: 1px solid rgb(245, 246, 247);}.G00006 {top: 392px;left: 525px;border: 1px solid rgb(245, 246, 247);}.G00007 {top: 10px;left: 782.5px;border: 1px solid rgb(245, 246, 247);}.G00008 {top:201px;left: 782.5px;border: 1px solid rgb(245, 246, 247);}.G00009 {top: 392px;left: 782.5px;border: 1px solid rgb(245, 246, 247);}
}

functionEcharts.vue-操作按钮

<template><div><div class="block"><span class="demonstration">月</span><el-date-pickerv-model="timeValue"type="month"placeholder="选择月"></el-date-picker></div><el-select v-model="selectValue" placeholder="请选择"><el-optionv-for="item in option":key="item.value":label="item.label":value="item.value"></el-option></el-select><el-button @click="query">查询</el-button><!-- <div @click="generateAndDownloadReport">下载</div> --></div>
</template>
<script>
import html2canvas from 'html2canvas';
import provinceSetting from './provinceSetting.json';
export default {name: '',components: {},mixins: [],props: {},data() {return {selectValue: '100000',timeValue: '2024-06',option: provinceSetting,};},computed: {},watch: {},mounted() {},methods: {query() {this.$eventBus.$emit('realDatas', {time: this.formatDate(this.timeValue),province: this.selectValue,});},formatDate(dateString) {try {const date = new Date(dateString);return [date.getFullYear(),(date.getMonth() + 1).toString().padStart(2, '0'),].join('');} catch (e) {return '格式错误';}},generateAndDownloadReport() {try {const targetElement = document.getElementById('combatContent');html2canvas(targetElement, {scale: 1, // 提高分辨率backgroundColor: '#ffffff', // 背景色（可自定义）useCORS: true, // 如果有加载图片或图标}).then((canvas) => {// 生成图片链接const link = document.createElement('a');link.download = 'combat-report.png';link.href = canvas.toDataURL('image/png', 0.0);// 下载图片document.body.appendChild(link);link.click();document.body.removeChild(link);});} catch (error) {console.error('生成报告失败:', error);alert('下载失败：' + error.message);}},},
};
</script>
<style lang="" scoped></style>

index.vue-入口页面

<template><div style="padding: 10px"><paramEcharts v-if="functionFlag"></paramEcharts><echartsGet id="combatContent" :echartsJson="echartsJson"></echartsGet></div>
</template>
<script>
import echartsTempJson from './temp.json';
import provinceSetting from './provinceSetting.json';
import paramEcharts from './functionEcharts.vue';
import echartsGet from './echartsGet.vue';
import { handleSlpmle } from './dataHandle.js';export default {name: '',components: { echartsGet, paramEcharts },mixins: [],props: {},data() {return {functionFlag: true,echartsJson: null,// echartsTempJson: null,time: '202406',province: '100000',echartsListData: {},};},computed: {},watch: {},mounted() {if (this.$route.query.province) {//根据省份信息去查provinceSetting配置信息，然后根据里面的模板id去查temp公共模板配置this.functionFlag = false;//如果传了模板id就不显示参数按钮//在后台调用echarts模板时 需要时间，省份之类的参数，前端参数按钮也需要//应该从省份区模板才对// this.echartsTempJson = echartsTempJson[graphId];this.getEchartsData('202406', this.$route.query.province);} else {this.functionFlag = true;// this.time = '2024';// this.province = '100000';this.getEchartsData('202406', '100000'); //默认}let _this = this;this.$eventBus.$on('realDatas', function (res) {// console.log(res);// _this.areaEchartsJson = res.alldata;_this.getEchartsData(res.time, res.province);});},methods: {//根据传来的tiem和province去查询接口getEchartsData(time, province) {//调用接口传数据this.echartsListData = {};this.echartsListData = {G0001_G000001: [{ name: 1111, value: 2222 },{ name: 1111, value: 2222 },{ name: 1111, value: 2222 },{ name: 2222, value: 2222 },{ name: 2222, value: 2222 },],G0001_G000002: [{ name: 4444, value: 3333 },{ name: 4444, value: 3333 },{ name: 4444, value: 3333 },{ name: 3333, value: 3333 },{ name: 3333, value: 3333 },{ name: 3333, value: 3333 },],};let tempC = {};//第一层循环，循环地区的模板for (let index = 0; index < provinceSetting.length; index++) {// debugger;if (province == provinceSetting[index].value) {} else {continue;}const elementProvince = provinceSetting[index];//循环公共模板for (const key in echartsTempJson) {//如果地区模板的key和公共模板的key相同，调用公共模板if (elementProvince.tempId == key) {tempC = echartsTempJson[key];tempC.value = elementProvince.value;if (elementProvince.useFlag) {//如果要使用地区模板特殊样式，生成地区特殊的模板csstempC.useFlag = true; //使用特殊css显示模板}//循环地区模板的echartsListfor (let index = 0;index < elementProvince.echartsList.length;index++) {const elementEchartsList =elementProvince.echartsList[index];//如果地区模板中需要使用地区的特殊样式if (elementEchartsList.useFlag) {//循环上面赋值的公共模板暂存for (let j = 0;j < tempC.echartsList.length;j++) {const elementTempCEchartsList =tempC.echartsList[j];//判断公共模板中相同的tempNameif (elementEchartsList.tempName ==elementTempCEchartsList.tempName) {//赋值到当前tempC.echartsList[j] =elementEchartsList;}}} else {continue;}}}}}for (const key in this.echartsListData) {for (let index = 0; index < tempC.echartsList.length; index++) {const elements = tempC.echartsList[index];if (elements.tempName == key.split('_')[1]) {let thisData = tempC.useFunction? [tempC.useFunction](res.data[key]): handleSlpmle(res.data[key]);tempC.echartsList[index].optionData = thisData;}}}this.echartsJson = tempC;console.log(tempC, 'tempC');},},
};
</script>
<style lang="less">
@import './echartsTempCss.less';
</style>

provinceSetting.json-根据省份分别显示模板（强化公共模板）

[{"value": "100000","label": "全国","realValue": ["100000"],"tempId": "G000","useFlag": true,"echartsList": [{"useFlag": false,"tempName": "G00001","type": "pie","width": "300px","height": "400px"},{ "tempName": "G00002", "type": "pie" },{ "tempName": "G00003", "type": "pie" },{ "tempName": "G00004", "type": "pie" },{ "tempName": "G00005", "type": "pie" },{ "tempName": "G00006", "type": "pie" },{ "tempName": "G00007", "type": "pie" },{ "tempName": "G00008", "type": "pie" },{ "tempName": "G00009", "type": "pie" }]},{"value": "100001","label": "中部地区","tempId": "G0003","realValue": ["140000","340000","360000","410000","420000","430000"],"echartsList": [{"useFlag": false,"tempName": "G000301"}]}
]

temp.json-公共模板

{"G000": {"name": "全国指标速览","show": true,"tempId": "G000","width": "1030px","height": "575px","echartsList": [{"tempName": "G00001","type": "pie","width": "237.5px","height": "171px","useFunction": "handleSlpmle"},{"tempName": "G00002","type": "radar","width": "237.5px","height": "171px"},{"tempName": "G00003","type": "map","width": "515px","height": "382px"},{"tempName": "G00004","type": "area","width": "237.5px","height": "171px"},{"tempName": "G00005","type": "lineEcharts","width": "237.5px","height": "171px"},{"tempName": "G00006","type": "bar","width": "237.5px","height": "171px"},{"tempName": "G00007","type": "bar","width": "237.5px","height": "171px"},{"tempName": "G00008","type": "trabecula","width": "237.5px","height": "171px"},{"tempName": "G00009","type": "lineEcharts","width": "237.5px","height": "171px"}]},"G0003": {"name": "省份","show": true,"tempId": "G0003","width": "1030px","height": "575px","echartsList": [{"tempName": "G000301","type": "map","width": "237.5px","height": "171px"}]}
}

项目中用到的ecentbus–https://blog.csdn.net/Shi_haoliu/article/details/146340424?spm=1001.2014.3001.5501

相关文章：

  • Vue 3 Watch 监听 Props 的踩坑记录
  • Git常用操作命令
  • Qt 下载的地址集合
  • 【Maven】配置文件
  • audio 核心服务AudioPolicyService 和AudioFlinger启动流程
  • jsconfig.json文件的作用
  • 【SAP-CO】生产的成本流转和成本分析
  • Spark-Streaming
  • 【深度学习新浪潮】新视角生成的研究进展调研报告（2025年4月）
  • 软件测试之接口测试常见面试
  • 第48讲：空间大数据与智慧农业——时空大数据分析与农业物联网的融合实践
  • ecovadis评级范围，如何拿到ecovadis评级高分
  • 局域网内，将linux（Ubuntu）的硬盘映射成Windows上，像本地磁盘一样使用
  • 健康生活新指南
  • ESM 内功心法：化解 require 中的夺命一击！
  • Spring 中 @Component, @Repository, @Service 的区别及示例代码
  • 学习Docker遇到的问题
  • 广州市白云区粤荣职业培训学校副校长余智强获聘广州培训质量督导员
  • 高性能数据库集群：分库分表
  • LeetCode 热题 100_分割等和子集（89_416_中等_C++）(动态规划)
  • 山东省检察院答澎湃：惩治网络售假，强化“全链条”刑事打击
  • 富力地产：广州富力空港假日酒店第一次拍卖流拍，起拍价约2.77亿元
  • 神二十航天员公布
  • 具身智能资本盛宴：3个月37笔融资，北上深争锋BAT下场，人形机器人最火
  • 海南公布知识产权保护典型案例，一企业违规申请注册“中华”商标被处罚
  • 美学术界发起集体抗议，百余高校联署声明抵制政府干预