window.onload = () => {
var myChart = echarts.init(document.getElementById('main'));
// var myChart = echarts.init(document.getElementById('main'),'dark'); // 第二个参数是主题
myChart.setOption({
backgroundColor : '#2c343c', // 全局背景色
visualMap : { // 效果跟实例上并不一致,可能版本变更
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0 , 1]
},
},
// textStyle : { // 全局的文本样式
// color : 'rgba(255,255,255,1)',
// },
// labelLine : { // 线条颜色
// lineStyle : {
// color : 'rgba(255,255,255,1)',
// }
// },
// itemStyle: { // 扇形样式
// color: '#c23531', // 扇形颜色
// shadowBlur : 200,
// shadowColor : 'rgba(0,0,0,0.5)',
// },
series : [
{
name : '访问来源',
type : 'pie', // 饼图
radius : '55%',
roseType : 'angle', // 南丁格尔图
// 此系列的调色盘
color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
data : [
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'},
],
label : { // 每个文本
normal : {
textStyle : {
color: 'rgba(255,255,255,1)',
}
}
},
labelLine : { // 每个线条
normal: {
lineStyle: {
color: 'rgba(255,255,255,1)',
}
}
},
// itemStyle: { // 每个扇形
// normal : {
// color: '#c23531',
// shadowBlur: 200,
// shadowColor: 'rgba(0,0,0,0.5)',
// },
// },
// 高亮样式。
emphasis: {
itemStyle: {
// 高亮时点的颜色。
color: 'blue'
},
label: {
show: true,
// 高亮时标签的文字。
formatter: 'This is a emphasis label.'
}
},
}
]
})
}
<div id="main" style="width: 600px;height: 400px;"></div>