echarts绘制进度条

效果图

代码

const datalist = [780, 600, 770, 770, 770];
const namelist = ['水(m³)', '电(Kwh)', '蒸汽(t)', '天然气(m³)', '压缩空气(m³)'];
option = {grid: {top: '0',left: '1%',right: '10%',bottom: '0'},xAxis: {axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false},splitLine: {show: false}},yAxis: [{data: ['水', '电', '蒸汽','天然气','压缩空气'],inverse: true,splitLine: {show: false},axisTick: {show: false},axisLine: {show: false},axisLabel: {color: '#fff',fontSize: 18}},{type: 'category',axisTick: { show: false }, // 不显示刻度线axisLabel: {color: '#000',},axisLine: {show: false,},inverse: true,}],series: [{name: '进度条',yAxisIndex: 0,type: 'pictorialBar',symbol: 'rect', // 长方形symbolRepeat: 'fixed',symbolMargin: '2', // 缝隙symbolClip: true,symbolSize: ['3', '16'],barCategoryGap: 5,label: {show: true,position: [0,50],fontSize: 14,formatter: (name) => namelist[name.dataIndex]},zlevel: 1, //  zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面data: [{value: 780,itemStyle: {normal: {color: '#047CFF'}}},{value: 600,itemStyle: {normal: {color: '#EE2800'}}},{value: 770,itemStyle: {normal: {color: '#FFAD27'}}},{value: 770,itemStyle: {normal: {color: '#42CEFF'}}},{value: 770,itemStyle: {normal: {color: '#BF0AFF'}}}]},{name: '进度条背景',type: 'bar',yAxisIndex: 1,barGap: '-100%', // 不同系列的柱间距离，为百分比。barCategoryGap: 5,barWidth: 20,left: '50',data: [1000, 1000, 1000, 1000, 1000],color: 'rgba(152, 144, 238, 0.12)', // 柱条颜色itemStyle: {normal: {color: function(params) {var colorList = ['rgba(4,124,255,0.4)','rgba(242,104,0,0.4)','rgb(255,224,117,0.4)','    rgb(79,163,255,0.4)','rgb(191,10,255,0.4)'];return colorList[params.dataIndex]},barBorderRadius: [10]//设置圆角}},label: {normal: {show: true, // 是否显示进度条上方的百分比formatter: (series) => datalist[series.dataIndex]+'/1000',position: [913,-20],textStyle: {color: '#000', // 进度条上方百分比字体颜色fontSize: 14}}}}]
};

echarts绘制进度条相关推荐

echarts渐变进度条
echarts渐变进度条展示情况如下图相关代码 var data = ['数据一','数据二',"数据三","数据四","数据五",&q ...
JS canvas绘制进度条
JS canvas绘制进度条在前端开发中,我比较喜欢Cavans画布,通过Cavans可以绘制自己想要的东西,在早之前,我通过Canvas播放视频,绘制图片,绘制banner图等,复杂点可以用来做数 ...
Mstar的Monitor方案OSD 菜单制作(六)——绘制进度条
绘制进度条绘制进度条和我前面讲的绘制icon 是一样的.我们可以拆分一下,把进度条的每一个进度,都看作一个自己需要单独绘制的icon.那就好处理了.我们直接来个带圆角的,难的.例如如下: 我们可以看 ...
Echarts环形进度条
最终效果图如下: 注意和基础折线图不同,进度条需要额外定义2个变量: var value = 66;//当前进度 var maxvalue = 100;//进度条最大值完整代码如下: <!DO ...
echarts带进度条的仪表盘
带阈值更改颜色 echartUtil.getNetGaugeOption = function (data, value, name) { var name = name;//title名称 var ...
echarts 弧形进度条配置
源码带注释: option = { series: [ { type: 'gauge', min: 0,//最大值 max: 100, //最小值 ...
echarts绘制多条折线图
效果首先引入echarts可以看这篇文章哦~ 如何在项目中使用echarts 1.定义一个div 这里的height就是y轴的高度了~ <div style="width: 100% ...
echarts 饼图进度条_echarts饼图
在echarts的官网上我们可以看到很多的官方实例,很多酷炫的模型都已经设计好了,不过这些模型的数据一般都是在实例中写死,平时在我们项目里可没有这些死数据,如何从后台获取需要的数据,并且把这些数据拼装 ...
echarts指针进度条刻度调整_指针式流量开关
流量开关属于电工电器行业开关类目,可对各种液体流量进行监测和发讯控制.被广泛应用于管道中流量的监测及各种大.中.小型设备的冷却.润滑系统中.这就不得不说下它独特的流线型结构设计,准确稳定其性能了,具体 ...
【Python工具】——绘制进度条，你学废了么？
文章目录

echarts绘制进度条

echarts绘制进度条相关推荐

最新文章

热门文章