多y轴K线图echarts candlestick配置项内容和展示

k线图

      var k = [["LG",5499.0,6499.0,5499.0,6499.0,5999.0,2,72.0],["TCL",769.0,2499.0,769.0,2499.0,1694.71,7,8461.0],["七星",638.0,638.0,638.0,638.0,638.0,1,55.0],["万宝",558.0,1049.0,558.0,1049.0,790.8,5,1447.0],["三星",2399.0,6499.0,2399.0,6499.0,4161.5,8,1291.0],["上菱",759.0,1699.0,759.0,1699.0,1131.5,4,241.0],["先科",399.0,549.0,399.0,549.0,482.0,3,532.0],["创维",849.0,2299.0,849.0,2299.0,1540.0,9,3887.0],["华日电器",769.0,999.0,769.0,999.0,884.0,2,120.0],["博世",2490.0,12830.0,2490.0,12830.0,5995.0,6,388.0],["卡萨帝",6999.0,8999.0,6999.0,8999.0,7999.0,2,126.0],["双鹿",599.0,1029.0,599.0,1029.0,796.5,4,1169.0],["哈士奇",996.0,8799.0,996.0,8799.0,2254.22,9,758.0],["奥克斯",699.0,2599.0,699.0,2599.0,1649.0,2,309.0],["奥马",499.0,2999.0,499.0,2999.0,1913.29,7,2679.0],["容声",958.0,5699.0,958.0,5699.0,2649.9,20,21814.0],["富信",339.0,439.0,339.0,439.0,382.333,3,810.0],["尊贵",2299.0,2988.0,2299.0,2988.0,2695.33,3,323.0],["小天鹅",1099.0,1099.0,1099.0,1099.0,1099.0,1,114.0],["康佳",698.0,2598.0,698.0,2598.0,1486.38,16,13779.0],["德努希",1698.0,3799.0,1698.0,3799.0,2965.33,3,125.0],["志高",438.0,639.0,438.0,639.0,538.5,2,119.0],["扎努西・伊莱克斯",1149.0,1149.0,1149.0,1149.0,1149.0,1,71.0],["扬佳",518.0,638.0,518.0,638.0,558.0,3,467.0],["新飞",799.0,2999.0,799.0,2999.0,1726.18,11,2014.0],["晶弘",749.0,3999.0,749.0,3999.0,2365.67,9,1648.0],["松下",3490.0,7590.0,3490.0,7590.0,4710.0,5,830.0],["樱花",538.0,699.0,538.0,699.0,598.143,7,2595.0],["欧立",419.0,599.0,419.0,599.0,509.0,2,290.0],["海信",559.0,4299.0,559.0,4299.0,2380.18,17,6639.0],["海尔",649.0,7399.0,649.0,7399.0,2816.61,38,41402.0],["海浪",508.0,658.0,508.0,658.0,583.0,2,209.0],["熊猫",538.0,1180.0,538.0,1180.0,766.833,6,6301.0],["索伊",589.0,589.0,589.0,589.0,589.0,1,285.0],["统帅",719.0,3399.0,719.0,3399.0,2001.5,8,4989.0],["美的",699.0,3999.0,699.0,3999.0,1974.44,18,23296.0],["美菱",799.0,4299.0,799.0,4299.0,2227.57,14,8440.0],["荣事达",1299.0,1299.0,1299.0,1299.0,1299.0,1,77.0],["西门子",2398.0,16030.0,2398.0,16030.0,5372.11,28,6388.0],["长虹",749.0,1149.0,749.0,1149.0,949.0,2,443.0],["韩上",488.0,999.0,488.0,999.0,816.8,5,6730.0],["韩电",638.0,1999.0,638.0,1999.0,1094.0,9,918.0]]
function splitData(rawData) {
        var values = [];
        for (var i = 0; i < rawData.length; i++) {
            values.push(rawData[i])
        }
        return {
            values: values
        };
    }
    var data0 = splitData(k)
var option = {
    title: {
        text: 'attrResult',
        left: 16,
        textStyle: {
            fontSize: 16
        }
    },
     tooltip: {
        trigger: 'axis',
        // axisPointer: {type: 'cross'}
    },
    legend: {
        data: ['价格区间', '平均价格', '商品数', '30天总销量']
    },
    dataZoom: [{
            type: 'inside',
            start: 0,
            end: 50
        },
        {
            show: true,
            type: 'slider',
            y: '90%',
            start: 0,
            end: 50
        }
    ],
    grid: {
        left: '10%',
        right: '10%',
        bottom: '15%'
    },
    xAxis: {
        type: 'category',
        scale: true,
        boundaryGap: false,
        axisLine: {
            onZero: false
        },
        splitLine: {
            show: false
        },
        splitNumber: 20,
        data:["LG","TCL","七星","万宝","三星","上菱","先科","创维","华日电器","博世","卡萨帝","双鹿","哈士奇","奥克斯","奥马","容声","富信","尊贵","小天鹅","康佳","德努希","志高","扎努西・伊莱克斯","扬佳","新飞","晶弘","松下","樱花","欧立","海信","海尔","海浪","熊猫","索伊","统帅","美的","美菱","荣事达","西门子","长虹","韩上","韩电"],
        // data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
    },
    yAxis: [{
            type: 'value',
            name: '价格',
            position: 'left',
            axisLabel: {
                formatter: '{value}'
            },
        },
        {
            type: 'value',
            name: '商品数',
            position: 'right',
            axisLabel: {
                formatter: '{value}'
            },

        },
        {
            type: 'value',
            name: '           30天总销量',
            position: 'right',
            offset: 50,
            axisLabel: {
                formatter: '{value} '
            },
        }

    ],
    series: [{
            name: '价格区间',
            type: 'candlestick',
            data:data0.values,
            barWidth: 10,
            markPoint: {
                data: [

                    {
                        name: 'highest value',
                        type: 'max',
                        valueDim: 'highest'
                    },
                    {
                        name: 'lowest value',
                        type: 'min',
                        valueDim: 'lowest'
                    },
                    {
                        name: 'average value on close',
                        type: 'average',
                        valueDim: 'open'
                    }
                ]
            }
        },
        {
            name: '平均价格',
            type: 'line',
            smooth: true,
            data: [1200, 1100, 1250, 1405, 1220, 165, 1202, 2200, 1082, 1991, 1934, 1950],
            markPoint : {
                data : [
                    {type : 'max', name : '最大值'},
                     {type : 'min', name : '最小值'}
                ]
            },
            lineStyle: {
                normal: {
                    opacity: 0.5
                }
            }
        },
        {
            name: '商品数',
            type: 'line',
            data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122],
            markPoint : {
                data : [
                    {type : 'max', name : '最大值'},
                     {type : 'min', name : '最小值'}
                ]
            },
            yAxisIndex: 1,
            smooth: true,
            lineStyle: {
                normal: {
                    opacity: 0.5
                }
            }
        },
        {
            name: '30天总销量',
            type: 'line',
            data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122],
            markPoint : {
                data : [
                    {type : 'max', name : '最大值'},
                     {type : 'min', name : '最小值'}
                ]
            },
            yAxisIndex: 2,
            smooth: true,
            lineStyle: {
                normal: {
                    opacity: 0.5
                }
            }
        }

    ]
};