本文主要是介绍echarts进度，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
echarts图表集
let numdata=["I级",'II级','III级','IV级','V级','劣V级']
let pricedata=40
option = {backgroundColor: '#0f375f',title: {show: false,text: '',left: 'center',top: '30%',textStyle: {color: '#00D5FF',fontSize: 16,},},tooltip: {show: false},grid: {// show: true,top: '45%',left: 20,right: 20,height: 20,},xAxis: {// show: false,type: 'value',position: 'top',offset: '-50',//X 轴相对于默认位置的偏移splitNumber:5,// 设置x轴标签格式axisLabel: {// show: false,// formatter: '{value}级',// formatter: numdata+' 级',formatter: function (value, index) {// 根据需要自定义标签内容return numdata[index]; // 将所有字母转换为大写},lineStyle: {type: 'solid',color: '#CCCCCC',//左边线的颜色width: ''//坐标线的宽度},textStyle: {color: '#ccc',//坐标值得具体的颜色},// margin: 12,//刻度标签与轴线之间的距离。},axisTick: {// show: true,length: 7,// 刻度线长度lineStyle: {type: 'solid',color: '#CCCCCC',//左边线的颜色width: '1'//坐标线的宽度 }},axisLine: {show: false,},splitLine: {show: false,}},yAxis: {type: 'category',show: false,},color: ["rgb(255, 255, 255,0.8", "#FF2828", "#00D5FF"], //配置颜色series: [{name: '达成进度',type: 'bar',data: [100],// itemStyle: {// barBorderRadius: [100, 100, 100, 100],// },itemStyle: {barBorderRadius: [100, 100, 100, 100],borderRadius: [4, 4, 4, 4],color: {x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 0,color: 'rgba(3, 221, 172, 1)',},{offset: 1,color: 'rgba(224, 9, 8, 1)',},],},},barWidth: 20,showBackground: false,// backgroundStyle: {// color: 'rgba(180, 180, 180, 0.2)'// }},{name: '',type: 'line',symbol: 'rect',symbolSize: [6, 25], // 竖线宽高color:"rgb(255, 255, 255,0.8",data: [pricedata]},// {// name: '预计达成',// type: 'line',// symbol: 'rect',// symbolSize: [6, 25], // 竖线宽高// data: [60]// },// {// name: '总目标',// 背景// type: 'bar',// data: [100],// barGap: "-100%",// itemStyle: {// barBorderRadius: [100, 100, 100, 100],// color: 'rgba(180, 180, 180, 0.2)'// },// barWidth: 20,// }]
};
这篇关于echarts进度的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
