正文
echarts饼图
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1、添加点击事件并跳转到不同的页面
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist/'
}
});
// 使用
var option;(设置全局变量)
require(
[
'echarts',
'echarts/chart/pie' // 使用柱状图就加载pie模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('chartsmain1'));
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.CLICK, eConsole);
option = {
title : {
text: '最常用社交媒体占比',
x:'center'
},
legend: {
orient : 'vertical',
x : 'left',
y:'bottom',
data:['QQ','微博','微信']
},
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
clickable : true,
center: ['50%','60%'],
data:[
{
value:335,
name:'QQ',
itemStyle:{
normal:{
color:'rgb(255,192,0)'
}
}
},
{
value:310,
name:'微博',
itemStyle:{
normal:{
color:'rgb(1,175,80)'
}
}
},
{
value:234,
name:'微信',
itemStyle:{
normal:{
color:'rgb(122,48,158)'
}
}
}
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
});
function eConsole(option) {
//获得option的值做出判断，添加链接
if(option.name=="QQ"){
window.open("http://www.runoob.com/")
}else if(option.name=="微博"){
window.open("http://www.weibo.com/")
}else{
window.open("http://www.baidu.com/")
}
}
注意：加红色的部分为饼图添加点击事件所需的代码
2、饼图颜色和折线图的线条颜色一一对应应当保持一致并不依赖默认颜色
饼图
data:[
{
value:335,
name:'QQ',
itemStyle:{
normal:{
color:'rgb(255,192,0)'
}
}
},
{
value:310,
name:'微博',
itemStyle:{
normal:{
color:'rgb(1,175,80)'
}
}
},
{
value:234,
name:'微信',
itemStyle:{
normal:{
color:'rgb(122,48,158)'
}
}
}
]
红色的部分是修改默认颜色为自定义颜色
折线
series : [
{
name:'QQ',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210],
itemStyle:{
normal:{
color:'rgb(255,192,0)',
}
}
},
{
name:'微信',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310],
itemStyle:{
normal:{
color:'rgb(122,48,158)',
}
}
},
{
name:'微博',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410],
itemStyle:{
normal:{
color:'rgb(1,175,80)',
}
}
}
]
效果图
