https://gallery.echartsjs.com/explore.html#sort=ranktimeframe=allauthor=all
- tooltip改变前面标注小圆点等的大小
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
textStyle: {
color: '#fff', // 文字颜色
fontSize: 30
},
formatter: (params) => {
let result = ''
params.forEach((item) => {
if (item.seriesName !== '曲线图') {
const dotHtml = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:20px;height:20px;background:${item.color}"></span>`
result += dotHtml + item.seriesName + ':' + item.data + '<br/>'
}
})
return result
}
},
-
柱形渐变
image.png
this.four.chart = this.$echarts.init(document.getElementById('yearAverage'))
this.four.data = [
{
value: 120,
name: 'CO2'
}, {
value: 200,
name: 'CO'
}, {
value: 150,
name: 'NO'
}, {
value: 200,
name: 'SO2'
}
]
const values = this.four.data.map(m => m.value)
const names = this.four.data.map(m => m.name)
const option = {
tooltip: {
show: true,
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0.5)',
textStyle: {
fontSize: 40
},
formatter: '{b}: {c}'
},
grid: {
top: '15%',
right: '1%',
bottom: '15%'
// containLabel: true
},
xAxis: {
type: 'category',
data: ['某地固废', '某地固废', '某地固废', '某地固废'],
axisLine: {
show: true,
lineStyle: {
color: '#6076AD',
width: 3
}
},
axisTick: {
show: false
},
axisLabel: {
color: 'rgba(112, 138, 204, 1)',
fontSize: 46,
margin: 40,
'interval': 0
}
},
yAxis: {
min: 0,
max: 250,
axisLine: {
show: false // 隐藏Y轴线段
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
color: 'rgba(112, 138, 204, 1)',
fontSize: 46,
margin: 20,
'interval': 0
}
},
series: [
{ // 为了显示底部字所以这里data为空数组
type: 'bar',
barWidth: 137,
z: 2,
data: [0, 0, 0, 0],
itemStyle: {
normal: {
color: 'transparent'
}
},
label: {
normal: {
color: '#fff',
show: true,
fontSize: 50,
// position: ['60%', '30%'],
// label 的position位置可以是top bottom left,right,也可以是固定值
// 在这里需要上下统一对齐,所以用固定值
position: 'top',
formatter: (data) => {
return names[data.dataIndex] ? names[data.dataIndex] : ''
}
}
}
},
{
type: 'bar',
barWidth: 137,
barGap: '-100%',
z: 1,
data: values,
itemStyle: {
normal: {
color: (params) => {
const colorList = [
['rgba(63,40,208,1)', 'rgba(2,130,222,1)'],
['rgba(252,149,1,1)', 'rgba(254,215,1,1)'],
['rgba(1,129,222,1)', 'rgba(103,224,227,1)'],
['rgba(254,65,27,1)', 'rgba(254,155,26,1)']
]
let index = params.dataIndex
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length
}
return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{ offset: 0, color: colorList[index][0] },
{ offset: 1, color: colorList[index][1] }
])
}
}
},
label: {
show: true,
fontSize: 50,
position: 'top',
color: '#0EFCFF',
formatter: (params) => {
return params.value
}
}
}
]
}
this.four.chart.setOption(option, true)
网友评论