开源影视cms系统_设计师万能导航网站_苏州网站制作开发公司_seo优化信

需求：目前有俩个组数组分别为sss和aaa，sss和aaa有4个属性，分别为温度、湿度、气压和ppm，根据不同的属性每组画出4条折现，结果应该为8条折现，每条折现颜色不一致，名称也不一致，时间也不一致，通过额外设置的按钮去控制每组的显示和隐藏

1.效果

2.主要代码和讲解

数据源格式如下：

        weatherData: [{poi_code: 'sss',time: '2024-10-01 14:14:14',period_num: 230,airpressure: 1020.3,temperature: 30,humidity: 29,ppm: 7.13}],

2.1 封装一个折线图

折线图上的数据示例我都有标注，只需要传一样的数据就可以实现了

<template><!-- 折线图 --><div :id="id" class="main" style="width: 100%; height: 100%"></div>
</template><script>
import * as echarts from 'echarts';
export default {props: ['sendOption', 'id'],mounted() {window.setTimeout(() => {this.play_echarts();}, 1000);},watch: {sendOption: {deep: true,handler() {this.play_echarts();}}},data() {return {myChart: null};},methods: {play_echarts() {let that = this;that.$nextTick((_) => {if (//判断是否存在echarts实例化对象,如果存在则销毁that.myChart != null &&that.myChart != '' &&that.myChart != undefined) {that.myChart.dispose();}// const pointName = that.sendOption.pointName;// const imei = that.sendOption.imei;// console.log(pointName, imei, "获取到的数据");let option = {title: {text: that.sendOption.title,x: '20',y: '-3', //"20",textStyle: {color: '#000',fontFamily: 'Microsoft YaHei',fontSize: '16'}},tooltip: {trigger: 'axis',confine: true //限制tooltip在图表范围内展示},legend: {data: that.sendOption.legend,selected: that.sendOption.legendSelected[0]},grid: {left: '3%',right: '4%',bottom: '6%',top: '13%',containLabel: true},toolbox: {right: '10%',// 自定义工具提示框tooltip: {show: true,trigger: 'axis',formatter: function (param) {return '<div>' + param.title + '</div>';}},// 隐藏工具标题showTitle: false,feature: {// 保持图片saveAsImage: {type: 'png',name: that.sendOption.title, //保存文件的名称excludeComponents: ['toolbox'],title: '下载为图片',icon: 'path://M136.533333 0h750.933334c75.093333 0 136.533333 61.44 136.533333 136.533333v750.933334c0 75.093333-61.44 136.533333-136.533333 136.533333H136.533333c-75.093333 0-136.533333-61.44-136.533333-136.533333V136.533333C0 61.44 61.44 0 136.533333 0z m580.266667 409.6c54.613333 0 102.4-47.786667 102.4-102.4S771.413333 204.8 716.8 204.8 614.4 252.586667 614.4 307.2 662.186667 409.6 716.8 409.6z m-273.066667 266.24l-68.266666-109.226667c0-6.826667-6.826667-6.826667-13.653334-13.653333-20.48-6.826667-40.96-6.826667-47.786666 13.653333l-177.493334 273.066667v13.653333c0 20.48 13.653333 34.133333 34.133334 34.133334h696.32c13.653333 0 27.306667-13.653333 27.306666-27.306667 0-6.826667 0-13.653333-6.826666-13.653333l-150.186667-211.626667c-6.826667-13.653333-27.306667-13.653333-40.96-6.826667l-6.826667 6.826667-13.653333 13.653333-95.573333 150.186667c-13.653333 13.653333-34.133333 20.48-47.786667 6.826667-6.826667 0-6.826667-6.826667-6.826667-13.653334L443.733333 675.84z',iconStyle: {color: '#409eff',borderColor: 'none'}}}},xAxis: {type: 'category',boundaryGap: false,data: that.sendOption.xAxis// data: ['11-05 10:20:00', '11-05 10:21:00', '11-05 10:22:00']//示例代码},yAxis: {type: 'value',// min: yMin < 0 ? null : yMin,// max: yMax,// boundaryGap: true,boundaryGap: [0.1, 1]// max: function (value) {//   if (value.max < 3) {//     value.max = 3;//   } else {//     value.max = value.max;//   }//   return value.max;// },// boundaryGap: ["60%", "80%"],// maxInterval: 30,},series: that.sendOption.seriesData// 示例如下// series: [//     {//         data: [//             ['11-05 10:20:00', 14.06],//             ['11-05 10:22:00', null]//         ],//         type: 'line',//         name: 'sss',//         smooth: true,//         symbolSize: 6//     },//     {//         data: [['11-05 10:21:00', 21.82]],//         type: 'line',//         name: 'aaa',//         smooth: true,//         symbolSize: 6//     },// ]};// 基于准备好的dom，初始化echarts实例that.myChart = echarts.init(document.querySelector(`#${that.id}`));window.addEventListener('resize', function () {if (that.myChart) {that.myChart.resize();}});// 使用刚指定的配置项和数据显示图表。that.myChart.setOption(option);});},redraw() {// 使用刚指定的配置项和数据显示图表。that.myChart.setOption(option);}},beforeDestroy() {let that = this;if (!that.myChart) {return;}that.myChart.dispose();that.myChart = null;}
};
</script><style lang="scss" scoped></style>

 2.2 数据转换成折线图需要的数据

折线图封装完后引入页面需要传如下数据给折线图

            sendOptionTop: {title: '', //y轴标题seriesData: [], //主要数据xAxis: [], //点名称legend: [], //标题showTooltipLevel: true, //显示预警等级legendSelected: [] //控制显示隐藏},

 数据处理：把原始数据首先转换为分组的键值对

   // 根据poi_code对数据进行分组let groupedData = {};this.weatherData.forEach((item) => {// 判断当前poi_code是否存在groupedData中，以下是不存在的情况if (!groupedData[item.poi_code]) {// 不存在则创建一个新的键值对groupedData[item.poi_code] = {times: [],temperatures: [],humidities: [],airpressures: [],ppms: []};}groupedData[item.poi_code].times.push(item.time);groupedData[item.poi_code].temperatures.push([item.time || null, item.temperature || null]); // 处理null值groupedData[item.poi_code].humidities.push([item.time || null, item.humidity || null]);groupedData[item.poi_code].airpressures.push([item.time || null, item.airpressure || null]);groupedData[item.poi_code].ppms.push([item.time || null, item.ppm || null]);});console.log(groupedData, '组的数据-------');

转换后的效果如下， 一个组sss分别有4个单独的数据

 

 之后把键值对转换为数组，并且把sss添加到对应的值

        let echartsData = [];for (let code in groupedData) {echartsData.push({name: code,time: groupedData[code].times,temperature: groupedData[code].temperatures,humidity: groupedData[code].humidities,airpressure: groupedData[code].airpressures,ppm: groupedData[code].ppms});}console.log(echartsData, '');

 

 

 最后根据属性名进行匹配数据源，最终得到8条折现的数据

   let series = [];// 动态设置xAxis的data和seriesechartsData.forEach((data) => {// option.xAxis.data = data.time; // 设置x轴的时间数据（注意：这里可能需要根据实际情况调整，因为所有组的时间可能不一致）// 为每个poi_code创建一个series['temperature', 'humidity', 'airpressure', 'ppm'].forEach((type) => {series.push({name: `${data.name} ${type == 'temperature' ? '温度' : type == 'humidity' ? '湿度' : type == 'airpressure' ? '气压' : type}`,type: 'line',smooth: true,symbolSize: 6,data: data[type]});});});

注意这个name，name的值要在legend中

2.3按钮控制

按钮代码如下，只需要把title换成sss和aaa就行

  <divclass="item"v-for="(item, index) in lineChartArr":key="index":class="{ isSelected: item.isSelect }"@click="handleLineFilter(item)"><divclass="item-chunk":style="{background: `${!item.isSelect ? item.color : '#e4e5e6'}`}"></div><div class="item-title">{{ item.title }}</div></div>

 点击按钮后和legend标签进行匹配，匹配成功就设置legendSelected，注意！不能直接改变legendSelected，不然没有响应只能通过一个变量selected来进行改变了

   handleLineFilter(code) {code.isSelect = !code.isSelect;this.sendOptionTop.legendSelected = [];let legendData = this.sendOptionTop.legend;for (let item of legendData) {// 检查当前元素是否包含 obj.titleif (code.isSelect && item.indexOf(code.title) > -1) {// 如果包含，则添加到 result 对象中，并设置值为 falsethis.selected[item] = false;} else if (item.indexOf(code.title) > -1) {this.selected[item] = true;}}this.lineChartArr.forEach((item) => {if (item.title === code.title) {item.isSelect = code.isSelect;}});this.sendOptionTop.legendSelected.push(this.selected);}

匹配成功后的数据 ，这样就能让sss的组数据不选中了

 

3.完整代码

<template><div class="box"><div class="top-item"><divclass="item"v-for="(item, index) in lineChartArr":key="index":class="{ isSelected: item.isSelect }"@click="handleLineFilter(item)"><divclass="item-chunk":style="{background: `${!item.isSelect ? item.color : '#e4e5e6'}`}"></div><div class="item-title">{{ item.title }}</div></div></div><MultipleLineCharts id="zhexian02" :sendOption="sendOptionTop" /></div>
</template><script>
import MultipleLineCharts from '@/components/multipleLineCharts';
export default {components: {MultipleLineCharts},data() {return {lineChartArr: [{color: '#8b8c8c', //'#DC143C',title: 'sss',isSelect: false},{color: '#8b8c8c', //'#000000',title: 'aa',isSelect: false}],weatherData: [{poi_code: 'sss',time: '2024-10-01 14:14:14',period_num: 230,airpressure: 1020.3,temperature: 30,humidity: 29,ppm: 7.13},{poi_code: 'sss',time: '2024-10-02 13:14:14',period_num: 527,airpressure: null,temperature: 1020.3,humidity: 64,ppm: 170},{poi_code: 'sss',time: '2024-10-03 14:14:14',period_num: 528,airpressure: null,temperature: 756.3,humidity: 65,ppm: 53},{poi_code: 'sss',time: '2024-10-04 14:14:14',period_num: 529,airpressure: 54,temperature: 1020.3,humidity: null,ppm: 0},{poi_code: 'aaa',time: '2024-10-02 13:14:14',period_num: 527,airpressure: 32,temperature: 55,humidity: null,ppm: 0},{poi_code: 'aaa',time: '2024-10-05 11:14:14',period_num: 122,airpressure: 12,temperature: 73,humidity: 836,ppm: 0},{poi_code: 'aaa',time: '2024-10-06 11:14:14',period_num: 529,airpressure: 1,temperature: 23,humidity: 55,ppm: 1},{poi_code: 'aaa',time: '2024-10-07 06:14:14',period_num: 530,airpressure: 13,temperature: 0,humidity: 35,ppm: 0},{poi_code: 'aaa',time: '2024-10-07 16:14:14',period_num: 531,airpressure: 33,temperature: 32,humidity: 62,ppm: 0}],sendOptionTop: {title: '', //y轴标题seriesData: [], //主要数据xAxis: [], //点名称legend: [], //标题showTooltipLevel: true, //显示预警等级legendSelected: [] //控制显示隐藏},selected: {}};},mounted() {this.queryWeather();},methods: {queryWeather() {// 根据poi_code对数据进行分组let groupedData = {};this.weatherData.forEach((item) => {// 判断当前poi_code是否存在groupedData中，以下是不存在的情况if (!groupedData[item.poi_code]) {// 不存在则创建一个新的键值对groupedData[item.poi_code] = {times: [],temperatures: [],humidities: [],airpressures: [],ppms: []};}groupedData[item.poi_code].times.push(item.time);groupedData[item.poi_code].temperatures.push([item.time || null, item.temperature || null]); // 处理null值groupedData[item.poi_code].humidities.push([item.time || null, item.humidity || null]);groupedData[item.poi_code].airpressures.push([item.time || null, item.airpressure || null]);groupedData[item.poi_code].ppms.push([item.time || null, item.ppm || null]);});console.log(groupedData, '组的数据-------');let echartsData = [];for (let code in groupedData) {echartsData.push({name: code,time: groupedData[code].times,temperature: groupedData[code].temperatures,humidity: groupedData[code].humidities,airpressure: groupedData[code].airpressures,ppm: groupedData[code].ppms});}console.log(echartsData, '');let series = [];// 动态设置xAxis的data和seriesechartsData.forEach((data) => {// option.xAxis.data = data.time; // 设置x轴的时间数据（注意：这里可能需要根据实际情况调整，因为所有组的时间可能不一致）// 为每个poi_code创建一个series['temperature', 'humidity', 'airpressure', 'ppm'].forEach((type) => {series.push({name: `${data.name} ${type == 'temperature' ? '温度' : type == 'humidity' ? '湿度' : type == 'airpressure' ? '气压' : type}`,type: 'line',smooth: true,symbolSize: 6,data: data[type]});});});console.log(series, 'series');let aa = this.weatherData.map((item) => item.time);this.sendOptionTop.xAxis = this.removeDuplicateDates(aa);this.sendOptionTop.seriesData = series;this.sendOptionTop.legend = this.sendOptionTop.seriesData.map((item) => item.name);},removeDuplicateDates(dates) {// 使用 Set 来自动去除重复项const uniqueDates = new Set(dates);// 将 Set 转换回 Arrayreturn Array.from(uniqueDates);},handleLineFilter(code) {code.isSelect = !code.isSelect;this.sendOptionTop.legendSelected = [];let legendData = this.sendOptionTop.legend;for (let item of legendData) {// 检查当前元素是否包含 obj.titleif (code.isSelect && item.indexOf(code.title) > -1) {// 如果包含，则添加到 result 对象中，并设置值为 falsethis.selected[item] = false;} else if (item.indexOf(code.title) > -1) {this.selected[item] = true;}}this.lineChartArr.forEach((item) => {if (item.title === code.title) {item.isSelect = code.isSelect;}});console.log(this.sendOptionTop.legendSelected);this.sendOptionTop.legendSelected.push(this.selected);}}
};
</script><style lang="scss" scoped>
.box {height: 600px;width: 50%;
}
.top-item {width: 100%;display: flex;justify-content: center;margin: 40px 0px 20px;.item {display: flex;margin: 0 10px;}
}
.item-chunk {height: 13px;width: 26px;margin-top: 3px;margin-right: 5px;
}
</style>

文章到此结束，希望对你有所帮助~