echart水滴_echarts水球图编写

// 前提条件 需要引入这个插件

// 代码

let Chart = echarts.init(document.getElementById('Chart'));

let option = {

title: { // 水球图标题样式

text: '日',

left: 'center',

bottom: '10%',

textStyle: {

color: '#ffffff',

fontSize: 14

}

},

tooltip: {

show: true

},

series: [

{

name: '日',

type: 'liquidFill', // 水球图样式

center: ['50%', '45%'], // 水球图位置

amplitude: 3, // 波浪波动起伏大小

waveLength: '100%', // 波浪长度

color: ['#3399cc'], // 波浪颜色

backgroundStyle: {

color: '#ffffff', // 内部球背景颜色

borderWidth: 2, // 内部球边框宽度

borderColor: '#e3e3e3' // 内部球边框颜色

},

label:{

normal:{

formatter: '234', // 内部文字内容

textStyle: {

color: '#ffffff', // 在波浪上方时的文字颜色

insideColor: '#ffffff', // 在波浪下方时的文字颜色

fontSize: 10 // 文字大小

}

}

},

outline: {

borderDistance: 0, // 外边框与内边框间的距离

itemStyle: {

borderWidth: 5, // 外边框的宽度

borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 1代表上面 // 外边框的颜色(渐变色)

offset: 0,

color: '#1b6491'

}, {

offset: 1,

color: '#3399cc'

}]),

}

},

data: [0.6] // 水球的注满度 60%

}

]

};

Chart.setOption(option);

这个水球内部的背景，没办法调成纯白色，设置成白色背景还是发灰，不知哪位会调