首页 > 其他 > 详细

echarts引用的简单步骤

时间:2020-07-21 13:11:01      阅读:105      评论:0      收藏:0      [点我收藏+]

 

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

<style>
   .box{                  
   width: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>

技术分享图片

 

echarts引用的简单步骤

原文:https://www.cnblogs.com/yangqqq/p/13353318.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!