zoukankan      html  css  js  c++  java
  • Echarts 实现双Y轴柱图、堆积图、折线图混合图

    效果:

     option配置:

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            data: ['苹果', '华为', '小米', 'OPPO', 'VIVO']
        },
        xAxis: [
            {
                type: 'category',
                data: ['4月','5月','6月','7月','8月'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '水量',
                interval: 50,
                axisLabel: {
                    formatter: '{value} ml'
                },
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                }
            },
            {
                type: 'value',
                name: '温度',
                interval: 5,
                axisLabel: {
                    formatter: '{value} °C'
                },
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                }
            }
        ],
        series: [
            {
                name: '苹果',
                type: 'bar',
                data: [135.6, 162.2, 32.6, 20.0, 6.4]
            },
            {
                name: '华为',
                type: 'line',
                yAxisIndex: 1,
                data: [2.0, 2.2, 3.3, 4.5, 6.3]
            },
            {
                name: '小米',
                type: 'bar',
                stack: '广告',
                xAxisIndex: 0,
                yAxisIndex: 0,
                emphasis: {
                    focus: 'series'
                },
                data: [13, 23, 19, 44, 135.6]
            },
            {
                name: 'OPPO',
                type: 'bar',
                stack: '广告',
                xAxisIndex: 0,
                yAxisIndex: 0,
                emphasis: {
                    focus: 'series'
                },
                data: [21, 20, 61, 42, 22]
            },
            {
                name: 'VIVO',
                type: 'bar',
                stack: '广告',
                xAxisIndex: 0,
                yAxisIndex: 0,
                emphasis: {
                    focus: 'series'
                },
                data: [19, 26, 42, 14, 31]
            }
        ]
    };
  • 相关阅读:
    私有IP地址
    Python随手记
    Selenium+Python环境搭建
    FTP- Download, upload, Delete & find files
    初学Selenium遇上的问题
    automate sap遇上的一些问题
    LR常见问题
    服务器资源监控指标
    QTP场景恢复函数
    导出excel用例
  • 原文地址:https://www.cnblogs.com/art-poet/p/14432467.html
Copyright © 2011-2022 走看看