码迷,mamicode.com
首页 > 其他好文 > 详细

echarts3.0 本期累计堆叠

时间:2017-07-22 14:31:57      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:store   type   element   blog   技术分享   div   for   rgb   item   

@{
    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>

 

技术分享

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

echarts3.0 本期累计堆叠

标签:store   type   element   blog   技术分享   div   for   rgb   item   

原文地址:http://www.cnblogs.com/dotnetmvc/p/7221036.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!