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);
