美文网首页
07 echarts简单示例

07 echarts简单示例

作者: wshsdm | 来源:发表于2020-02-19 20:47 被阅读0次
<html>  
  <head>    
  </head>  
  <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script src="./js/echarts.min.js"></script>
    <script type="text/javascript">
     // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '未来一周气温变化'         
        },
        tooltip: {},
        legend: {},
        toolbox: {},      
        xAxis: [{         
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }],
        yAxis: { },
        series: [{
          name: '最高气温',
          type: 'line',
          data: [11, 11, 15, 13, 12, 13, 10]          
        },
        {
          name: '最低气温',
          type: 'line',
          data: [1, -2, 2, 5, 3, 2, 0]        
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
     //默认是合并原数据,加上true表示不合并配置,否则原数据依然存在图表上
   //myChart.setOption(option, true); 
</script>
  </body>
</html>

相关文章

网友评论

      本文标题:07 echarts简单示例

      本文链接:https://www.haomeiwen.com/subject/ahszfhtx.html