zoukankan      html  css  js  c++  java
  • Echarts画条形图

     1 <html>
     2 <head>
     3     <meta name="viewport" content="width=device-width" />
     4     <title>条形图</title>
     5     @*echarts画图必须要引用的*@
     6     <script src="~/Scripts/echarts.min.js"></script>
     7 </head>
     8 <body>
     9     @* 画图要用的空间 *@
    10        <div id="divEcharts" style="800px;height:600px;"></div>
    11 </body>
    12 </html>
    13 <script type="text/javascript">
    14     option = {
    15         color: ['#3398DB'],
    16         tooltip : {  //提示信息
    17             trigger: 'axis', //axis轴对称
    18             axisPointer : {            // 坐标轴指示器,坐标轴触发有效
    19                 type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
    20             }
    21         },
    22         grid: { //网格
    23             left: '3%',
    24             right: '4%',
    25             bottom: '3%',
    26             containLabel: true //把y轴的值显示出来
    27         },
    28         xAxis : [  //X轴的数据
    29             {
    30                 type : 'category',
    31                 data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    32                 axisTick: {
    33                     alignWithLabel: true
    34                 }
    35             }
    36         ],
    37         yAxis : [  //Y轴的网格已值为准
    38             {
    39                 type : 'value'
    40             }
    41         ],
    42         series : [
    43             {
    44                 name:'直接访问', //提示中的信息
    45                 type:'bar', //图的类型 bar条形 
    46                 barWidth: '60%', //每个条形的宽度比例
    47                 data:[10, 52, 200, 334, 390, 330, 220] //Y轴数据
    48             }
    49         ]
    50     };
    51 
    52 
    53     //初始化echarts实例
    54     var myChart = echarts.init(document.getElementById('divEcharts'));
    55     //使用制定的配置项和数据显示图表
    56     myChart.setOption(option);
    57     
    58 </script>
  • 相关阅读:
    wget(转)
    852. Peak Index in a Mountain Array
    617. Merge Two Binary Trees
    814. Binary Tree Pruning
    657. Judge Route Circle
    861. Score After Flipping Matrix
    832. Flipping an Image
    461. Hamming Distance
    654. Maximum Binary Tree
    804. Unique Morse Code Words
  • 原文地址:https://www.cnblogs.com/jmy9/p/10837443.html
Copyright © 2011-2022 走看看