信用网站建设,网站后台可视化编辑,网站制作前必须做的事情有哪些,百度网盘资源搜索引擎入口需求#xff1a;柱状图每根柱子都添加单独的警戒值#xff08;黄色线部分#xff09;#xff0c;效果图如下#xff1a; 实现方式我这有两种方案#xff0c;如下介绍。 方案1#xff1a;使用echarts的标线markLine实现#xff08;ps#xff1a;此种方案有弊端#x…需求柱状图每根柱子都添加单独的警戒值黄色线部分效果图如下 实现方式我这有两种方案如下介绍。 方案1使用echarts的标线markLine实现ps此种方案有弊端需要一一设置每个柱子的标线起始点不好控制不太建议使用 代码如下
body!-- 为 ECharts 准备一个定义了宽高的 DOM --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));// 警戒线let markLines []let markLineValue [10,20,30,40,30] //警戒线值let markLineItem [//第一条警戒线{yAxis: markLineValue[0],x: 60, //设置警戒线的起点偏移量lineStyle: { type: solid, color: yellow, width: 3 },label: { show: true, color: yellow, position: insideMiddleBottom, formatter: markLineValue[0] db },},{position: middle,yAxis: markLineValue[0],x: 110, //设置警戒线的终点偏移量lineStyle: { type: solid, color: yellow, width: 3 },label: { show: true, position: insideMiddleBottom },}]markLines.push(markLineItem);//设置每一条标线的起始偏移量根据实际情况自行改之for (let i 1; i markLineValue.length; i) {let item JSON.parse(JSON.stringify(markLines[i-1]))let xStart item[0].xlet xEnd item[1].xitem[0].x xStart 115item[0].yAxis markLineValue[i]item[0].label.formatter markLineValue[i] dbitem[1].x xEnd 115item[1].yAxis markLineValue[i]markLines.push(item)}var option {title: {text: ECharts 入门示例},tooltip: {show: true,trigger: axis},legend: {data: [销量]},xAxis: {data: [衬衫11111111111111111, 羊毛衫, 雪纺衫, 裤子, 高跟鞋],axisLabel: {// 文字省略formatter: function (value) {if (value.length 3) {return ${value.slice(0, 3)}...}return value}}},yAxis: {splitLine: { show: false }},grid: {containLabel: true,top: 30,left: 10,right: 10,bottom: 8},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10],barWidth: 50px, // 柱图宽度itemStyle: {normal: {label: {formatter: {c} db,show: true,position: top,textStyle: {color: blue}}}},//设置柱状图背景showBackground: true,backgroundStyle: {color: rgba(180, 180, 180, 0.2)},markLine: {symbol: none, //去掉警戒线最后面的箭头data:markLines}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);/script
/body方案2使用echarts的自定义图形custom实现此方案较方案一更实用 代码如下
body!-- 为 ECharts 准备一个定义了宽高的 DOM --div idmain stylewidth: 600px;height:400px;/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));let markLineValue [10,20,30,40,30] //警戒线值var option {title: {text: ECharts 入门示例},tooltip: {show: true,trigger: axis},legend: {data: [销量]},xAxis: {data: [衬衫11111111111111111, 羊毛衫, 雪纺衫, 裤子, 高跟鞋],axisLabel: {// 文字省略formatter: function (value) {if (value.length 3) {return ${value.slice(0, 3)}...}return value}}},yAxis: {splitLine: { show: false }},grid: {containLabel: true,top: 30,left: 10,right: 10,bottom: 8},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10],barWidth: 50px, // 柱图宽度itemStyle: {normal: {label: {formatter: {c} db,show: true,position: top,textStyle: {color: blue}}}},//设置柱状图背景showBackground: true,backgroundStyle: {color: rgba(180, 180, 180, 0.2)}},{type: custom,// 图形渲染逻辑函数renderItem: function renderItem(param, api) {//获取每根柱子中点的xy坐标var point api.coord([api.value(0), api.value(1)]);return {type: line,transition: [shape],shape: {x1: point[0] - 25, //每根柱子的起点x轴坐标我这的柱子宽度为50px起点就为point[0]-50/2x2: point[0] 25, //每根柱子的终点x轴坐标y1: point[1],y2: point[1]},style: api.style({stroke: api.visual(color),lineWidth: 3,})};},itemStyle: {borderType: soild, //可以控制警示线的样式normal: {label: {formatter: {c} db,show: true,position: bottom,textStyle: {color: yellow}},color: yellow,}},z: 999, //控制图形前后顺序数值小会被数值大的覆盖data: markLineValue //警示线的数值}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);/script
/body
