zoukankan      html  css  js  c++  java
  • 使用ECharts,绘制柱状图

    <!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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@1/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@1/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/map/js/world.js"></script>
    /* <!---- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script> --->*/
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/extension/bmap.min.js"></script>
    <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
    xAxis: {
    type: 'category',
    data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时',
    '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时']
    },
    yAxis: {
    type: 'value'
    },

    grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
    },

    series: [{
    data: [10,20,30,40,50,60,70,80,90,10,20,30,40,50,60,70,80,90,10,20,30,40,50,60],
    type: 'bar',
    color:'#6495ED', label: {
    show: true

    }
    }]
    };
    ;
    if (option && typeof option === "object") {
    myChart.setOption(option, true);
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    协程与IO模型
    进程池与线程池
    GIL全局解释器锁
    线程编程
    进程编程
    基于UDP协议的socket
    异常处理
    jquery mobile外部js无法载入问题
    禁用或限制部分WebKit特性
    eval 返回变量值
  • 原文地址:https://www.cnblogs.com/summerGraden/p/14781899.html
Copyright © 2011-2022 走看看