echarts3.0 本期累计堆叠

@{
    ViewBag.Title = "barlj";
}

<h2>barlj</h2>

<div id="main" style="width: 1000px;height:800px;"></div>
<script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById(‘main‘), ‘shine‘, { width: 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 /*+ ‘\n‘*/) : ‘‘; } } } },
                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>

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

时间: 2024-08-03 05:15:52

echarts3.0 本期累计堆叠的相关文章

asp.net mvc5+Echarts3.0+AspNet.SignalR2.0 实时监控cpu占用率推送

先看看效果: 感谢QQ群18668853的群主,无私的公开课,全是干货,当初学的时候,群主用的是jquery.flot做图表,我这里改成百度的Echarts3.0,这算是自己的修改吧,喜欢的可以去下载看看 看考的图表地址:http://echarts.baidu.com/gallery/editor.html?c=doc-example/tutorial-dynamic-data

vue中使用 echarts3.0 或 echarts2.0 (模拟迁徙图,折线图)

一.echarts3.0(官网: http://echarts.baidu.com/) 首先通过npm安装echarts依赖,安装的为3.0版本 npm install echarts -s 也可以使用淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install echarts -s 引入的方式有两种: 1.main.js中全局引入 import echarts from 'echarts' Vu

基于SpringMVC框架使用ECharts3.0实现堆叠条形图的绘制(下篇)

<script type="text/javascript"> $().ready(function() { var myChart = echarts.init(document.getElementById('main')); //图表显示提示信息 myChart.showLoading(); //定义图表options option = { tooltip : { trigger : 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效

ng2中的百度echarts3.0使用——(echarts-ng2)

一:下载 echarts-ng2 包 echarts-ng2时基于基于angular2的echarts组件. 安装:npm install echarts-ng2 !注:如果编译错误,提示如下(echarts-ng2.component.ts (3,26): Cannot find module 'echarts'),请安装依赖@types/echarts或者升级typescript版本到2.1以上.npm install @types/echarts --save-dev 二:使用方式 (可参

echarts3.0版本断点连线的处理

项目应用到echarts图表组件.官网的demo中出现空数据会断开.经过跟踪调试.修改echarts.js以下代码即可实现断点连线功能(需要将空数据处理成'-'.这样才能均值): for (var k = 0; k < dimensions.length; k++) { var dim = dimensions[k]; var dimStorage = storage[dim]; if (dataItem == '-')//遇到空值处理.取前后两个数据的平均值 { //debugger; var

echarts3.0

因为要更新手机报表,而原来用的echarts插件版本太低,样式不美观,所以最近在echarts官网学习最新的echarts版本,现在先只对最常见的折线图,柱状图,饼图进行总结. 大概写法都是一样的,首先要创建一个装图标的容器,且该容器一定要有宽高,否则图形不会显示出来.然后进行图形初始化. 现在对对象里面的属性用我所理解的话来进行解析.首先是title,即标题.tooltip,即鼠标悬浮交互时的信息提示.grid,可以调整图形在容器中的位置和大小,这个在饼图中没有作用,饼图的大小是series中

华为交换机istack堆叠配置

拓扑图: SW-A interface stack-port 0/1 port int xg0/0/23 enable port int xg0/0/24 enable quit stack slot 0 priority 200  //修改主交换机的堆叠优先级为200,大于其他成员交换机.堆叠ID 采用缺省值0因此不用配置. SW-B interface stack-port 0/2 port int xg0/0/23 enable  //这个端口堆叠成功后会变成xg1/0/23 port i

Catalyst 3750堆叠

Catalyst 3750系列使用StackWise技术,它是一种创新性的堆叠架构,提供了一个32Gbps的堆叠互联,连接多达9台交换机,并将它们整合为一个统一的.逻辑的.针对融合而优化的设备,从而让客户可以更加放心地部署语音.视频和数据应用, http://thely.blog.51cto.com/2695427/1570600/ http://www.cisco.com/c/zh_cn/products/collateral/switches/catalyst-3750-series-swi

网络设备-思科-交换机(例3750)堆叠终结配置篇

我又回来了,上次俩篇介绍了华为stack.华三的firewall的irf.这次就来介绍下思科的堆叠(stack),虽然实现思路都一致,但配置也有需要注意的地方,尤其是现在做二级运营商的网工们,所有产商全得会,压力确实大. 先说下拓扑环境: 此项目为某全国物流公司网络中标方案某部分,全网品字形状.流量平行结构.全程方案与实施由我进行规划和组织实施. PS:冗余.流量平行 图中网络设备选型: cisco-3750[专用堆叠电缆] firewall-asa5515[出口防火墙,带failover许可证