双均线图echarts 折线配置项内容和展示

      app.title = '双均线图';

var colors = ['#1144AA', '#FFA700'];
var names = ['基金净值', 'BTC价格'];
var leftData = [4.42, 2.23, 2.22, 3.80, 3.36, 2.64, 3.36, 4.40, 3.46, 2.93, 2.38, 2.23, 3.87, 4.20, 3.58, 2.53, 4.15, 3.38, 4.18, 3.66, 2.43, 2.75, 2.78, 3.44, 2.71, 3.05, 2.40, 3.98, 2.00, 3.44, 2.43, 2.56, 2.68, 2.10, 4.14, 3.03, 2.07, 2.98, 2.34, 2.59, 3.83, 3.59, 3.92, 2.31, 2.41, 2.12, 2.23, 3.85];
var rightData1 = [7345, 7493, 7517, 7346, 7540, 7506, 7403, 7479, 7352, 7451, 7490, 7409, 7510, 7480, 7393, 7394, 7436, 7487, 7527, 7340, 7477, 7463, 7535, 7498, 7473, 7412, 7487, 7368, 7508, 7425, 7416, 7473, 7433, 7360, 7479, 7398, 7390, 7448, 7379, 7513, 7492, 7411, 7480, 7538, 7523, 7526, 7495, 7399];
var rightData2 = [];
for (var i = 0; i < rightData1.length; i++) {
    rightData2.push(rightData1[i] + Math.random() * 900);
}

var leftMin = 0;
var leftMax = 5;
var rightMin = 4000;
var rightMax = 9000;


option = {
    color: colors,
    grid: {
        left: 50,
        right: 50,
        bottom: 30,
        top: 50,
    },
    legend: {
        data: names
    },
    xAxis: [{
        type: 'category',
        axisTick: {
            alignWithLabel: true
        },
        data: ['00:00', '', '01:00', '', '02:00', '', '03:00', '', '04:00', '', '05:00', '', '06:00', '', '07:00', '', '08:00', '', '09:00', '', '10:00', '', '11:00', '', '12:00', '', '13:00', '', '14:00', '', '15:00', '', '16:00', '', '17:00', '17:30', '18:00', '', '19:00', '', '20:00', '', '21:00', '', '22:00', '', '23:00', ''],
        axisLine: {
            lineStyle: {
                color: "#b5b5b5"
            }
        },
        axisLabel: {
            show: true,
            textStyle: {
                fontFamily: "PingFang-SC-Medium",
                fontSize: 12,
                color: "#666666"
            }
        }
    }],
    yAxis: [{
            type: 'value',
            name: names[0],
            min: leftMin,
            max: leftMax,
            position: 'left',
            axisLine: {
                lineStyle: {
                    color: colors[1]
                }
            }
        },
        {
            id: 1,
            type: 'value',
            name: names[1],
            min: rightMin,
            max: rightMax,
            position: 'right',
            axisLine: {
                lineStyle: {
                    color: colors[0]
                }
            }
        },

    ],
    series: [{
            name: names[0],
            type: 'line',
            data: leftData,
            itemStyle: {
                normal: {
                    color: colors[1],
                },
            },
            markPoint: {
                itemStyle: {
                    color: '#FFFFFF00'
                },
                data: [{
                        name: 'highest value',
                        type: 'max',
                        valueDim: 'y',
                        symbolOffset: [0, 15]
                    },
                    {
                        name: 'lowest value',
                        type: 'min',
                        valueDim: 'y',
                        symbolOffset: [0, 35]
                    },
                ],
            },
            markArea: {
                itemStyle: {
                    color: '#FF00006D'
                },
                data: [
                    [{
                            name: '12时至14时的数据',
                            coord: [24, 4.5]//左上点的坐标
                        },
                        {
                            coord: [28, 1.5]//右下点的坐标
                        }
                    ]
                ]
            }
        },
        {
            name: names[1],
            data: rightData1,
            type: 'line',
            yAxisIndex: 1,
            lineStyle: {
                normal: {
                    width: 1,
                    color: colors[0]
                }
            },
            markPoint: {
                data: [{
                        name: 'highest value',
                        type: 'max',
                        valueDim: 'y'
                    },
                    {
                        name: 'lowest value',
                        type: 'min',
                        valueDim: 'y'
                    },
                ],
            }

        },
        {
            name: names[1],
            data: rightData2,
            type: 'line',
            yAxisIndex: 1,
            lineStyle: {
                normal: {
                    width: 1,
                    color: colors[0]
                }
            }
        },
    ]
};