echarts 半圆环，即仪表盘效果

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

DOCTYPE html >

< html >

< head >

< meta charset= "UTF-8" >

< title >ECharts练习 title >

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

head >

< body >

< 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 来控制