html浅色背景,深色背景和浅色标签

深色背景和浅色标签

.bt{

width: 990px;

height: 600px;

}

var myChart=echarts.init(document.getElementById("main"));

//指定图表的配置和数据

var option={

backgroundColor: '#2c343c',

textStyle: {

color: 'rgba(255, 255, 255, 0.3)'

},

title:{

text:'某站点用户访问来源',

subtext:"阿里波特的魔法",

color: '#fff',

x:'center'

},

tooltip:{

trigger:"item",

formatter:"{a}

{b}:{c}({d}%)"

},

legend:{

orient:'vertical',

left:"left",

// color:"white",

// color: 'rgba(255, 255, 255, 0.3)',

data:["直接访问","邮件营销","联盟广告","视频广告","搜索引擎"]

},

series:[

{

name:"访问来源",

// roseType: 'angle',

type:"pie",

radius:"55%",

center:["50%","60%"],

//更改阴影，透明度，颜色，边框颜色，边框宽度

itemStyle: {

//normal选项是正常展示下的样式

// normal: {

// // 阴影的大小

// shadowBlur: 200,

// // 阴影水平方向上的偏移

// shadowOffsetX: 0,

// // 阴影垂直方向上的偏移

// shadowOffsetY: 0,

// // 阴影颜色

// shadowColor: 'rgba(0, 0, 0, 0.5)'

// }

//鼠标hover的时候的高亮样式

emphasis:{

shadowBlur:200,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

},

label: {

normal: {

textStyle: {

color: 'rgba(255, 255, 255, 0.3)'

}

}

},

labelLine: {

normal: {

lineStyle: {

color: 'rgba(255, 255, 255, 0.3)'

}

}

},

itemStyle: {

normal: {

shadowBlur: 200,

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

},

data:[

{value:"335",name:"直接访问"},

{value:310, name:'邮件营销'},

{value:234, name:'联盟广告'},

{value:135, name:'视频广告'},

{value:1548, name:'搜索引擎'}

]

}

]

//绑定图表

}

myChart.setOption(option);

效果图

image.png