最近项目中用到图表展示,由于项目中之前已经用到echarts,于是就在echarts中找了一个跟UI界面比较像的拿来使用。
直接上代码说项目吧。
1、先引用相关js文件,可以在script脚本中直接引用。
2、然后写相关后台接口方法,拼接成所需数据结构可供直接返回使用。
3、在JS中调用,参考实例的方法进行修改。
var initPieData = function (xAxisData, data) {
var myChart = echarts.init(document.getElementById('main'), 'macarons');
option = {
tooltip: {
trigger: 'item',
formatter: "{b}: {c} ({d}%)"
},
legend: {
x: 'center',
y: 'bottom',
//data: xAxisData //由于节点较多的时候 会出现遮挡现象 故暂时屏蔽
},
series: [
{
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center',
},
emphasis: {
show: true,
textStyle: {
fontSize: '25',
fontWeight: 'bold'
},
formatter:'{d}%'
}
},
labelLine: {
normal: {
show: false
}
},
data: data
}
]
};
myChart.setOption(option);
}
4、注意事项。
1)、关于主题的修改,可在官网下载你想要的主题JS,并在调用的时候引用并传参即可(如下所示)。
主题下载地址:http://echarts.baidu.com/download-theme.html
2)、默认在圆环中间展示的节点项,但是我想要展示的是百分比,所以就修改展示内容即可(红框中所示)。
好了 ,以上总结完毕,展示最终效果图。