series: [
{
name: "温度",
type: "line",
yAxisIndex: 1,
smooth: true, //曲线
step: 'start', //阶梯折线
tooltip: {
valueFormatter: function (value) {
return value + " °C";
},
},
data: [8, 19, 7, 19, 12, 7, 18, 16, 6, 12, 16, 10, 6, 20, 6, 13],
},
],
series: [
{
name: "Precipitation(2015)",
type: "line",
xAxisIndex: 1,
smooth: true,
itemStyle: {
normal: {
lineStyle: {
width: 9, //线条粗细
},
},
},
emphasis: {
focus: "series",
},
data: [
3000, 2800, 2700, 2800, 2500, 2400, 2200, 2000, 3000, 4000,
5000, 6200, 5700, 5800, 5000, 5300, 4200, 3000, 1000,
],
},
],
setRealTimeChargeVoltElec() {
const realTimeChargeVoltElec = this.$refs.realTimeChargeVoltElec;
if (realTimeChargeVoltElec) {
const thisRealTimeChargeVoltElec = this.$echarts.init(realTimeChargeVoltElec);
const option = {
title: {
text: 'Beijing AQI',
left: '1%'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '5%',
right: '15%',
bottom: '20%'
},
xAxis: {
data: [
'15:05',
'15:10',
'15:15',
'15:20',
'15:25',
'15:30',
'15:35',
'15:40',
'15:45',
'15:50',
'15:55',
]
},
yAxis: {},
toolbox: {
right: 10,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
dataZoom: [ //dataZoom控制图表下方可缩放是否显示
{
startValue: '2014-06-01'
},
{
type: 'inside'
}
],
visualMap: {
top: 50,
right: 10,
pieces: [
{
gt: 0,
lte: 50,
color: '#93CE07'
},
{
gt: 50,
lte: 100,
color: '#FBDB0F'
},
{
gt: 100,
lte: 150,
color: '#FC7D02'
},
{
gt: 150,
lte: 200,
color: '#FD0100'
},
{
gt: 200,
lte: 300,
color: '#AA069F'
},
{
gt: 300,
color: '#AC3B2A'
}
],
outOfRange: {
color: '#999'
}
},
series: {
name: 'Beijing AQI',
type: 'line',
data: [13, 121, 212, 11, 21, 212, 121, 121, 232, 31, 132, 4654, 58],
markLine: {
silent: true,
lineStyle: {
color: '#333'
},
data: [
{
yAxis: 50
},
{
yAxis: 100
},
{
yAxis: 150
},
{
yAxis: 200
},
{
yAxis: 300
}
]
}
}
}
thisRealTimeChargeVoltElec.setOption(option);
window.addEventListener("resize", function () {
thisRealTimeChargeVoltElec.resize();
});
}
},