想知道是有哪些可以覆盖这种的吗,还是我少了什么东西,设置了visualMap但是没有反映,看了很多其他博客也都是这样设置的。
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
title: {
text: '数据统计',
left: 'right'
},
// color: ["#6ABD79"],
legend: {
data: ['温度'],
top: 20,
left: 'center',
backgroundColor: '#dbdbdb',
z: 100
},
grid: {
left: 0,//折线图距离左边距
right: 50,//折线图距离右边距
top: 30,//折线图距离上边距
bottom: 10,
containLabel: true
},
tooltip: {
show: true,
trigger: 'axis'
},
xAxis: {
name: '时间',
type: 'category',
boundaryGap: false,
data: ['0','3', '6', '9', '12', '15', '18', '21', '24'],
axisTick: {
alignWithLabel:false
},
axisLabel: {
//横坐标最后的标注颜色变深
show: true,
textStyle: {
color: '#000',
fontSize: '14',
}
},
show: true
},
yAxis: {
name: '温度',
x: 'center',
type: 'value',
splitLine: {
lineStyle: {
type: 'solid'
}
},
//设置y轴字体样式
axisLabel: {
show: true,
textStyle: {
color: '#000',
fontSize: '14',
}
},
show: true
},
series: [{
type: 'line',
smooth: true,
data: [23,34,35,33,34,33,31,19,10,20],
}],
visualMap: {
type: 'piecewise',
show: false,
dimension: 0,
seriesIndex:0, //第一部分数据
pieces: [{
lte: 10,
color: 'orange'
}, {
gt: 10,
lte: 20,
color: 'red'
}, {
gt: 20,
lte: 30,
color: '#6ABD79'
}, {
gt: 30,
color: 'pink'
}]
}
};
chart.setOption(option);
return chart;
}