zoukankan      html  css  js  c++  java
  • Echarts作图之柏拉图

    Echarts版本:2.2.7

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="echarts/echarts.js"></script>
        <script type="text/javascript">
        window.onload = function() {
            require([
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line',
            ], function(ec) {
                var chartDom = document.getElementById("dv");
                console.log(chartDom);
                var myChart = ec.init(chartDom);
                var colors=["red","blue","green","black","orange","purple"]
    
                option = {
                    title: {
                        text: '测试',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器,坐标轴触发有效
                            type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
                        },
                        formatter: function(params) {
                            return params[0].name + '<br/>' +
                                params[0].seriesName + ' : ' + params[0].value + '<br/>' +
                                params[1].seriesName + ' : ' + (params[1].value + params[0].value);
                        }
                    },
                    legend: {
                        selectedMode: false,
                        data: ['Acutal', 'Forecast']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        data: ['top1', 'top2', 'top3', 'top4', 'top5', 'top6'],
                        splitLine:false
                        //data:[]
                    },{
                        type: 'category',
                        show:false,
                        boundaryGap : false,
                        data: ['Cosco', 'CMA', 'APL', 'OOCL', 'Wanhai', 'Zim',"333"],
                        splitLine:false
                    }],
                    yAxis: [{
                            type: 'value',
                            boundaryGap: [0, 0.1],
                            splitLine:false
                        },
                        {
                            type: 'value',
                            name: '温度',
                            axisLabel: {
                                formatter: '{value} %'
                            },
                            splitLine:false
                        }
                    ],
                    series: [{
                            name: 'Acutal',
                            type: 'bar',
                            //barGap:'10%',
                            barCategoryGap: '0%',
                            itemStyle: {
                                normal: {
                                    color: function(obj){
                                    	if(obj.dataIndex>=0){
                                    		return colors[obj.dataIndex];
                                    	}
                                    },
                                    barBorderColor: 'tomato',
                                    barBorderWidth: 1,
                                    barBorderRadius: 2,
                                    label: {
                                        show: true,
                                        position: 'insideTop'
                                    }
                                }
                            },
                            data: [300, 200, 180, 150, 120, 50]
                        },
                        {
                            name: 'Forecast',
                            type: 'line',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            data: [0, 30,50, 68, 83, 95,100 ]
                        }
    
                    ]
                };
    
    
                myChart.setOption(option);
            })
        }
        </script>
    </head>
    
    <body>
        <div id="dv" style="900px;height: 600px"></div>
    </body>
    
    </html>
    

      

  • 相关阅读:
    poj2409 Let it Bead
    bzoj1004 Cards
    Burnside引理和polay计数学习小记
    poj3294 --Life Forms
    poj3261 -- Milk Patterns
    Arch linux安装
    各种开源协议介绍
    grub2 rescue模式
    mongoDB-3.x Master Slave Replication
    Unix-like包管理器一览
  • 原文地址:https://www.cnblogs.com/gebizhuifenren/p/7747798.html
Copyright © 2011-2022 走看看