echarts横向柱状图单个柱子设置警戒线，超过警戒线为渐变蓝色，没超过为渐变红色

效果图如下

话不多说，直接上代码。

<!-- eslint-disable no-constant-condition -->
<template><v-chart class="chart" :option="option" :autoresize="true" />
</template><script>
import "echarts/lib/component/markLine";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import {TitleComponent,TooltipComponent,LegendComponent,GridComponent,
} from "echarts/components";
import ECharts, { THEME_KEY } from "vue-echarts";use([CanvasRenderer,BarChart,TitleComponent,TooltipComponent,LegendComponent,GridComponent,
]);export default {name: "chart-8",props: {chartData: {type: Array,default: null,},},components: {"v-chart": ECharts,},provide: {[THEME_KEY]: "light",},data() {return {option: null,};},watch: {chartData: {handler(val) {// console.log(val,'chartDatachartDatachartData');const zdValueData = val?.map((item) => item.zdValue+'吨'); //最大值const mcNameData = val?.map((item) => item.mcName); //材料名称const currValueData = val?.map((item) => item.currValue); //实际库存量const warnValueData = val?.map((item) => item.warnValue); //危险预警值// console.log(zdValueData,mcNameData,currValueData,warnValueData);const warnLine1 = warnValueData[0];const warnLine2 = warnValueData[1];const warnLine3 = warnValueData[2];const warnLine4 = warnValueData[3];const warnLine5 = warnValueData[4];this.$data.option = {tooltip: {trigger: "axis",axisPointer: {type: "shadow",},},legend: {textStyle: { color: "#fff" },y: "20px",},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true,},xAxis: {type: "value",boundaryGap: [0, 0.01],splitLine: {show: false,},axisLabel: {//y轴上带的单位formatter: "",},},yAxis: [{type: "category",data: mcNameData,axisTick: {show: false,},axisLine: {show: false,},axisLabel: {//y轴上带的单位color: "#fff",},},{type: "category",data: zdValueData,axisTick: {show: false,},axisLine: {show: false,},axisLabel: {//y轴上带的单位color: "#fff",},},],series: [{name: "实际库存量",type: "bar",data: currValueData,barWidth: 15,itemStyle: {normal: {label: {show: true, //开启显示position: "inside", //在上方显示textStyle: {//数值样式color: "#fff",},},color: function (params) {if (currValueData[params.dataIndex] >= warnValueData[params.dataIndex]) {return {type: "linear",x: 0, //右y: 0, //下x2: 1, //左y2: 0, //上colorStops: [{offset: 0,color: "#0067ae", // 0% 处的颜色},{offset: 1,color: "#00ccfd", // 100% 处的颜色},],};} else {return {type: "linear",x: 0, //右y: 0, //下x2: 1, //左y2: 0, //上colorStops: [{offset: 0,color: "#594d74", // 0% 处的颜色},{offset: 1,color: "#f56e4a", // 100% 处的颜色},],};}},},},showBackground: true,markLine: {symbol: "none",name: "xx",lineStyle: {width: "2",},data: [[//第一条警戒线{xAxis: warnLine5,y: 70, //设置警戒线的起点偏移量lineStyle: { type: "solid", color: "red" },label: { show: true, position: "middle" },},{position: "middle",xAxis: warnLine5,y: 85, //设置警戒线的终点偏移量lineStyle: { type: "solid", color: "red" },label: { show: true, position: "end" },},],[//第二条警戒线{xAxis: warnLine4,y: 104, //设置警戒线的起点偏移量lineStyle: { type: "solid", color: "red" },label: { show: true, position: "middle" },},{position: "middle",xAxis: warnLine4,y: 119, //设置警戒线的终点偏移量lineStyle: { type: "solid", color: "red" },label: { show: true, position: "end" },},],[//第三条警戒线{xAxis: warnLine3,y: 138, //设置警戒线的起点偏移量lineStyle: { type: "solid", color: "red" },label: { show: true, position: "middle" },},{position: "middle",xAxis: warnLine3,y: 153, //设置警戒线的终点偏移量lineStyle: { type: "solid", color: "red" },label: { show: true, position: "end" },},],[//第四条警戒线{xAxis: warnLine2,y: 172, //设置警戒线的起点偏移量lineStyle: { type: "solid", color: "red" },label: { show: true, position: "middle" },},{position: "middle",xAxis: warnLine2,y: 187, //设置警戒线的终点偏移量lineStyle: { type: "solid", color: "red" },label: { show: true, position: "end" },},],[//第四条警戒线{xAxis: warnLine1,y: 206, //设置警戒线的起点偏移量lineStyle: { type: "solid", color: "red" },label: { show: true, position: "middle" },},{position: "middle",xAxis: warnLine1,y: 221, //设置警戒线的终点偏移量lineStyle: { type: "solid", color: "red" },label: { show: true, position: "end" },},],],},},],};},immediate: true,deep: true,},},
};
</script><style scoped>
</style>

echarts横向柱状图单个柱子设置警戒线，超过警戒线为渐变蓝色，没超过为渐变红色相关推荐

echarts给柱状图某个柱子设置颜色
1.引用官网的例子,运行后是默认的颜色. 2.给柱状图整体设置颜色 var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {d ...
echarts——横向柱状图
功能描述全屏横向柱状图从小到大排序,每次显示5条,每3秒切换循环显示鼠标移入停止切换,鼠标移出继续切换柱状图组件源码 <template><div class="w ...
Echarts横向柱状图：叠加、堆叠(stack)以及点击事件
html <div class="box" id="echartModel" style="background-color: #191e3e; ...
echarts 锥形柱状图--修改柱子形状
想要把柱状修改为锥形,其中使用series中的symbol修改 series: [ { data: [120, 200, 150, 300, 20, 40], type: 'pictorialBar' ...
echarts 不规则柱状图设置
echarts 不规则柱状图设置 pictorialBar和bar的应用 1.长方形渐变柱子应用type='bar'的普通柱状图配置: 2.上面的圆形则需要用type='pictorialBar'的不 ...
echarts（横向柱状图和grid）
场景最近在做知识图谱的时候,右侧弹窗需要有数据统计功能,大概UI如下图,当时想到的是横向柱状图来实现,目前的效果与UI的不同是后面统计的数量显示的位置.后来经其他前端同事启发,他是用进度条来实现的, ...
Echarts-实现3D柱状图显示，并单个柱子变色
效果如下: <!DOCTYPE html> <html><head><meta charset="utf-8" /><titl ...
v-charts 设置柱状图每个柱子颜色
v-charts 设置柱状图每个柱子颜色(Vue) 页面部分 <ve-histogram :extend="chartExtend" :data="regionDa ...
echarts rich设置动态图片/动态数据；echarts 人均收入柱状图 window系统显示不出国旗；echarts动态rich
一.echarts 人均收入柱状图window系统显示不出国旗问题分析 1.如下图所示:该柱状图在window下面只显示emoji 字符,能不能转化完全看系统支不支持 2.图中的国家标识是以emoji ...

echarts横向柱状图单个柱子设置警戒线，超过警戒线为渐变蓝色，没超过为渐变红色

echarts横向柱状图单个柱子设置警戒线，超过警戒线为渐变蓝色，没超过为渐变红色相关推荐

最新文章

热门文章