echart的简单应用

最新推荐文章于 2025-09-12 14:04:02 发布

weixin_30323631

最新推荐文章于 2025-09-12 14:04:02 发布

阅读量100

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/haijson/p/6694504.html

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="width: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="width: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',
                           width: 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>

转载于:https://www.cnblogs.com/haijson/p/6694504.html