option = {
// 给每个扇形设置颜色 直接写在全局下 用[] 全局调色板
// color: [
// 'red', 'pink', 'blue', 'green', 'yellow'
// ],
// 如果只设置一种颜色 即只有明暗度的变化，也可以通过 visualMap 组件将数值的大小映射到明暗度
visualMap: {
show: false, // 若为true 则左下角会出现一个颜色变化框 = visualMap 组件
min: 80,
max: 600,
inRange: {
// 明暗度的范围
colorLightness: [0, 1]
}
},
// 图例 标记的位置
legend: {
orient: 'vertical',
data: ['视频', '联盟','邮件','直接','搜索'],
left: 'left'
},
// 鼠标hover 上去显示的内容
tooltip : {
trigger: 'item',
// {a} 是指 series 里面的name值 {b} 是指 series.data里面的name值 {c}是指 series.data里面的value 值
formatter: "{a} <br/>{b} : {c} "
},
// 设置主体的数据
series : [
{
// roseType: 'angle', 设置为 南丁格尔图
name: '哈哈哈',
type: 'pie',
radius: '55%', // 饼图的大小
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:100, name:'搜索引擎'}
],
// 文字样式
label: {
normal: {
textStyle: {
color: 'rgba(0, 0, 0, 0.8)'
}
}
},
// 指示线的样式 (视觉引导线)
labelLine: {
normal: {
// 写在normal 内才有效
length: 50,
lineStyle: {
color: 'rgba(255, 255, 255)'
}
},
},
// 设置图形元素的颜色
// 也可以在这里 设置扇形的颜色 阴影
itemStyle: {
normal: {
// 设置扇形颜色 这里只能设置一种颜色
color: '#c23531',
// 阴影部分大小
shadowBlur: 200,
//阴影颜色
shadowColor: 'rgba(0, 0, 0, 0.5)',
label: {
// 标签文字 的位置
position: 'inner',
textStyle: {
fontSize: 20, // 文字大小
fontWeight: 200 // 文字粗细
}
}
}
}
}
]
};
补充图片~
刚刚入前端的坑 小白一枚 只是想在简书里面 做笔记 方便以后查看 如果有什么错误不足的地方 欢迎指出~
大家多多交流 才会进步嘛~
