echarts 半圆环,即仪表盘效果

思路有两个,一个是echart提供的仪表盘图形api,一个是用圆环图来画一个

<!DOCTYPE html >
< html >

< head >
< meta charset= "UTF-8" >
< title >ECharts练习 </ title >


<!-- <script src="https://cdn.bootcss.com/echarts/3.6.2/echarts.min.js"></script> -->

< script src= "https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js" > < / script >
</ head >

< body >
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
< div id= "main" style= "width: 600px;height:400px;" ></ div >
< div id= "main2" style= "width: 600px;height:400px;" ></ div >
< script type= "text/javascript" >
// 基于准备好的dom,初始化echarts实例
var myChart = echarts. init( document. getElementById( 'main'));
var myChart2 = echarts. init( document. getElementById( 'main2'));

// 指定图表的配置项和数据
var option = {
toolbox: { //可视化的工具箱
show: false,
feature: {
restore: { //重置
show: true
},
saveAsImage: { //保存图片
show: true
}
}
},
series: [{
name: '业务指标',
type: 'gauge',
startAngle: 180,
endAngle: 0,
radius: 50,
axisLine: {
show: true,
// 属性lineStyle控制线条样式
lineStyle: {
width: 15,
color:[[ 0.3, '#ff797a'],[ 0.5, '#999'],[ 1, '#a3db41']]
}
},
splitLine:{
show: false,
},
axisTick:{
show: false,
},
axisLabel:{
show: false,
},
pointer:{
length: '60px',
width: '3px',
},
detail: {
offsetCenter:[ 0, '-120%'],
fontSize: 14,
formatter: '现货白银{value}'
},
data: [
{ value: 45}
]
}]
};

// 指定图表的配置项和数据
var option2 = {
legend: {
show: false,
orient: 'vertical',
x: 'left',
data:[ '多', '平', '空', '__other']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: [ '50%', '70%'],
startAngle: 180,
avoidLabelOverlap: false,
label: {
normal: {
show: true,
position: 'top'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{ value: 335, name: '多'},
{ value: 310, name: '平'},
{ value: 234, name: '空'},
{ value: 879, name: '__other', itemStyle:{ normal:{ color: 'rgba(0,0,0,0)'}}}
]
}
]
};

// 使用刚指定的配置项和数据显示图表。
myChart. setOption( option);
myChart2. setOption( option2);
setInterval( function(){ //把option.series[0].data[0].value的值使用random()方法获取一个随机数
option. series[ 0]. data[ 0]. value = ( Math. random() * 100). toFixed( 2) - 0;
myChart. setOption( option, true);
}, 2000);
< / script >
</ body >

</ html >

效果如图所示


仪表盘中这部分的代码是用来给不同占比的模块指定颜色

axisLine: {
show: true,
// 属性lineStyle控制线条样式
lineStyle: {
width: 15,
color:[[ 0.3, '#ff797a'],[ 0.5, '#999'],[ 1, '#a3db41']]
}
},

圆环图则是直接通过data的值来改变占比。其中最后的那个数组是用来话下半部分,通过颜色设置为白色,来实现只显示半个圆环的效果

data:[
{ value: 335, name: '多'},
{ value: 310, name: '平'},
{ value: 234, name: '空'},
{ value: 879, name: '__other', itemStyle:{ normal:{ color: 'rgba(0,0,0,0)'}}}
]


大小通过 radius 来控制


已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页