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>

  • 相关阅读:
    .NET简谈设计模式之(适配器模式)
    .NET简谈组件程序设计之(手动同步)
    .NET简谈组件程序设计之(初识远程调用)
    .NET简谈组件程序设计之(初识.NET线程Thread)
    .NET映射设计(Model与UIControl之间的模型关系)
    .NET简谈事务本质论
    .NET简谈组件程序设计之(异步委托)
    向5.4致敬吧 无为而为
    SQL 2005 分析服务基于角色的动态授权 无为而为
    文思创新深圳招聘biztalk 无为而为
  • 原文地址:https://www.cnblogs.com/summerGraden/p/14781899.html
Copyright © 2011-2022 走看看