[echarts] - echarts量化比较图表类型解析

https://echarts.baidu.com/examples/editor.html?c=watermark

<!DOCTYPE html>
<!--用作两种货品的参数对比-->
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>

<script src="/js/jquery.min.js"></script>

<!--<script src="/js/jquery-3.1.0.min.js"></script>-->

<!--<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>-->
<!--<script src="/js/echarts_4.1.0.rc2_echarts.min.js"></script>-->
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>

<!--<script src="monitor.js"></script>-->
<script src="/js/getParam.js"></script>


<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    app.title = '水印 - ECharts 下载统计'


    //TODO 测试echart数据
    // $.ajax({
    //     url: "/petroleumCoke/selectAll", //获取所有石油焦数据list
    //     type: "POST",
    //     success: function (data) {
    //
    //         companys = getParamValues("company",data).delDuplicate();
    //     }
    // });

    var builderJson = {//json数组
        "all": 10887,
        "charts": {
            "map": 3237,
            "lines": 2164,
            "bar": 7561,
            "line": 7778,
            "pie": 7355,
            "scatter": 2405,
            "candlestick": 1842,
            "radar": 2090,
            "heatmap": 1762,
            "treemap": 1593,
            "graph": 2060,
            "boxplot": 1537,
            "parallel": 1908,
            "gauge": 2107,
            "funnel": 1692,
            "sankey": 1568
        },
        "components": {
            "geo": 2788,
            "title": 9575,
            "legend": 9400,
            "tooltip": 9466,
            "grid": 9266,
            "markPoint": 3419,
            "markLine": 2984,
            "timeline": 2739,
            "dataZoom": 2744,
            "visualMap": 2466,
            "toolbox": 3034,
            "polar": 1945
        },
        "ie": 9743
    };

    var downloadJson = {
        "echarts.min.js": 17365,
        "echarts.simple.min.js": 4079,
        "echarts.common.min.js": 6929,
        "echarts.js": 14890
    };

    var themeJson = {
        "dark.js": 1594,
        "infographic.js": 925,
        "shine.js": 1608,
        "roma.js": 721,
        "macarons.js": 2179,
        "vintage.js": 1982
    };

    var waterMarkText = 'ECHARTS';

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = canvas.height = 100;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.globalAlpha = 0.08;
    ctx.font = '20px Microsoft Yahei';
    ctx.translate(50, 50);
    ctx.rotate(-Math.PI / 4);
    ctx.fillText(waterMarkText, 0, 0);

    option = {
        backgroundColor: {
            type: 'pattern',
            image: canvas,
            repeat: 'repeat'
        },
        tooltip: {},
        title: [{
            text: '在线构建',
            subtext: '总计 ' + builderJson.all,
            x: '25%',
            textAlign: 'center'
        }, {
            text: '各版本下载',
            subtext: '总计 ' + Object.keys(downloadJson).reduce(function (all, key) {
                return all + downloadJson[key];
            }, 0),
            x: '75%',
            textAlign: 'center'
        }, {
            text: '主题下载',
            subtext: '总计 ' + Object.keys(themeJson).reduce(function (all, key) {
                return all + themeJson[key];
            }, 0),
            x: '75%',
            y: '50%',
            textAlign: 'center'
        }],
        grid: [{
            top: 50,
            width: '50%',
            bottom: '45%',
            left: 10,
            containLabel: true
        }, {
            top: '55%',
            width: '50%',
            bottom: 0,
            left: 10,
            containLabel: true
        }],
        xAxis: [{
            type: 'value',
            max: builderJson.all,
            splitLine: {
                show: false
            }
        }, {
            type: 'value',
            max: builderJson.all,
            gridIndex: 1,
            splitLine: {
                show: false
            }
        }],
        yAxis: [{
            type: 'category',
            data: Object.keys(builderJson.charts),
            axisLabel: {
                interval: 0,
                rotate: 30
            },
            splitLine: {
                show: false
            }
        }, {
            gridIndex: 1,
            type: 'category',
            data: Object.keys(builderJson.components),
            axisLabel: {
                interval: 0,
                rotate: 30
            },
            splitLine: {
                show: false
            }
        }],
        series: [{
            type: 'bar',
            stack: 'chart',
            z: 3,
            label: {
                normal: {
                    position: 'right',
                    show: true
                }
            },
            data: Object.keys(builderJson.charts).map(function (key) {
                return builderJson.charts[key];
            })
        }, {
            type: 'bar',
            stack: 'chart',
            silent: true,
            itemStyle: {
                normal: {
                    color: '#eee'
                }
            },
            data: Object.keys(builderJson.charts).map(function (key) {
                return builderJson.all - builderJson.charts[key];
            })
        }, {
            type: 'bar',
            stack: 'component',
            xAxisIndex: 1,
            yAxisIndex: 1,
            z: 3,
            label: {
                normal: {
                    position: 'right',
                    show: true
                }
            },
            data: Object.keys(builderJson.components).map(function (key) {
                return builderJson.components[key];
            })
        }, {
            type: 'bar',
            stack: 'component',
            silent: true,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
                normal: {
                    color: '#eee'
                }
            },
            data: Object.keys(builderJson.components).map(function (key) {
                return builderJson.all - builderJson.components[key];
            })
        }, {
            type: 'pie',
            radius: [0, '30%'],
            center: ['75%', '25%'],
            data: Object.keys(downloadJson).map(function (key) {
                return {
                    name: key.replace('.js', ''),
                    value: downloadJson[key]
                }
            })
        }, {
            type: 'pie',
            radius: [0, '30%'],
            center: ['75%', '75%'],
            data: Object.keys(themeJson).map(function (key) {
                return {
                    name: key.replace('.js', ''),
                    value: themeJson[key]
                }
            })
        }]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>

这个图表展示类型是横条装及饼图,能很明显地展示出两种产品的产量,供应量,销售量(横线)以及饼图(构成饼图,比如一个吃的食品各种佐料,添加剂各占了多少)

在var builderJson = { } 中创建的key,value键值对数据数组完全可以通过一个js进行数据的转换.

如:

var builderJson = getBuilderJson(company1,company2,json);

todo: getBuilderJson

[echarts] - echarts量化比较图表类型解析

猜你喜欢