zoukankan      html  css  js  c++  java
  • echarts引用的简单步骤

    首先导入echarts的包   <script src = "js/echarts.min.js"></script>

    <style>
       .box{                  
       300px;
       height:300px;
       background:lightgreen;
       }
    </style>
     <body >
     <div class="box"></div>      //设置一个div用来做放置图表的容器。
    <script>
    //1.echarts初始化。
    var myChart = echarts.init(document.querySelector(".box"));
    //2.设置图表配置项
    var option = {
       xAxis: {
              type: 'category',                                                         //该部分可从echarts官网来获得option内的代码。
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                  color: 'rgba(220, 220, 220, 0.8)'
              }
          }]
    };
    myChart.setOption(option);         //配置
    </script>
     </body>

  • 相关阅读:
    mysql存储过程的优点
    MySQL复制
    优化数据库的方法
    MySQL表分区
    Http请求
    memcache和redis的区别
    触发器实现原理
    PHP常见数组函数与实例
    git 打包指定提交过的代码
    发送HTTP请求方法
  • 原文地址:https://www.cnblogs.com/yangqqq/p/13353318.html
Copyright © 2011-2022 走看看