Echats 折线图区间添加颜色
Echats 折线图区间添加颜色
前言
项目要求:
1.柱状图大于阈值上限柱状图为红色,
2.柱状图大小于阈值下限柱状图为绿色,
3.柱状图在阈值上限和阈值下限中间,(也就是正常的话)柱状图为蓝色,
4.且阈值上限和阈值下限中间渲染一种颜色,
一、废话少说,上代码
二、使用步骤
1.首先封装一个 chartUtil.js 文件,
import echarts from 'echarts'
export const chartUtil = {
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
}
],
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
}
},
}
-
第二部 封装一个 EchartCom.vue文件
<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>3.第三部开始写你的页面 到时候把上面两个文件引入就行
<template>
<EchartCom
ref="LineRef"
class="categorys"
optionID="NBQFDLbars"
:ops="LineOption"
></EchartCom>
</template>
<script>
import { chartUtil } from "@/libs/chartUtil.js";
import EchartCom from "@/components/EchartCom"
export default {
components: { EchartCom },
data() {
return {
lineBarBoxData: {
seriseData1: [80, 100, 100, 100, 100, 100],
timeData: ["2017年", "2018年", "2019年", "2020年", "2021年", "2022年"],
seriseData2: [650, 810, 500, 770, 730, 790],
seriseData3: [720, 910, 600, 870, 830, 890],
barData: [700, 960, 450, 680, 960, 820]
},
}
},
computed: {
LineOption() {
let seriseData = [
{
name: "实际值",
data: this.lineBarBoxData.barData,
type: "bar",
barWidth: 20,
yAxisIndex: 0,
itemStyle: {
color: p => {
for (var i = 0; i < this.lineBarBoxData.seriseData3.length; i++) {
for (var j = 0; j < this.lineBarBoxData.seriseData2.length;j++) {
//判断柱状图的颜色
if (i == p.dataIndex && j == p.dataIndex) {
if (
this.lineBarBoxData.seriseData3[i] > p.data &&
this.lineBarBoxData.seriseData2[j] > p.data
) {
return "#60b565";
} else if (
this.lineBarBoxData.seriseData3[i] < p.data &&
this.lineBarBoxData.seriseData2[j] < p.data
) {
return "#ee5846";
} else {
return "#5894ff";
}
}
}
}
}
}
},
{
name: "阈值下限",
data: this.lineBarBoxData.seriseData2,
type: "line",
smooth: true,
symbol: "circle",
stack: "value1",
symbolSize: 6,
yAxisIndex: 1,
itemStyle: {
color: "#16ee88"
}
},
{
name: "阈值上限",
data: this.lineBarBoxData.seriseData1,
type: "line",
smooth: true,
symbol: "circle",
stack: "value1",
symbolSize: 6,
yAxisIndex: 1,
itemStyle: {
color: "#16ee88"
},
areaStyle: {
//区域填充样式
normal: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(90,155,213,0.6000)"
},
{
offset: 1,
color: "rgba(90,155,213,0.0600)"
}
],
false
)
}
}
}
];
let xData = this.lineBarBoxData.timeData;
let legendData = [];
let dw = "单位：kWh";
let legendIconType = null;
let options = chartUtil.twoYAxischartsOption(
seriseData,
xData,
legendData,
dw,
legendIconType
);
//鼠标滑入添加单位
options.tooltip.formatter = function(params) {
var relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
if (params[i].componentIndex == 0) {
relVal +=
"<br/>" +
params[i].marker +
params[i].seriesName +
" : " +
params[i].value +
" kWh";
} else if (params[i].componentIndex == 1) {
relVal +=
"<br/>" +
params[i].marker +
params[i].seriesName +
" : " +
params[i].value +
" kWh";
} else {
let num = Number(params[i].value) + Number(params[i - 1].value);
relVal +=
"<br/>" +
params[i].marker +
params[i].seriesName +
" : " +
num +
" kWh";
}
}
return relVal;
};
return options;
}
},
methods: {
getBar() {
this.$refs.LineRef?.emptyEcharts(this.LineOption);
},
},
created() {
this.getBar();
},
}
</script>
215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
