首页 前端知识 vue echarts 折线图柱状图的封装

vue echarts 折线图柱状图的封装

2024-04-22 09:04:10 前端知识 前端哥 752 211 我要收藏

echarts 的显示方式有很多种现在看一种比较复杂的
如图所示,下方可一调整时间显示你想要的时间的就属于稍微的复杂的了 那么请看代码
在这里插入图片描述
1 写一个共用的 echarts 组件

<template>
	<div class="emptyChart" :id="optionID"></div>
</template>
<script>
export default {
	name: "emptyChart",
	props: ["optionID", "ops"],
	data() {
		return {
			myChart: null
		}
	},
	created() {},
	updated() {},
	mounted() {
		//定义一个图表方法在methods中调用
		this.emptyEcharts();
	},
	methods: {
		//图表方法
		emptyEcharts(opt) {
			this.myChart = this.$echarts.init(document.getElementById(this.optionID));
			let option = opt? opt:this.ops;
			this.myChart.setOption(option, true); //通过setOption()方法生成图表
			let _this = this;
			window.addEventListener("resize", function() {
				_this.myChart.resize(); //图表自适应的一个方法
			});
		}, 
		resize() {
			this.$nextTick(() => {
				this.myChart.resize();
			});
		},
	},
	computed: {}
};
</script>

<style scoped>
.emptyChart {
	width: 100%;
	height: 300px;
}
</style>

2.引入到组件

import EchartCom from "@/components/EchartCom";

export default {
  name: "historySearch",
  components: { EchartCom,},
 }

3.组建的 template 中的用法

<template>
	<div>
		<EchartCom "
            ref="loadPlan1"
            class="EchartCom"
            optionID="ii1"
            :ops="shortLoadPlanOpt1"
          ></EchartCom>
		<EchartCom
          ref="energyUseRef"
          optionID="energyUse"
          class="EchartCom"
          :ops="getEnergyUseOpt"
        >
        </EchartCom>
    </div>
</template>
<script>
//引入 封装的组件
import EchartCom from "@/components/EchartCom";
//引入封装的方法
import { chartUtil } from "@/libs/chartUtil.js";
export default {
  name: "historySearch",
  components: { leftTree, EchartCom, BlockTitle, },
  data() {
    return {
    //折线图的数据
      shortLoadPlanData1: {
        timeList: [],
        realDataList: [],
        predictedDataList: [],
        legendData:["计划负荷", "实际负荷"],
      },
		//柱状图的数据
      energyUseOptionData: [],
     }
    },
    created() {
	    this.loadEnergyUseSearch()
	    this.getFrontDayData()
	  },
	  computed: {
		// 折线图
    	shortLoadPlanOpt1() {
	      	let seriseData = [
	          {
	            name: "实际负荷",
	            type: "line",
	            symbol: "none",
	            smooth: true,
	            data: this.shortLoadPlanData1.realDataList,
	          },
	          {
	            name: "计划负荷",
	            type: "line",
	            smooth: true,
	            symbol: "none",
	            data: this.shortLoadPlanData1.predictedDataList,
	           
	          },
	        ]
	      	let xData = this.shortLoadPlanData1.timeList
			let legendData = this.shortLoadPlanData1.legendData
			let dw = '单位:MW'
			let legendIconType = null
	      	let option = chartUtil.dataZoomOption(seriseData, xData, legendData, dw, legendIconType)
			return option
	    },
	    // 柱状图
	    getEnergyUseOpt() {
	      let dimensions = ["date", "预测用电量", "实际用电量"]
	      let source = this.energyUseOptionData
	      let options = chartUtil.bar10Option(dimensions, source)
	      return options
	    },
	},
	methods: {
		//折线图数据获取方法
		getFrontDayData() {
	       	//if (this.lineDate === "") {
		         //this.$message.error("请选择日期");
		         //return;
	       	//}
	       	//this.resform1.queryType = "1"
	       	// this.resform1.beginTime = this.lineDate
	        //this.resform1.endTime = this.lineDate
	        //这是借口  可以注释
	        //queryLoadData(this.resform1).then((res) => {
	          	//this.shortLoadPlanData1.predictedDataList = res.predictedDataList;
	          	//this.shortLoadPlanData1.timeList = res.timeList;
	          	//this.shortLoadPlanData1.realDataList = res.realDataList;
	          	//  绘制echarts
	          	this.$refs.loadPlan1.emptyEcharts(this.shortLoadPlanOpt1);
	        //});
        },
        // 柱状图数据获取方法
	    barData(){
	      //getLoadEnergyUse(this.form2).then((res) => {
	        //this.energyUseOptionData = res.returnList;
	        // 绘制echarts
	        this.$refs.energyUseRef.emptyEcharts(this.getEnergyUseOpt);
	      //});
	    },
	},
}
</script>

