echarts多个折线图的使用

一、如图所示

二、页面引入echarts

//引入 echarts 主模块
import * as echarts from 'echarts/lib/echarts';
//引入折线图、柱状图
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/bar';
//引入提示框组件、标题组件、工具箱组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/legend';

三、设置标签

<div id="echartReal" style="width: 100%; height: 300px"></div>

四、代码封装

echartRealQuery(obj) {
    console.log("过去24小时实况数据", obj)
    let objWinds = obj.windS;
    let objWindd = obj.windD;
    let newWindData = [];
    let deg = null;
    for(let i = 0; i < objWinds.length; i++){
        if(objWindd[i] == "北风"){
            deg = 0;
        }else if(objWindd[i] == "东北风"){
            deg = 45;
        }else if(objWindd[i] == "东风"){
            deg = 90;
        }else if(objWindd[i] == "东南风"){
            deg = 135;
        }else if(objWindd[i] == "南风"){
            deg = 180;
        }else if(objWindd[i] == "西南风"){
            deg = 225;
        }else if(objWindd[i] == "西风"){
            deg = 270;
        }else if(objWindd[i] == "西北风"){
            deg = 315;
        }
        newWindData.push({
            value: objWinds[i],
            symbolRotate: 180 - deg,
            name: objWindd[i]
        });
    }
	echarts.init(document.getElementById('echartReal')).setOption({
        tooltip: {
            trigger: "axis",
			axisPointer: {
				type: "cross",
				crossStyle: {
					color: "#999"
				}
			},
			formatter: params => {
				let rain = params[0].value !== null && params[0].value !== undefined ? params[0].value + "mm" : '';
				let temp = params[1].value !== null && params[1].value !== undefined ? params[1].value + "℃" : '';
                let rhu = params[2].value !== null && params[2].value !== undefined ? params[2].value + "%" : '';
                let vis = "";
                let wind = "";
                let wd = "";
                let objHour = obj.hour;
                let objVis = obj.vis;
                for(let i = 0; i < objHour.length; i++){
                    if(objHour[i] == params[0].axisValue){
                         vis = objVis[i] !== null && objVis[i] !== undefined ? objVis[i] + "km" : '';
                         wind = newWindData[i].value !== null && newWindData[i].value !== undefined ? newWindData[i].value + "级" : '';
                         wd = newWindData[i].name !== null && newWindData[i].name !== undefined ? newWindData[i].name : '';
                    }
                }
				return [
					`${params[0].axisValue}时<br>
					降水：${rain}<br>
					气温：${temp}<br>
                    湿度：${rhu}<br>
                    能见度：${vis}<br>
					大风：${wind}<br>
					风向：${wd}`
				];
			}
        },
                grid:{
                    left:60,
                    right: 300
                },
                xAxis: {
                    type: "category",
                    data: obj.hour,
                    axisPointer: {
						type: "shadow"
					}
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '降水(mm)',
                        position: 'left',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#49d025"
                            }
                        },
                        max: function(value) {
                            const splitNumber = 5;
                            const isMax = value.max % splitNumber === 0;
                            if (isMax) {
                                return value.max + value.max / splitNumber;
                            }else{
                                return value.max + value.max / 2;
                            }
                        },
                        axisLabel: {                   
                            formatter:function (value, index) {           
                                return value.toFixed(2);      
                            }
                        },
                        splitLine: { //网格线
                            show: true
                        }
                    },
                    {
                        type: 'value',
                        name: '气温(℃)',
                        position: 'right',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#F40403"
                            }
                        },
                        offset: 0,
                        max: function(value) {
                            const splitNumber = 5;
                            const isMax = value.max % splitNumber === 0;
                            if (isMax) {
                                return value.max + value.max / splitNumber;
                            }else{
                                return value.max + value.max / 2;
                            }
                        },
                        axisLabel: {                   
                            formatter:function (value, index) {           
                                return value.toFixed(2);      
                            }
                        },
                        splitLine: { //网格线
                            show: false
                        }
                    },
                    {
                        type: 'value',
                        name: '湿度(%)',
                        position: 'right',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#128aed"
                            }
                        },
                        offset: 80,
                        // max: function(value) {
                        //     const splitNumber = 5;
                        //     const isMax = value.max % splitNumber === 0;
                        //     if (isMax) {
                        //         return value.max + value.max / splitNumber;
                        //     }else{
                        //         return value.max + value.max / 2;
                        //     }
                        // },
                        max: 100,
                        axisLabel: {                   
                            formatter:function (value, index) {           
                                return value.toFixed(2);      
                            }
                        },
                        splitLine: { //网格线
                            show: false
                        }
                    },
                    {
                        type: 'value',
                        name: '能见度(km)',
                        position: 'right',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#FF7902"
                            }
                        },
                        offset: 160,
                        max: function(value) {
                            const splitNumber = 5;
                            const isMax = value.max % splitNumber === 0;
                            if (isMax) {
                                return value.max + value.max / splitNumber;
                            }else{
                                return value.max + value.max / 2;
                            }
                        },
                        axisLabel: {                   
                            formatter:function (value, index) {           
                                return value.toFixed(2);      
                            }
                        },
                        splitLine: { //网格线
                            show: false
                        }
                    },
                    {
                        type: 'value',
                        name: '大风(级)',
                        position: 'right',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#C002FF"
                            }
                        },
                        offset: 240,
                        max: function(value) {
                            const splitNumber = 5;
                            const isMax = value.max % splitNumber === 0;
                            if (isMax) {
                                return value.max + value.max / splitNumber;
                            }else{
                                return value.max + value.max / 2;
                            }
                        },
                        axisLabel: {                   
                            formatter:function (value, index) {           
                                return value.toFixed(1);      
                            }
                        },
                        splitLine: { //网格线
                            show: false
                        },
                    },
                ],
                series: [
                    //降水
                    {
                        type: 'line',
                        name: "降水",
                        yAxisIndex: 0,
                        data: obj.rain,
                        itemStyle : {
                            normal : {
                                color:'#49d025',
                                lineStyle:{
                                    color:'#49d025'
                                }
                            }
                        },
                    },
                    //气温
                    {
                        type: 'line',
                        name: "气温",
                        yAxisIndex: 1,
                        data: obj.temp,
                        itemStyle : {
                            normal : {
                                color:'#F40403',
                                lineStyle:{
                                    color:'#F40403'
                                }
                            }
                        },
                    },
                    //湿度
                    {
                        type: 'line',
                        name: "湿度",
                        yAxisIndex: 2,
                        data: obj.rhu,
                        itemStyle : {
                            normal : {
                                color:'#128aed',
                                lineStyle:{
                                    color:'#128aed'
                                }
                            }
                        },
                    },
                    //能见度
                    {
                        type: 'line',
                        name: "能见度",
                        yAxisIndex: 3,
                        data: obj.vis,
                        itemStyle : {
                            normal : {
                                color:'#FF7902',
                                lineStyle:{
                                    color:'#FF7902'
                                }
                            }
                        },
                    },
                    //大风
                    {
                        type: 'line',
                        name: "大风",
                        yAxisIndex: 4,
                        data: newWindData,
                        itemStyle : {
                            normal : {
                                color:'#C002FF',
                                lineStyle:{
                                    color:'#C002FF'
                                }
                            }
                        },
                        symbol: `image://${this.symbolUrl}`,//arrow
                        symbolOffset: [0, 0],
                        symbolSize: 26,
                    },
                ]
            });
        }