zoukankan      html  css  js  c++  java
  • echarts3.0 本期累计堆叠

    @{
        ViewBag.Title = "barlj";
    }
    
    <h2>barlj</h2>
    
    <div id="main" style=" 1000px;height:800px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'), 'shine', {  800 });
    
        option = {
            title: {
                text: 'ECharts2 vs ECharts1',
                subtext: 'Chrome下测试数据'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    var s = '';
                    s += params[0].name + '<br />';
                    var l = params.length;
                    for (var i = 0; i < l; i++) {
                        s += params[i].seriesName + ': ' + params[i].value + '<br />';
                    }
                    return s;
                }
            },
            legend: {
                //中间空字符为换行???
                data: ['本期收入', '同期收入', '', '本期累计', '同期累计'],
                selected: {
                    '本期收入': true,
                    '同期收入': true,
                    '本期累计': true,
                    '同期累计': true
    
                }
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            //拖动项,3.0不支持
            calculable: true,
            //grid: { y: 70, y2: 30, x2: 20 },
            xAxis: [
                {
                    type: 'category',
                    data: ['Line', 'Bar', 'Scatter', 'K', 'Map']
                },
                {
                    type: 'category',
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: { show: false },
                    splitArea: { show: false },
                    splitLine: { show: false },
                    data: ['Line', 'Bar', 'Scatter', 'K', 'Map']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: { formatter: '{value} ms' }
                }
            ],
            series: [
                {
                    name: '本期收入',
                    type: 'bar',
                    itemStyle: { normal: { color: 'rgba(193,35,43,1)', label: { show: true, position: 'top' } } },
                    data: [40, 155, 95, 75, 0]
                },
                {
                    name: '同期收入',
                    type: 'bar',
                    itemStyle: { normal: { color: 'rgba(181,195,52,1)', label: { show: true, position: 'top', textStyle: { color: '#27727B' } } } },
                    data: [100, 200, 105, 100, 156]
                },
                {
                    name: '本期累计',
                    type: 'bar',
                    xAxisIndex: 1,
                    itemStyle: { normal: { color: 'rgba(193,35,43,0.5)', label: { show: true, position: 'top', formatter: function (p) { return p.value > 0 ? (p.value /*+ '
    '*/) : ''; } } } },
                    data: [96, 224, 164, 124, 0]
                },
                {
                    name: '同期累计',
                    type: 'bar',
                    xAxisIndex: 1,
                    itemStyle: { normal: { color: 'rgba(181,195,52,0.5)', label: { show: true, position: 'top' } } },
                    data: [491, 283, 389, 955, 347]
                }
            ]
        };
    
        myChart.on('legendselectchanged', function (params) {
            if (params.name == '本期收入') {
                if (params.selected['本期收入']) {
                    option.legend.selected['本期收入'] = true;
                    option.legend.selected['同期收入'] = true;
                }
                else {
                    option.legend.selected['本期收入'] = false;
                    option.legend.selected['同期收入'] = false;
                }
            }
            if (params.name == '同期收入') {
                if (params.selected['同期收入']) {
                    option.legend.selected['本期收入'] = true;
                    option.legend.selected['同期收入'] = true;
                }
                else {
                    option.legend.selected['本期收入'] = false;
                    option.legend.selected['同期收入'] = false;
                }
            }
            if (params.name == '本期累计') {
                if (params.selected['本期累计']) {
                    option.legend.selected['本期累计'] = true;
                    option.legend.selected['同期累计'] = true;
                }
                else {
                    option.legend.selected['本期累计'] = false;
                    option.legend.selected['同期累计'] = false;
                }
            }
            if (params.name == '同期累计') {
                if (params.selected['同期累计']) {
                    option.legend.selected['本期累计'] = true;
                    option.legend.selected['同期累计'] = true;
                }
                else {
                    option.legend.selected['本期累计'] = false;
                    option.legend.selected['同期累计'] = false;
                }
            }
    
            myChart.setOption(option);
        });
        myChart.setOption(option);
    
    
    </script>

    路过的感觉对你有用的帮忙配下色   :)

  • 相关阅读:
    java构造函数修饰符
    Tomcat启动时,会遇到IOException while loading persisted sessions: java.io.EOFException
    编码的进阶(重要)
    python格式化输出,循环与输出
    深浅copy
    python基本数据类型三之集合
    python机制与小数据池
    Spring实现基本思路
    内功心法-享元模式
    MAC 忘记Homebrew安装的mysql密码
  • 原文地址:https://www.cnblogs.com/dotnetmvc/p/7221036.html
Copyright © 2011-2022 走看看