代码改变世界

echarts入门基础，画一个饼状图

2016-12-14 22:38  muamaker  阅读(1017)  评论(0)  编辑  收藏  举报

注意：一定要自己引入echarts库

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#canvas-main{
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="canvas-main">

</div>
</body>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript">
/*echart数据报表*/
function echarCreate() {
var allData = {
"lists":[{"name":"星期一","value":"456"},
{"name":"星期二","value":"321"},
{"name":"星期三","value":"226"},
{"name":"星期四","value":"200"}
],
"status":"1"
}
var fn = {};
fn.init = function () {
fn.drawEchart();
};
fn.drawEchart = function () {

if(allData.status){
var option = fn.setOptions();
var myChart = echarts.init(document.getElementById('canvas-main'));
myChart.setOption(option);
}

};

/*设置好echarts的option参数*/
fn.setOptions = function () {
var data = [];
for (var i = 0; i < allData.lists.length; i++){ 
data.push(fn.setData(allData.lists[i].value, allData.lists[i].name));
};
var option = {
tooltip: {/*鼠标跟随效果*/
trigger: 'item',
formatter: "{b}: {d}%" 
},
series: [
{
name: '',/*数据名称*/
type: 'pie',
radius: ['31.25%', '60%'], /*相对容器的大小*/
data: data
}
]
};
return option;
};

/*设置echar的样式，主要是改变颜色
value：option中data数据的value
name:option中data数据的name
* normal:正常状态下的样式
* emphasis:鼠标移上的样式
* */
fn.setData = function (value, name, normal, emphasis) {
var Style = {
value: value,
name: name,
itemStyle: { /*设置扇形的样式*/
normal: {
color: normal
},
emphasis: {
color: emphasis
}
},
labelLine: {
normal: {
lineStyle: { /*设置线的样式*/

}
},
emphasis: {
lineStyle: { /*设置线的样式*/

}
}
},
label: {
normal: {
textStyle: {/*文本设置*/

}
},
emphasis: {
textStyle: {

}
}
}
}
return Style;
};


return fn;
}

echarCreate().init();
</script>
</html>