4.创建封装方法的 chartUtil.js 文件, 引入 到页面中,引入方式

import { chartUtil } from "@/libs/chartUtil.js";

chartUtil.js 文件

/*
* @Description: echart option 配置
* @Version: 2.0
* @Author: lh
* @Date: 2021-11-30 13:18:32
* @LastEditors: lh
* @LastEditTime: 2022-01-15 18:38:27
*/
import echarts from 'echarts'
export const chartUtil = {
   colorList: [
   	'rgb(73,224,153)',
   	'rgb(32,154,250)',
   	'rgb(183,245,247)',
   	'rgb(0,204,223)',
   	'rgb(219,214,80)',
   	'rgb(35,165,251)',
   	'rgb(73,224,153)',
   	'rgb(81,244,155)',
   	'rgb(227,240,79)',
   	'rgb(75,240,255)',
   	'rgb(255,167,77)',
   	'rgb(254,73,73)',
   	'rgb(57,66,163)',
   	'rgb(255,105,42)',
   	'rgb(150,214,253)',
   	'rgb(173,24,153)',
   	'rgb(93,124,13)',
   	'rgb(113,24,13)',
   	'rgb(173,124,13)',
   	'rgb(209,224,53)',
   	'rgb(73,24,103)'
   ],
   pieChart: function(unit) {
   	let option = {
   		tooltip: {
   			trigger: 'item',
   			formatter: '{b} : {d}%<br/> {c} ' + unit
   		},
   		grid: {
   			left: 0,
   			right: 0,
   			top: 0,
   			bottom: 0
   		},
   		legend: {
   			show: true,
   			type: 'scroll',
   			orient: 'vertical',
   			// itemGap: 100,
   			left: '5%',
   			textStyle: {
   				color: '#999',
   				fontSize: 12
   			}
   		},
   		series: []
   	}
   	return option
   },
   chart_legendTop: function(yAxisName, toolbox = { show: false }) {
   	let option = {
   		tooltip: {
   			trigger: 'axis',
   			textStyle: {
   				align: 'left'
   			},
   			axisPointer: {
   				type: 'line'
   			}
   		},
   		legend: {
   			show: true,
   			type: 'scroll',
   			itemGap: 100,
   			top: '2%',
   			left: 'center',
   			textStyle: {
   				color: '#999',
   				fontSize: 12
   			}
   		},
   		dataZoom: [
   			{
   				type: 'slider',
   				show: false,
   				start: 0,
   				end: 100
   			}
   		],
   		toolbox: toolbox,

   		grid: {
   			top: '25%',
   			right: '5%',
   			left: '5%',
   			bottom: '15%'
   		},
   		xAxis: [
   			{
   				type: 'category',
   				data: [],
   				axisLine: {
   					lineStyle: {
   						color: '#999',
   						// color: '#fff',
   						fontSize: 12
   					}
   				},
   				axisLabel: {
   					margin: 10,
   					// interval: 0,
   					// rotate: 1,
   					color: '#999',
   					align: 'center',
   					textStyle: {
   						fontSize: 14
   					}
   				}
   			},
   			{
   				type: 'category',
   				data: [],
   				position: 'top',
   				show: false,
   				axisLine: {
   					lineStyle: {
   						color: '#999',
   						// color: '#fff',
   						fontSize: 12
   					}
   				},
   				axisLabel: {
   					margin: 10,
   					// interval: 0,
   					// rotate: 1,
   					color: '#999',
   					align: 'center',
   					textStyle: {
   						fontSize: 14
   					}
   				}
   			}
   		],
   		yAxis: [
   			{
   				type: 'value',
   				name: yAxisName,
   				splitNumber: 5,
   				axisLabel: {
   					formatter: '{value}',
   					color: '#999'
   				},
   				axisLine: {
   					show: true,
   					lineStyle: {
   						// color: 'rgba(255,255,255,0.12)'
   						color: '#999'
   					}
   				},
   				splitLine: {
   					show: true,
   					lineStyle: {
   						color: '#999'
   					}
   				}
   			},
   			{
   				position: 'right',
   				show: false,
   				type: 'value',
   				name: yAxisName,
   				splitNumber: 5,
   				axisLabel: {
   					formatter: '{value}',
   					color: '#999'
   				},
   				axisLine: {
   					show: true,
   					lineStyle: {
   						// color: 'rgba(255,255,255,0.12)'
   						color: '#999'
   					}
   				},
   				splitLine: {
   					show: true,
   					lineStyle: {
   						color: '#999'
   					}
   				}
   			}
   		],
   		series: []
   	}
   	return option
   },
   barChart2: function() {
   	let option = {
   		tooltip: {
   			trigger: 'axis',
   			textStyle: {
   				align: 'left'
   			},
   			axisPointer: {
   				type: 'none'
   			}
   		},
   		legend: {
   			show: true,
   			itemGap: 100,
   			left: '2%',
   			textStyle: {
   				color: '#FFFFFF',
   				fontSize: 12
   			}
   		},
   		grid: {
   			top: '15%',
   			right: '9%',
   			left: '13%',
   			bottom: '15%'
   		},
   		xAxis: [
   			{
   				type: 'category',
   				data: [],
   				axisLine: {
   					lineStyle: {
   						// color: 'rgba(255,255,255,0.12)',
   						color: '#fff',
   						fontSize: 12
   					}
   				},
   				axisLabel: {
   					margin: 10,
   					interval: 0,
   					rotate: 1,
   					color: '#e2e9ff',
   					align: 'center',
   					textStyle: {
   						fontSize: 14
   					}
   				}
   			}
   		],
   		yAxis: [
   			{
   				splitNumber: 5,
   				axisLabel: {
   					formatter: '{value}',
   					color: '#e2e9ff'
   				},
   				axisLine: {
   					show: true,
   					lineStyle: {
   						// color: 'rgba(255,255,255,0.12)'
   						color: '#fff'
   					}
   				},
   				splitLine: {
   					show: true,
   					lineStyle: {
   						color: '#233e64'
   					}
   				}
   			},
   			{
   				splitNumber: 3,
   				axisLabel: {
   					formatter: '{value}',
   					color: '#e2e9ff'
   				},
   				axisLine: {
   					show: true,
   					lineStyle: {
   						// color: 'rgba(255,255,255,0.12)'
   						color: '#fff'
   					}
   				},
   				splitLine: {
   					show: false,
   					lineStyle: {
   						color: '#233e64'
   					}
   				}
   			}
   		],
   		series: [
   			{
   				name: 'CO2当量(吨)',
   				type: 'bar',
   				data: [],
   				barWidth: '10px',
   				yAxisIndex: 0,
   				itemStyle: {
   					normal: {
   						color: new echarts.graphic.LinearGradient(
   							0,
   							0,
   							0,
   							1,
   							[
   								{
   									offset: 0,
   									color: 'rgba(245,237,181,1)' // 0% 处的颜色
   								},
   								{
   									offset: 1,
   									color: 'rgba(242,210,4,1)' // 100% 处的颜色
   								}
   							],
   							false
   						),
   						barBorderRadius: [30, 30, 3, 3],
   						shadowColor: 'rgba(0,160,221,1)',
   						shadowBlur: 4
   					}
   				}
   			},
   			{
   				name: '环比',
   				type: 'line',
   				symbolSize: 0,
   				symbol: 'circle',
   				yAxisIndex: 1,
   				itemStyle: {
   					normal: {
   						color: 'rgba(255, 196, 53, 1)',
   						barBorderRadius: 0
   					}
   				},
   				lineStyle: {
   					normal: {
   						width: 2,
   						color: {
   							type: 'linear',
   							x: 0,
   							y: 0,
   							x2: 0,
   							y2: 1,
   							colorStops: [
   								{
   									offset: 0,
   									color: '#F0B62A' // 0% 处的颜色
   								},
   								{
   									offset: 0.45,
   									color: '#FFC12B' // 45% 处的颜色
   								},
   								{
   									offset: 0.85,
   									color: '#FFC12B' // 85% 处的颜色
   								},
   								{
   									offset: 1,
   									color: '#FFC12B' // 100% 处的颜色
   								}
   							],
   							global: false // 缺省为 false
   						}
   					}
   				},
   				data: []
   			}
   		]
   	}
   	return option
   },
   moreLineChart: function() {
   	let option = {
   		tooltip: {
   			trigger: 'axis',
   			axisPointer: {
   				lineStyle: {
   					color: '#57617B'
   				}
   			}
   		},
   		legend: {
   			icon: 'rect',
   			itemWidth: 14,
   			itemHeight: 5,
   			itemGap: 25,
   			data: [],
   			left: '4%',
   			textStyle: {
   				fontSize: 12,
   				color: '#999'
   			}
   		},
   		grid: {
   			left: '3%',
   			top: '15%',
   			right: '6%',
   			bottom: '7%',
   			containLabel: true
   		},
   		xAxis: [
   			{
   				type: 'category',
   				boundaryGap: false,
   				align: 'center',
   				axisLine: {
   					lineStyle: {
   						color: '#fff',
   						fontSize: 12
   					}
   				},
   				data: []
   			}
   		],
   		yAxis: [
   			{
   				type: 'value',
   				// name: '单位(%)',
   				scale: true,
   				axisTick: {
   					show: false
   				},
   				axisLine: {
   					lineStyle: {
   						color: '#fff',
   						fontSize: 12
   					}
   				},
   				axisLabel: {
   					margin: 10,
   					textStyle: {
   						fontSize: 12
   					}
   				},
   				splitLine: {
   					show: false,
   					lineStyle: {
   						color: '#57617B'
   					}
   				}
   			},
   			{
   				type: 'value',
   				// name: '单位(%)',
   				scale: true,
   				axisTick: {
   					show: false
   				},
   				axisLine: {
   					lineStyle: {
   						color: '#fff',
   						fontSize: 12
   					}
   				},
   				axisLabel: {
   					margin: 10,
   					textStyle: {
   						fontSize: 12
   					}
   				},
   				splitLine: {
   					lineStyle: {
   						color: '#57617B'
   					}
   				}
   			}
   		],
   		series: [
   			{
   				name: '碳资产价值(万元)',
   				type: 'line',
   				smooth: true,
   				symbol: 'circle',
   				yAxisIndex: 0,
   				symbolSize: 5,
   				showSymbol: false,
   				lineStyle: {
   					normal: {
   						width: 1,
   						color: 'rgba(162, 204, 70, 1)'
   					}
   				},
   				areaStyle: {
   					normal: {
   						color: new echarts.graphic.LinearGradient(
   							0,
   							0,
   							0,
   							1,
   							[
   								{
   									offset: 0,
   									color: 'rgba(162, 204, 70, 0.8)'
   								},
   								{
   									offset: 0.8,
   									color: 'rgba(162, 204, 70, 0.3)'
   								}
   							],
   							false
   						),
   						shadowColor: 'rgba(0, 0, 0, 0.1)',
   						shadowBlur: 10
   					}
   				},
   				itemStyle: {
   					normal: {
   						color: 'rgb(137,189,27)',
   						borderColor: 'rgba(137,189,2,0.27)',
   						borderWidth: 12
   					}
   				},
   				data: []
   			},
   			{
   				name: 'CCER市场价格',
   				type: 'line',
   				smooth: true,
   				yAxisIndex: 1,
   				symbol: 'circle',
   				symbolSize: 5,
   				showSymbol: false,
   				lineStyle: {
   					normal: {
   						width: 1,
   						color: 'rgba(0, 103, 218,1)'
   					}
   				},
   				areaStyle: {
   					normal: {
   						color: new echarts.graphic.LinearGradient(
   							0,
   							0,
   							0,
   							1,
   							[
   								{
   									offset: 0,
   									color: 'rgba(0, 103, 218, 0.8)'
   								},
   								{
   									offset: 0.8,
   									color: 'rgba(0, 103, 218, 0.3)'
   								}
   							],
   							false
   						),
   						shadowColor: 'rgba(0, 0, 0, 0.1)',
   						shadowBlur: 10
   					}
   				},
   				itemStyle: {
   					normal: {
   						color: 'rgb(0,136,212)',
   						borderColor: 'rgba(0,136,212,0.2)',
   						borderWidth: 12
   					}
   				},
   				data: []
   			},
   			{
   				name: 'CEA市场价格',
   				type: 'line',
   				smooth: true,
   				symbol: 'circle',
   				symbolSize: 5,
   				yAxisIndex: 1,
   				showSymbol: false,
   				lineStyle: {
   					normal: {
   						width: 1
   					}
   				},
   				areaStyle: {
   					normal: {
   						color: new echarts.graphic.LinearGradient(
   							0,
   							0,
   							0,
   							1,
   							[
   								{
   									offset: 0,
   									color: 'rgba(242, 210, 7, 0.8)'
   								},
   								{
   									offset: 0.8,
   									color: 'rgba(242, 210, 7, 0.3)'
   								}
   							],
   							false
   						),
   						shadowColor: 'rgba(0, 0, 0, 0.1)',
   						shadowBlur: 10
   					}
   				},
   				itemStyle: {
   					normal: {
   						color: 'rgb(242, 210, 7)',
   						borderColor: 'rgba(242, 210, 7,0.2)',
   						borderWidth: 12
   					}
   				},
   				data: []
   			}
   		]
   	}
   	return option
   },
   morePieChart: function() {
   	let colors = ['#FF9532', '#FF375F', '#6BBFFF']
   	let option = {
   		legend: {
   			orient: 'vertical',
   			icon: 'rect',
   			x: '54%',
   			y: 'center',
   			itemWidth: 12,
   			itemHeight: 12,
   			itemGap: 7,
   			align: 'left',
   			tooltip: {
   				show: false
   			},
   			textStyle: {
   				color: '#999',
   				fontSize: 14,
   				padding: [0, 0, 0, 10]
   			},
   			formatter(name) {
   				let then = option.series[0].data // 获取series中的data
   				let str
   				let sums = 0
   				then.filter(items => {
   					sums += parseFloat(items.value)
   				})
   				for (let i = 0; i < then.length; i++) {
   					if (then[i].name == name) {
   						// p = (then[i].value / total) * 100;
   						str = name + '       ' + (parseFloat(then[i].value / sums) * 100).toFixed(2) + '%'
   					}
   				}
   				return str
   			}
   		},
   		polar: {
   			radius: ['44%', '50%']
   			// center: ['18%', '50%'],
   		},
   		angleAxis: {
   			max: 100,
   			show: false
   		},
   		radiusAxis: {
   			type: 'category',
   			show: true,
   			axisLabel: {
   				show: false
   			},
   			axisLine: {
   				show: false
   			},
   			axisTick: {
   				show: false
   			}
   		},
   		series: [
   			// {
   			//     type: 'pie',
   			//     center: ['30%', '50%'],
   			//     radius: ['50%', '60%'],
   			//     clockwise: false,
   			//     avoidLabelOverlap: false,
   			//     legendHoverLink: false,
   			//     hoverAnimation: false,
   			//     startAngle: 180, //起始角度
   			//     hoverOffset: 1,
   			//     tooltip: {
   			//         show: false,
   			//     },
   			//     dispatchAction:({
   			//         type: 'hideTip'
   			//     }),
   			//     zlevel: 25,
   			//     emphasis: {},
   			//     itemStyle: {},
   			//     label: {
   			//         show: false,
   			//         position: 'center',
   			//         color: 'rgba(13, 17, 29,0)',
   			//     },
   			//     data: [],
   			// },
   			// {
   			//     type: 'gauge', //旋转小点下面指示盘lh
   			//     name: '',
   			//     radius: '70%',
   			//     startAngle: '0',
   			//     endAngle: '-359.99',
   			//     splitNumber: '200',
   			//     tooltip: {
   			//         show: false,
   			//     },
   			//     dispatchAction:({
   			//         type: 'hideTip'
   			//     }),
   			//     hoverAnimation: false,
   			//     center: ['30%', '50%'],
   			//     pointer: {
   			//         show: false,
   			//     },
   			//     title: {
   			//         show: false,
   			//     },
   			//     detail: {
   			//         show: false,
   			//     },
   			//     data: [
   			//         {
   			//             value: 95,
   			//             name: '',
   			//         },
   			//     ],
   			//     axisLine: {
   			//         lineStyle: {
   			//             width: 20,
   			//             opacity: 0,
   			//         },
   			//     },
   			//     axisTick: {
   			//         show: false,
   			//     },
   			//     splitLine: {
   			//         show: true,
   			//         length: 13,
   			//         lineStyle: {
   			//             color: {
   			//                 type: 'linear',
   			//                 x: 1,
   			//                 y: 0,
   			//                 x2: 0,
   			//                 y2: 0,
   			//                 colorStops: [
   			//                     {
   			//                         offset: 0,
   			//                         color: '#111',
   			//                     },
   			//                     {
   			//                         offset: 0.5,
   			//                         color: 'rgba(66, 66, 66, 1)',
   			//                     },
   			//                     {
   			//                         offset: 1,
   			//                         color: '#111',
   			//                     },
   			//                 ],
   			//                 globalCoord: false,
   			//             },
   			//             width: 1,
   			//             type: 'solid',
   			//         },
   			//     },
   			//     axisLabel: {
   			//         show: false,
   			//     },
   			// },
   			// {
   			//     name: '', //外层光晕
   			//     type: 'pie',
   			//     startAngle: 90,
   			//     tooltip: {
   			//         show: false,
   			//     },
   			//     dispatchAction:({
   			//         type: 'hideTip'
   			//     }),
   			//     hoverAnimation: false,
   			//     radius: ['71%', '73%'],
   			//     hoverAnimation: false,
   			//     center: ['30%', '50%'],
   			//     itemStyle: {
   			//         normal: {
   			//             labelLine: {
   			//                 show: false,
   			//             },
   			//             color: 'rgba(66, 66, 66, .4)',
   			//             shadowBlur: 10,
   			//             shadowColor: 'rgba(253, 249, 20, .3)',
   			//         },
   			//     },
   			//     data: [
   			//         {
   			//             value: 100,
   			//         },
   			//     ],
   			// },
   			// {
   			//     name: '', //外层光晕
   			//     type: 'pie',
   			//     startAngle: 90,
   			//     tooltip: {
   			//         show: false,
   			//     },
   			//     dispatchAction:({
   			//         type: 'hideTip'
   			//     }),
   			//     hoverAnimation: false,
   			//     radius: ['71.5%', '75%'],
   			//     hoverAnimation: false,
   			//     center: ['30%', '50%'],
   			//     itemStyle: {
   			//         normal: {
   			//             labelLine: {
   			//                 show: false,
   			//             },
   			//             color: 'rgba(66, 66, 66, .3)',
   			//             shadowBlur: 10,
   			//             shadowColor: 'rgba(253, 249, 20, .3)',
   			//         },
   			//     },
   			//     data: [
   			//         {
   			//             value: 100,
   			//         },
   			//     ],
   			// },
   			// {
   			//     name: '', //外层光晕
   			//     type: 'pie',
   			//     startAngle: 90,
   			//     tooltip: {
   			//         show: false,
   			//     },
   			//     dispatchAction:({
   			//         type: 'hideTip'
   			//     }),
   			//     hoverAnimation: false,
   			//     radius: ['75.5%', '76.8%'],
   			//     hoverAnimation: false,
   			//     center: ['30%', '50%'],
   			//     itemStyle: {
   			//         normal: {
   			//             labelLine: {
   			//                 show: false,
   			//             },
   			//             color: 'rgba(66, 66, 66, .2)',
   			//             shadowBlur: 10,
   			//             shadowColor: 'rgba(253, 249, 20, .3)',
   			//         },
   			//     },
   			//     data: [
   			//         {
   			//             value: 100,
   			//         },
   			//     ],
   			// },
   			// {
   			//     name: '', //外层光晕
   			//     type: 'pie',
   			//     startAngle: 90,
   			//     tooltip: {
   			//         show: false,
   			//     },
   			//     dispatchAction:({
   			//         type: 'hideTip'
   			//     }),
   			//     hoverAnimation: false,
   			//     radius: ['77.5%', '78.5%'],
   			//     hoverAnimation: false,
   			//     center: ['30%', '50%'],
   			//     itemStyle: {
   			//         normal: {
   			//             labelLine: {
   			//                 show: false,
   			//             },
   			//             color: 'rgba(66, 66, 66, .1)',
   			//             shadowBlur: 10,
   			//             shadowColor: 'rgba(253, 249, 20, .3)',
   			//         },
   			//     },
   			//     data: [
   			//         {
   			//             value: 100,
   			//         },
   			//     ],
   			// },
   			// {
   			//     name: '', //旋转小圆点 lh
   			//     type: 'custom',
   			//     hoverAnimation: false,
   			//     tooltip: {
   			//         show: false,
   			//     },
   			//     dispatchAction:({
   			//         type: 'hideTip'
   			//     }),
   			//     coordinateSystem: 'none',
   			//     renderItem: {},
   			//     data: [0],
   			// },
   		]
   	}
   	return option
   },
   universalEchartsOption: function(seriseData, xData, legendData, dw, legendIconType) {
   	let yName = dw? dw:''
   	return {
   		color: ['#209AFA','#38E68D', '#CFDB48', '#ECAE1F', '#8301FF', '#008080', '#A30113'],
   		tooltip: {
   			trigger: "axis"
   		},
   		legend: {
   			data: legendData,
   			right: 20,
   			top: 10,
   			icon: legendIconType,
   			orient: 'horizontal'
   		},
   		grid: {
   			// top: 20,
   			bottom: 40,
   			left: 40,
   			right: 20,
   			containLabel: false
   		},
   		xAxis: {
   			type: "category",
   			data: xData
   		},
   		yAxis: {
   			axisLine: {
   				show: false
   			},
   			nameTextStyle: {
   				color: "#666"
   			},
   			name: yName
   		},
   		series: seriseData
   	}
   },
   dataZoomOption: function(seriseData, xData, legendData, dw, legendIconType) {
   	let yName = dw? dw:''
   	return {
   		color: ['#209AFA','#38E68D', '#CFDB48', '#ECAE1F', '#8301FF', '#008080', '#A30113'],
   		tooltip: {
   			trigger: "axis"
   		},
   		legend: {
   			data: legendData,
   			right: 20,
   			top: 10,
   			icon: legendIconType,
   			orient: 'horizontal'
   		},
   		grid: {
   			// top: 20,
   			bottom: 40,
   			left: 40,
   			right: 20,
   			containLabel: false
   		},
   		xAxis: {
   			type: "category",
   			data: xData
   		},
   		yAxis: {
   			axisLine: {
   				show: false
   			},
   			nameTextStyle: {
   				color: "#666"
   			},
   			name: yName
   		},
   		dataZoom: [
   			{
   				show: true,
   				xAxisIndex: [0],
   				type: 'slider',
   				top: '290',
   				height:'6',
   				start: 0,
   				end: 100,
   				handleIcon: //两侧缩放手柄的 icon 形状
   				  'path://m510.511,98.545c-202.52,0 -369.3,166.779 -369.3,369.299c0,205.498 166.779,372.278 369.299,372.278c205.498,0 372.278,-166.779 372.278,-372.278c0,-202.52 -166.779,-369.299 -372.278,-369.299l0,0l0.001,0zm0,77.435c163.802,0 294.844,131.042 294.844,291.865c0,163.802 -131.042,294.845 -294.845,294.845c-160.823,0 -291.865,-131.042 -291.865,-294.845c0,-160.823 131.042,-291.865 291.865,-291.865l0.001,0z',
   				handleSize: '12',
   				handleStyle: { //两侧缩放手柄的样式配置
   				  color: '#209AFA',
   				  backgroundColor: '#ffffff',
   				  borderColor: '#209AFA',
   				//   shadowColor: '#209AFA',
   				},
   				textStyle: {
   				  color: '#666666'
   				},
   				backgroundColor: 'rgba(0,112,222,0.0600)',
   				borderColor:'#ffffff',// 长条边框颜色
   				moveHandleSize: 8, //移动手柄的样式配置
   				moveHandleStyle: {
   				  color: '#fff',
   				//   borderColor: '#209AFA',
   				  shadowColor: '#209AFA',
   				  opacity: 1,
   				},
   				emphasis: {
   				  moveHandleStyle: {
   					color: '#209AFA',
   					borderColor: '#209AFA',
   					shadowColor: '#209AFA',
   					opacity: 1,
   				  },
   				  handleStyle: {
   					color: '#209AFA',
   					// borderColor: '#209AFA',
   					shadowColor: '#209AFA',
   				  },
   				},
   				dataBackground: {
   				  lineStyle: {
   					color: 'none',
   					shadowColor: 'none',
   				  },
   				  areaStyle: {
   					color: 'none',
   					shadowColor: 'none',
   				  },
   				},
   				selectedDataBackground: {
   				  lineStyle: {
   					color: 'none',
   					shadowColor: 'none',
   				  },
   				  areaStyle: {
   					color: 'none',
   					shadowColor: 'none',
   				  },
   				},
   			}
   		],
   		series: seriseData
   	}
   },
   twoYAxischartsOption: function(seriseData, xData, legendData, dw, legendIconType, dw2) {
   	let yName = dw? dw:''
   	let yName2 = dw2? dw2:''
   	return {
   		color: ['#209AFA','#38E68D', '#CFDB48', '#ECAE1F', '#8301FF', '#008080', '#A30113'],
   		tooltip: {
   			trigger: "axis"
   		},
   		legend: {
   			data: legendData,
   			right: 20,
   			top: 10,
   			icon: legendIconType,
   			orient: 'horizontal'
   		},
   		grid: {
   			// top: 20,
   			bottom: 40,
   			left: 40,
   			right: 40,
   			containLabel: false
   		},
   		xAxis: {
   			type: "category",
   			data: xData
   		},
   		yAxis: [
   			{
   				axisLine: {
   					show: false
   				},
   				nameTextStyle: {
   					color: "#666"
   				},
   				name: yName
   			},
   			{
   				axisLine: {
   					show: false
   				},
   				nameTextStyle: {
   					color: "#666"
   				},
   				name: yName2
   			}
   		],
   		series: seriseData
   	}
   },
   bar10Option: function(dimensions, source) {
   	return  {
   		color: ['#209AFA','#38E68D', '#CFDB48', '#ECAE1F', '#8301FF', '#008080', '#A30113'],
   		tooltip: {
   		  trigger: "axis"
   		},
   		legend: {
   		  right: 20,
   		  top: 10,
   		  icon: 'roundRect',
   		  orient: 'horizontal'
   		},
   		dataset: {
   		  dimensions: dimensions,
   		  source: source,
   		},
   		grid: {
   		  // top: 20,
   		  bottom: 40,
   		  left: 40,
   		  right: 20,
   		  containLabel: false
   		},
   		xAxis: { type: "category" },
   		yAxis: {
   		  axisLine: {
   			show: false,
   		  },
   		  nameTextStyle: {
   			color: "#666",
   		  },
   		  name: "单位:kWh",
   		},
   		series: [
   		  { type: "bar", color: "#96F203", barWidth: 20 },
   		  { type: "bar", color: "#00A7F0", barGap: "0", barWidth: 20 },
   		],
   		dataZoom: [
   		  {
   			show: true,
   			xAxisIndex: [0],
   			type: 'slider',
   			top: '290',
   			height:'6',
   			startValue: 0,
   			endValue: 9,
   			handleIcon: //两侧缩放手柄的 icon 形状
   			  'path://m510.511,98.545c-202.52,0 -369.3,166.779 -369.3,369.299c0,205.498 166.779,372.278 369.299,372.278c205.498,0 372.278,-166.779 372.278,-372.278c0,-202.52 -166.779,-369.299 -372.278,-369.299l0,0l0.001,0zm0,77.435c163.802,0 294.844,131.042 294.844,291.865c0,163.802 -131.042,294.845 -294.845,294.845c-160.823,0 -291.865,-131.042 -291.865,-294.845c0,-160.823 131.042,-291.865 291.865,-291.865l0.001,0z',
   			handleSize: '12',
   			handleStyle: { //两侧缩放手柄的样式配置
   			  color: '#209AFA',
   			  backgroundColor: '#ffffff',
   			  borderColor: '#209AFA',
   			//   shadowColor: '#209AFA',
   			},
   			textStyle: {
   			  color: '#666666'
   			},
   			backgroundColor: 'rgba(0,112,222,0.0600)',
   			borderColor:'#ffffff',// 长条边框颜色
   			moveHandleSize: 8, //移动手柄的样式配置
   			moveHandleStyle: {
   			  color: '#fff',
   			//   borderColor: '#209AFA',
   			  shadowColor: '#209AFA',
   			  opacity: 1,
   			},
   			emphasis: {
   			  moveHandleStyle: {
   			  color: '#209AFA',
   			  borderColor: '#209AFA',
   			  shadowColor: '#209AFA',
   			  opacity: 1,
   			  },
   			  handleStyle: {
   			  color: '#209AFA',
   			  // borderColor: '#209AFA',
   			  shadowColor: '#209AFA',
   			  },
   			},
   			dataBackground: {
   			  lineStyle: {
   			  color: 'none',
   			  shadowColor: 'none',
   			  },
   			  areaStyle: {
   			  color: 'none',
   			  shadowColor: 'none',
   			  },
   			},
   			selectedDataBackground: {
   			  lineStyle: {
   			  color: 'none',
   			  shadowColor: 'none',
   			  },
   			  areaStyle: {
   			  color: 'none',
   			  shadowColor: 'none',
   			  },
   			},
   		  }
   		]
   	}
   }
}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5713.html
标签
评论
发布的文章

html生成简易打字游戏

2024-04-29 16:04:21

js正则提取网页url

2024-04-29 12:04:02

js获取图片原始宽高

2024-04-29 12:04:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!