zoukankan      html  css  js  c++  java
  • echart的简单应用

    1.引入文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <script src="libs/echarts/echarts.min.js"></script>
    </head>
    <body>
      
    </body>
    </html>

    2.定义一个div设个id值

    <div id="demoChart" style="100%; height:100%"></div>
    

    3.js实现(重要的是option根据API设置属性方法)

    var dChart = echarts.init(document.getElementById('demoChart'));
    
    var option = {
              ...
           	   title: {
                 ....
               },
    	  grid: {
                ....
    	  },
             series:[
             .....
             ]
          ....
    }
    
       dChart.setOption(option);
    

    下面是一个完整的实例自己引好echarts.min.js

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
         <script type="text/javascript" src='echarts.min.js'></script>
    </head>
    <body>
        <div id="rankChart" style="700px; height:700px"></div>
        <script type="text/javascript">
    var rankChart = echarts.init(document.getElementById('rankChart'));
           var option = {
               title: {
                     text: 'top10',
                     top: 20,
                     left:20
               },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis:[
                       {
                        type: 'value',
                        axisLine:{
                           show:false
                         },
                        axisTick:{
                           show:false  
                        },
                      splitLine:{  
                             lineStyle:{
                               color:'#d1d1d1',
                                2,
                               type:'dotted'
                               
                             }
                         },
                        axisLabel: {
                           formatter: '{value} 台'
                        },
                        min: 500,
                        max: 8000,
                        boundaryGap: [0, 0.01]
                   },
                      {
                        type: 'value',
                        axisLine:{
                           show:false
                         },
                        axisTick:{
                           show:false  
                        },
                        axisLabel: {
                           formatter: '{value} 台'
                        },
                      splitLine:{
                            show:false
                         },   
                        min: 500,
                        max: 8000,
                        boundaryGap: [0, 0.01]
                    }
                ],
                yAxis: {
                    type: 'category',
                    axisLine:{
                       show:false
                     },
                    axisTick:{
                       show:false  
                    },
                axisLabel:{
                        margin: 17 
                    },   
                    data: ['状态严重','状态异常','油湿','重载','台风','高温','乙炔','油色谱','套管']
                },
                color:'rgb(72, 207, 173)',
                series: [
                    {
                        name: '2012年',
                    barMaxWidth: 25, //条的宽度
                        type: 'bar',
                    itemStyle:{
                       normal:{
                          color:'#63b7e7'
                         },
                       emphasis:{
                           color:'#ffa838'
                       }    
                     },
                        data: [1000, 1500, 2300, 2900, 4000,5000,6000,7000,8000]
                    }
                ]
            }
               rankChart.setOption(option);
        </script>
    </body>
    </html>
    

      

  • 相关阅读:
    NoInstall_Mysql
    说话
    我是一名博客新人
    pom.xml报错
    模板——链表模板、有序链表模板及测试
    模板——函数模板
    模板——类模板
    MDI程序演示
    容器和算法2 C++快速入门48(完)
    MDI程序演示
  • 原文地址:https://www.cnblogs.com/haijson/p/6694504.html
Copyright © 2011-2022 走看看