0
点赞
收藏
分享

微信扫一扫

Echarts实战案例代码:饼图pie之南丁格尔玫瑰图rose实现代码

_铁马冰河_ 2022-06-29 阅读 57

 

var myChart = echarts.init(document.getElementById('echarts_2'));
var option = {
color: ["#a71a4f", "#bc1540", "#c71b1b", "#d93824", "#ce4018", "#d15122", "#e7741b", "#e58b3d", "#e59524", "#dc9e31", "#da9c2d", "#d2b130", "#bbd337", "#8cc13f", "#67b52d", "#53b440", "#48af54", "#479c7f", "#48a698", "#57868c"],
tooltip: {
trigger: 'item',
formatter: "{b} <br/>{c}万元"
},
legend: {
left: '3%',
orient: 'vertical',
type: "scroll",
data: ["建设路街道", "长兴路街道", "长社路街道", "金桥路街道", "和尚桥镇", "坡胡镇", "后河镇", "石固镇", "老城镇", "南席镇", "大周镇", "董村镇", "古桥镇", "石象镇", "佛耳湖镇", "增福镇"],
icon: 'circle',
textStyle: {
color: '#fff',
}
},
calculable: true,
series: [{
name: '街道',
type: 'pie',
//startAngle: 0,
//clockwise: false,
radius: ["10%", "80%"],
center: ['55%', '50%'],
roseType: 'area',
avoidLabelOverlap: false,
label: {
show: true,
position: 'inside',
formatter: '{c}万元',
textStyle: {
fontWeight: 'bold',
fontFamily: 'Microsoft YaHei',
color: '#FAFAFA',
fontSize: 8
},
},
labelLine: {
show: true,
length: 0,
length2: 2,
},
data: [
{value: 600, name: '建设路街道'},
{value: 1100, name: '长兴路街道'},
{value: 1200, name: '长社路街道'},
{value: 1300, name: '金桥路街道'},
{value: 1250, name: '和尚桥镇'},
{value: 400, name: "坡胡镇"},
{value: 680, name: "后河镇"},
{value: 150, name: "老城镇"},
{value: 470, name: "石固镇"},
{value: 780, name: "南席镇"},
{value: 680, name: "大周镇"},
{value: 880, name: "董村镇"},
{value: 1201, name: "古桥镇"},
{value: 540, name: "石象镇"},
{value: 960, name: "佛耳湖镇"},
{value: 1280, name: "增福镇"}
].sort(function (a, b) { return b.value - a.value;}),
}]
};

myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});


举报

相关推荐

0 条评论