【无标题】

已于 2022-10-21 08:45:27 修改
阅读量582 收藏
点赞数
分类专栏： Echats 折线图区间添加颜色 文章标签： echarts javascript vue.js
于 2022-10-20 17:44:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_51377626/article/details/127430694
版权
本文介绍了如何在Echarts折线图中根据柱状图数值与预设阈值的关系，实现柱状图颜色的动态变化，包括红色（超过上限）、绿色（低于下限）和蓝色（介于两者之间）。代码示例和步骤详细展示了如何创建带有颜色区间的两Y轴图表。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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
            }
	},
}

  1. 第二部 封装一个 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>
帆软-条形图点击柱子变色并联动图表js
weixin_42741208的博客
11-08 1416
预期效果：点击条形图chart2的柱子，柱子变成红色，并联动条形图chart1。1、决策报表拖入条形图chart1、chart2，绑定数据集，并设置好样式；2、在条形图chart2特效的交互属性下添加Javascript链接；结束语：以上功能不适用于渐变色条形图。3、设置参数a，值设为分类名；
Echarts 基础柱状图，实现柱体设定颜色且带有图例
weixin_61933613的博客
03-27 7949
摘要：柱状图的最初要求很简单，4个柱体高低显示不同分类的值，逐渐增加的要求有：自定义特定分类颜色、增加图例展示、点击图例控制分类显示和隐藏。记录下遇到的问题和一些不熟悉的属性的使用。
echarts数据可视化柱状图，根据值得大小显示不同颜色
xx820702的博客
07-27 1814
echarts数据可视化柱状图，根据值得大小显示不同颜色
echarts柱状图每根柱子添加警戒值/阈值，分段警戒线
Hyanl的博客
07-28 1977
方案1：使用echarts的标线markLine实现（ps：此种方案有弊端：需要一一设置每个柱子的标线起始点，不好控制，不太建议使用）方案1：使用echarts的自定义图形custom实现（此方案较方案一更实用）实现方式我这有两种方案，如下介绍。
帆软调整柱状图的颜色
hzp666的博客
10-12 2316
setTimeout(function() { //调整整个柱形图的位置 //document.getElementsByTagName("svg")[0].style.transform = "translate3d(0px, 14px, 0px)"; var bars = document.getElementsByTagName("svg"); if (bars && typeof(bars) != 'undefined' && bars...
echarts柱状图超过数值换颜色
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
08-06 9757
echarts柱状图超过数值换颜色 echarts树状图超过数值换颜色，在一个柱状图上根据值的多少显示不同的颜色。 效果图 预览地址 点击预览 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
c#实现无标题栏窗口的拖动
09-05
本篇文章将详细讲解如何在C#中实现这种无标题栏窗口的拖动以及其他基本操作。 首先，为了实现无标题栏窗口的拖动，我们需要处理窗体的鼠标事件。窗体的`FormBorderStyle`属性应设置为`None`，这会去除窗体的边框和...
Qt无标题窗口
05-21
在本文中，我们将深入探讨如何使用Qt框架创建一个无标题窗口，这在界面设计和自定义标题栏美化中非常有用。我们将关注`framelesswidget.cpp`、`main.cpp`、`framelesswidget.h`等核心文件，理解它们在实现无标题窗口...
C#创建无标题栏窗体
03-16
摘要:C#源码,菜单窗体,无标题栏窗体　C#创建无标题栏窗体源码，实际上是动态显示或隐藏窗体的标题栏，当隐藏的时候就类似窗体没有了标题栏，当显示标题栏的时候，鼠标按住标题栏即可拖动窗体，以前记得网友需要此...
Delphi实现拖动按钮移动无标题栏窗口
05-11
摘要:Delphi源码,界面编程,窗体拖动,无标题栏 无标题栏的窗体的拖动功能实现，Delphi添加一个可拖动窗体的按钮，通过对此按钮的控制可移动窗体，实现按住标题栏移动窗口的功能，无标题栏也就不能显示最大化、最小化...
VC去掉'无标题'字样的方法.zip
11-21
在使用Visual C++进行编程时，我们经常会在创建新的窗口或者对话框时默认看到标题栏显示为“无标题”。这可能会对用户界面的美观性和专业性造成一定的影响。本资料包提供了一种方法来帮助开发者去掉这个“无标题”...
echarts横向柱状图单个柱子设置警戒线，超过警戒线为渐变蓝色，没超过为渐变红色
xiongmouren_jy的博客
12-15 1896
echarts柱状图、设置独立警戒线、按需改变柱子颜色、柱子设置渐变色
帆软单元格里面左上角：红色是加了条件属性，蓝色是加了形态
江湖行骗老中医
03-19 3054
帆软单元格里面左上角：红色是加了条件属性，蓝色是加了形态； 条件属性：给报表的属性添加条件，当满足该条件时，对属性的属性值进行修改，从而达到改变报表样式的目的。 如实现奇偶变色： 形态：单元格的值分为实际值和显示值两部分。实际值是单元格实际的值，显示值是对实际值进行形态和样式设置后显示出来的值。 公式形态，实际上可理解为较为复杂一些的数据字典，用于转换实际值与显示值。 ...
Echars柱状图 柱子颜色根据值变化
DR1sxy的博客
06-17 790
Echars柱状图 柱子颜色根据值变化
FineReport（帆软）关于柱状图数据标签被遮挡的问题处理
LDR1109的博客
02-17 3523
FineReport（帆软）关于柱状图数据标签被遮挡的问题处理 问题场景： 如图，本应该显示的“12.3”成了“2.3”，没错，问题就是让你将柱状图上的2.3显示成为正确的“12.3”。 问题原因：谁都能看出这个2.3是被遮住了“1”。所以，问题就是怎么让这个1显示出来。 解决方案： 1、把柱状图整体左移（不可行，看下面的柱状图下的“白沟新城”，就能猜到）。 2、将字体改小一点，字体太大，导致超出显示空间（可行）。 实际操作： 1)、如上图
ECharts设置柱状图超出规定值变色以及阈值线
qq_51609497的博客
09-28 3868
ECharts设置柱状图超出规定值变色以及阈值线
帆软report 设置条件属性，值为负数标为红色功能时，不生效
m0_47943986的博客
01-11 1684
因为条件属性1设置的 - 符号没有设置颜色，且使用的不是字体属性，而是对单元格颜色进行设置。所以条件属性2的设置不生效，会对所有 - 符号进行红色标识，如下图所示。在设置负数为红色功能前，已经有一个条件属性，数据集获取的值为空或者为0时，转换成 - 符号。对条件属性1新增单元颜色，既可。
echarts实现柱状图超过平均值红色，未超过平均值部分灰色
weixin_43371136的博客
05-29 1328
效果如图 代码实现，就是计算差值，再利用service-type.bar.stack来叠加柱子 let chartsBar = echarts.init(this.$refs.chart_bar); let barLegend = [ { name: "预警发布", color: "#FF5B5B", }, { name: "预警反馈", co
帆软report
最新发布
2301_76621359的博客
09-18 6298
注意：上父格的设置，是受单元格限制的，也就是只有相邻的单元格并且是上下关系，才可以设置上下父格关系。如图我们是要用表格的地区去联动柱形图，我们选择表格的地区数据的单元格处的超链接，然后点击加号。多选框 和单选框的区别就在于，在设置多选框控件后要在多选框如下图处设置，返回类型。首先在红色处对我们的控件进行取名，然后在蓝色处对我们控件所要显示的值进行设置。设置参数的名字以及要传入的值，因为排序分升序、降序，这里我们设置两个动态参数。首先点击超链，在参数处，同理填写我们设置的参数，值选择公式 并填写三个$
Visual C++移除无标题窗口字样的技巧
资源摘要信息:"VC去掉'无标题'字样的方法.zip" 在使用Visual C++（简称VC++）进行Windows应用程序开发时，有时会发现新建的窗口默认标题栏显示为“无标题”，这通常是因为窗口的标题没有被正确设置。本压缩包提供的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值