echarts 三环圆环_Echarts饼图之圆环图

需求：

页面上加载一个echarts环形图。

来由：

身为一个Java开发人员，被项目经理拉过来写页面，心里也是很苦逼~可是也没办法，只能硬着头皮干啊，直接上代码

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('t_2'));

// 指定图表的配置项和数据

var option = {

title: {

text: '工业园区预警总数',

subtext: '178658',

x: 'center',

y: 'center',

textStyle: {

fontWeight: 'normal',

fontSize: 15,

color: '#00eeff'

}, // 标题

subtextStyle: {

fontWeight: 'normal',

fontSize: 17,

color: '#00eeff'

}, // 副标题

},

tooltip: {

trigger: 'item',

formatter: "{a}
{b} : {c} ({d}%)"

},

color: ['#fcee21', '#fbb03b', '#22b573', '#2e3192', '#0071bc', '#29abe2', '#00ffff'],

series: [{

name: '访问来源',

type: 'pie',

radius: ['42%', '53%'], // 半径

center: ['50%', '51%'], // 位置

label: {

normal: {

formatter: '{b}\n {c}',

},

},

data: [{

value: 44,

name: '水上派出所'

},

{

value: 48,

name: '湖东派出所'

},

{

value: 51,

name: '湖西派出所'

},

{

value: 36,

name: '东沙湖派出所'

},

{

value: 10,

name: '永安桥派出所'

},

{

value: 36,

name: '斜塘派出所'

},

{

value: 20,

name: '水下派出所'

}

],

itemStyle: {

emphasis: {

shadowBlur: 10,

shadowOffsetX: 0,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

}

}]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

效果

圆环图.png