ercharts 曲线图

 

传入数据x轴数据axisData,标题数据legendData，图表数据seriesData，单位unit。

function getC5option(axisData,legendData, seriesData,unit,) {
                var option = {
                    tooltip: {//鼠标指向图表时显示的数据
                        trigger: 'axis',
                        position: function(pt) {
                            return [pt[0], '10%'];
                        }
                    },
                    title: {
                        show: false
                    },
                    legend: {//右上角的标题，需与seriesData的name对应
                           data:legendData,
                           left:'right',
                        //bottom:'10%',
                        itemWidth:10,//图例的宽度
                        itemHeight:10,//图例的高度
                        textStyle:{//图例文字的样式
                            color:'#ccc',
                            fontSize:10
                        },
                    },
                    xAxis: {//x轴
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                width: 1,
                                color: '#4784af',
                            },
                        },
                        axisLabel: {
                            show: true,
                            align: 'top',
                            textStyle: {
                                color: '#b8c5df',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        data: axisData
                    },
                    yAxis: {//y轴
                        name: unit ? '(' + unit + ')' : '',
                        nameTextStyle: {
                            color: '#b8c5df',
                        },
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                type: 'solid',
                                color: 'rgba(111,199,255,0.35)',
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#b8c5df',
                            },
                            inside: true,
                            margin: -10,
                        },
                        axisTick: {
                            show: false
                        },
                    },
                    grid: {
                        top: 10,
                        bottom: 50,
                    },
                    series: seriesData
                };
                return option;
            }
            //当月班组充电量
            var legendData1 = ['营业额(元)','电量(kwh)'];
            var seriesData1 = [{
                        name: "营业额(元)",
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        sampling: 'average',
                        itemStyle: {
                            normal: {
                                color: 'rgba(42,215,131,0.85)'
                            }
                        },

                        label: {
                            color: '#b8c5df'
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(42,215,131,0.1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(42,215,131,0)'
                                }])

                            }
                        },
                        data: [100, 300, 800, 1300, 1500, 2000, 2600, 2900, 3000, 2800,2700,2500]
                    },
                    {
                        name: "电量(kwh)",
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        sampling: 'average',
                        itemStyle: {
                            normal: {
                                color: 'rgba(0,255,255,0.85)'
                            }
                        },

                        label: {
                            color: '#b8c5df'
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0,255,255,0.1)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,255,255,0)'
                                }])

                            }
                        },
                        data: [1000, 1200, 1500, 2000, 2200, 2500, 3000, 3500, 3000, 2000,1900,1800]
                    }
            ];
            
          
            var c5 = echarts.init(document.querySelector('#C5'));
            c5.setOption(getC5option([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],legendData1,seriesData1,'Kwh',));