echarts图表中饼状图的指示线和百分比
echarts图表中饼状图的指示线和百分比
ECharts是由百度打造的一个纯javascript的图标库,很好用。
下载地址:http://echarts.baidu.com/download.html
1.echarts文件的引入,在javascript块引入,src按需修改
<script type="text/javascript" src="./res/js/echarts.js"></script>
2.基于准备好的dom,初始化echarts
js: var myChart = echarts.init(document.getElementById('main'));
html: <div id="main" style="width:900px;height:500px;"></div>
3.指定图表的配置项和数据
var option = {
color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4',], //饼状图颜色数组
title: {
text: '',
text: '',
subtext: '',
x: 'center'
},
tooltip: { //鼠标移入,显示气泡
trigger: 'item',
formatter: function (p) {
console.log(p); //选择自己喜欢的显示
return str;
}
},
legend: {
show: false
},
series: [
{
name: '',
type: 'pie', //饼状图
radius: '85%', //大小
center: ['45%', '50%'], //显示位置
data: [], //数据,我们ajax获取
},
{
name: '',
type: 'pie',
radius: '85%',
center: ['45%', '50%'],
data: [],
itemStyle: {
normal: {
label: { //此处为指示线文字
show: true,
position: 'inner', //标签的位置
textStyle: {
fontWeight: 200,
fontSize: 10 //文字的字体大小
},
formatter: function (p) { //指示线对应文字
var data = p.data;
return data;
}
},
labelLine: { //指示线状态
show: true,
smooth: 0.2,
length: 10,
length2: 20
}
}
},
}
]
};
4.ajax动态获取数据设置参数
$.ajax({
type: 'get',
url: URL,
data: data,
dataType: "json",
success: function (res) { //这里只设置月份
for (var i = 0; i < res.length; i++) {
//此处遍历元素
}
maindata.push(); //保存数组
}
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
series: [
{
data: maindata, //此处传入两遍数组为关键处,百分比和指示线文字为两张饼图,叠加在一起显示效果
},
{
data: maindata,
}
]
});
}
});
为大家提供更多更全面的知识点,共同进步!