效果图:操作人员要求 :我想看这个扇形图对应的 页面信息,给我加个链接跳转;原先的chart.js发现没有api,后来改用百度的echart.js
Event Console : 【hover】 seriesIndex : 1 dataIndex : 12
var nowColor="";
// 基于准备好的dom,初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a}
{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
toolbox: {
show : true,
feature : {
saveAsImage : {show: true}
}
},
calculable : false, //拖拽
series : [
{
name:'访问来源',
type:'pie', //这里指定类型
radius : '55%',
center: ['50%', '60%'],
itemStyle:{
normal: {
color: function(params) {//柱子颜色
var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ];
return colorList[params.dataIndex]
}
}
},
data:[
{
value:335,
name:'直接访问',
itemStyle: {
emphasis: {color: '#333'} //emphasis 鼠标移上去 区块 的颜色
}
},
{
value:310,
name:'邮件营销',
itemStyle: {
emphasis: {color: '#666'}
}
},
{
value:234,
name:'联盟广告',
itemStyle: {
emphasis: {color: '#999'}
}
},
{
value:135,
name:'视频广告',
itemStyle: {
emphasis: {color: '#ggg'}
}
},<