![南丁格爾玫瑰圖效果]()
1、echarts中的圖藉助於canvas原理進行實現
2.在html中創建一塊畫布
<div id="main" style="width:600px;height: 400px;">
3.在js中先獲取畫布元素，初始化echarts;
var myChart = echarts.init(document.getElementById("main"));
4.設置一個變量，裏面配置圖表的相關信息。
var option = {
//title圖的標題，副標題，以及位置設置
title : {
text: '南丁格爾玫瑰圖',
subtext: '純屬虛構',
x:'center'
},
tooltip : {
trigger: 'item',
//提示框的數據樣式顯示
formatter:"{a}<br/>佔比名是{b}：{c} ({d}%) "
},
//圖例相關內容的說明
legend: {
x : 'left',
y : 'center',
//圖例的排列默認屬性是：水平或垂直,默認是：水平
orient:'vertical',
data:['北京','上海','廣州','福建','廈門','武漢','青島','南京']
},
/*
* toolbox爲工具欄；提供導出圖片，數據轉化，動態數據等信息
* 保存圖片
*/
toolbox: {
show : true,//是否顯示工具欄組件
feature : {
//mark : {show: true},
//顯示圖像所提供的數據
dataView : {show: true, readOnly: false},
//啓用的動態數據類型
magicType : {
show: true,
type: ['pie', 'funnel']
},
//配置項還原
restore : {show: true},
//保存爲圖片
saveAsImage : {show: true}
}
},
calculable : true,//手柄拖拽調整選中的範圍
series : [
{
name:'半徑模式',
type:'pie',
radius : [20, 110],
center : ['25%', 200],
roseType : 'radius',
width: '40%',// for funnel
max: 40, // for funnel
itemStyle : {
//普通樣式設置
normal : {
label : {
show : false
},
labelLine : {
show : false
}
},
//高亮樣式設置
emphasis : {
label : {
show : true
},
labelLine : {
show : true
}
}
},
data:[
{value:10, name:'北京'},
{value:5, name:'上海'},
{value:15, name:'廣州'},
{value:25, name:'福建'},
{value:20, name:'廈門'},
{value:35, name:'武漢'},
{value:30, name:'青島'},
{value:40, name:'南京'}
],
color: ['#7EC0EE', '#FF9F7F', '#FFD700', '#C9C9C9', '#E066FF', '#C0FF3E','#BDA29A','#C23531']
},
{
name:'面積模式',
type:'pie',
radius : [30, 110],
center : ['75%', 200],
roseType : 'area',
x: '50%', // for funnel
max: 40, // for funnel
sort : 'ascending', // for funnel
data:[
{value:10, name:'北京'},
{value:5, name:'上海'},
{value:15, name:'廣州'},
{value:25, name:'福建'},
{value:20, name:'廈門'},
{value:35, name:'武漢'},
{value:30, name:'青島'},
{value:40, name:'南京'}
]
}
]
};
5.給myChart設置該屬性
myChart.setOption(option);
