Echarts柱状图柱子上“画线”

需求背景

需要在柱状图上实现“画线”，作为其它数据的标识，图例

代码实现思路：“画线部分”由两部分组成，一部分透明柱子加线的部分

    let e5Data = {lastVal:[10,20,30,40,50],stationName:['name1','name2','name3','name4','name5'],breakevenEle:[6,30,42,40,10]};let lastVals = e5Data.lastVal;/*计算横线的显示高度，echarts图的y轴是自适应的，所以这里求出最大值，并按照比例计算出线的高度，这里可以自己调整*/let lineHeightData = eval("Math.max(" +lastVals.toString()+")") * 0.003;/*计算盈亏点线的高度*/let lineHeightDatas = [];lastVals.forEach(()=>{ lineHeightDatas.push(lineHeightData);});option = {grid: {borderWidth: 1,},legend: {/*这里是四个指标，（去年同期和本月是柱状，增减百分比是折线，平衡点是在柱状上的横线）*/data: ['去年同期','盈亏平衡点'],textStyle: {color: '#A7A7A7',},},yAxis: [/*横坐标*/{axisTick: {show: false},type: 'category',axisLine: {lineStyle: {type: 'solid',color: '#f8f8f8',//左边线的颜色width: '1.5'//坐标线的宽度},},axisLabel: {color: "#A7A7A7",},data: e5Data.stationName,axisPointer: {type: 'shadow'}},/*隐藏一个不显示的横坐标，用作横线的位置*/{type: 'category',axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false},splitArea: {show: false},splitLine: {show: false},data: []},],xAxis: [{type:'value',axisLine: {show: false},axisTick: {show: false},splitLine: {show: true,lineStyle: {color: ['#F8F8F8'],width: 1,type: 'solid'}},axisLabel: {color: ['#A7A7A7'],showMaxLabel: true,formatter: '{value}'}}],series: [{// name: '去年同期',/*基础数据*/type: 'bar',barMaxWidth: 20,itemStyle: {normal: {color: '#238ef8'}},data: e5Data.lastVal},{/* 这个bar是撑起横线的高度，并设置透明*/// name: "盈亏平衡点",stack: 'breakevenEleGroup', /* 盈亏点数据组，需要设置才能将两个bar堆积在一起*/type: 'bar',barMaxWidth: 20,yAxisIndex: 1,itemStyle: {normal: {color: 'rgba(0,0,0,0)'/* 设置bar为隐藏，撑起下面横线*/}},data: e5Data.breakevenEle},{/* 这个bar是横线的显示*/// name: "盈亏平衡点",stack: 'breakevenEleGroup', /* 盈亏点数据组，需要设置才能将两个bar堆积在一起*/type: 'bar',barMaxWidth: 40,yAxisIndex: 1,barGap: '0',itemStyle: {normal: {color: '#c6504d'}},data: lineHeightDatas}]}

Echarts柱状图柱子上“画线”相关推荐

html文字前画线代码,在div上画线
拖动要在div上拖放图标,我可以在div上放置图标并轻松拖动它们.但我不知道如何实现"Scribble"功能(例如,使用类似鼠标的笔在div上画线,就像在画布上一样). 下面是我 ...
Unity在Canvas上画线（Draw Line）实现
# 前言目前Unity官方提供的UI扩展包中包含了UILineRenderer组件,本篇实现与UILineRenderer实现一致,主要讲解其基本使用与实现过程.不想看的同学可以直接下载官方扩展包. ...
ArcGIS API for JavaScript根据两个点坐标在地图上画线
ArcGIS API for JavaScript根据两个点坐标在地图上画线比如说a(xxxx,xxxxx),b(xxxx,xxxxx).利用这两个点画一条线 var polyline = new ...
QT 实现Label上画线
实现功能:Label上有一张图片,用画笔在图像上画线. 一.头文件添加以下函数和变量 QMouseEvent * mouseEvent;void mousePressEvent(QMouseEvent ...
cv2 在图片上画线
import cv2 # capture=cv2.VideoCapture(0) img=cv2.imread('../../img/street.jpg',1) cv2.line(img,(0,0) ...
echarts柱状图柱子上方数据标签显示
echarts柱状图柱子上方数据标签显示如图开启显示,也可以修改样式.
echarts 柱状图柱子改成圆柱体_玩转ECharts之实现“顶端装饰”
前言玩转ECharts系列,主要为大家讲解我们基于ECharts如何实现企业级大屏项目中较为常用的各种"奇奇怪怪"的图表,接下来我们将通过几篇文章从基础图表开始为大家详细讲解实现 ...
OpenCV在图像上画线、矩形、椭圆、多边形、填充的多边形、圆、显示文字
OpenCV在图像上随机画直线.椭圆.多边形.圆.显示文字代码如下: /*** @file Drawing_2.cpp* @brief Simple sample code*/#include &l ...
如何使用Graphics2D在一张图片上画线（包括箭头）
有这样一个需求,在一张图片上画几条线并保存,如图所示: 已知各个点的x,y坐标,坐标范围是[0.000,1],即将横纵方向分成1000份. 我们可以使用java.awt.Graphics2D的库来实现 ...

Echarts柱状图柱子上“画线”

需求背景

Echarts柱状图柱子上“画线”相关推荐

最新文章

热门文章