var echarts03 = echarts.init(document.getElementById('echarts3'))
var echarts03_option = {
series: [
{
center: [ '50%', '50%' ],
progress:{
show: true,
roundCap: false, //是否圆角
width: 40, // 宽度
itemStyle: {
opacity: 1,
//右/下/左/上
color: new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(11,37,66,0)'
},
{
offset: 0.5,
color: 'rgba(0,80,255,0.5)'
},
{
offset: 1,
color: 'rgba(0,138,255,0.9)'
}]
)
}
},
type: "gauge",
center: ["50%", "60%"],
radius: "95%", //仪表大小
// startAngle: 200, //开始角度
// endAngle: -20, //结束角度
min:'0',
max:'100',
data:[{value:70}],
axisLine: {
show: false,
lineStyle: { // 属性lineStyle控制线条样式
// color: [
// [
// ],
// ],
// shadowColor:"#ccc",
// shadowBlur:25,
width: 0
}
},
splitLine: {
show: true,
length: 17,
lineStyle: {
width: 2,
color: '#fff', // 用颜色渐变函数不起作用
},
},
axisTick: {
show: true,
lineStyle: {
color: '#fff', // 用颜色渐变函数不起作用
width: 2,
},
length: 8,
},
axisLabel: {
formatter: function (value) {
return value + '%';
},
distance:5,
color: 'rgba(255, 255, 255, 1)',
fontSize: 16,
fontFamily: 'DIN-Bold'
},
detail: { // 仪表盘详情,用于显示数据。
show: false, // 是否显示详情。
valueAnimation: true, // 是否开启标签的数字动画。
formatter: '{value} km/h', // 格式化函数或者字符串
color: 'auto', // 文本颜色,默认取数值所在的区间的颜色。
offsetCenter: [ 0, '40%' ], // 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
// 字体相关样式
},
pointer: { //指针样式
length: '75%',
icon:'triangle',
width:24,
offsetCenter: [ 0, 0],
itemStyle: { // 指针样式。{ color , borderColor , borderWidth , borderType , borderDashOffset , borderCap , borderJoin , borderMiterLimit , shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY , opacity }
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[{
offset: 0.6,
color: 'rgba(100,200,228,0)'
},
{
offset: 0.6,
color: 'rgba(255,255,255,1)'
},
{
offset: 1,
color: 'rgba(255,255,255,1)'
}]
),
}
},
},
]
};;
echarts03_option && echarts03.setOption(echarts03_option)
自己总结的echarts仪表盘
最新推荐文章于 2024-08-06 16:13:57 发布