zoukankan      html  css  js  c++  java

  • ECharts之类型bar(堆积条形图)

    ECharts之类型bar(堆积条形图)

    原博客主链接：http://www.cnblogs.com/carsonwuu/p/8267457.html

    效果：

    可运行源码：

      1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>堆积条形图</title>
  6     <!-- 引入 echarts.js -->
  7     <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.min.js"></script>
  8     <script src="jquery-3.2.1.js"></script>
  9 </head>
 10 <body>
 11     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 12 
 13     <div id="main" style="top:300px;left:300px; 500px;height:300px;border:2px solid green;"></div>
 14 
 15     <script type="text/javascript">
 16     // 基于准备好的dom，初始化echarts实例
 17     var colorL=['rgb(122 ,139 ,139)','rgb(0, 104, 139)','rgb(0, 0, 139)','rgb(85, 26, 139)','rgb(24 ,116 ,205)','rgb(0 ,0 ,255)','rgb(70 ,130 ,180)','rgb(0 ,139 ,139)','rgb(0, 255, 255)','rgb(78 ,238 ,148)','rgb(0 ,191 ,255)','rgb(46 ,139 ,87)'];
 18     var politics=100000,
 19     steady=80000.99,
 20     terrorist=20000;
 21     var element=['遭受入侵', '黑客控制','黑产牟利','内部攻击','翻墙软件','代理工具','VPN'];
 22     var idc=['IDC1','IDC2','IDC3','IDC4','IDC5','IDC6','IDC7'];
 23     var IDC=idc;
 24     var Element=element;
 25     var myChart = echarts.init(document.getElementById('main'));
 26     var data=[320, 302, 301, 334, 390, 330, 320];
 27     var DATA=data;
 28 
 29     // 指定图表的配置项和数据
 30     option = {
 31         tooltip : {
 32             trigger: 'axis',
 33         axisPointer : {            // 坐标轴指示器，坐标轴触发有效
 34             type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
 35         }
 36     },
 37     legend: {
 38         data:Element,
 39         
 40         // icon: 'circle',
 41         align:'auto',
 42         itemGap: 6 ,
 43         itemWidth : 15,
 44         itemHeight : 8 ,
 45 
 46         align: 'left',
 47         selectedMode: true,
 48         formatter: function(v) {
 49            return v ;
 50        },
 51        textStyle:{
 52         fontSize:10,
 53         color: '#666'
 54     }
 55     },
 56     grid: {
 57         left: '3%',
 58         right: '4%',
 59         bottom: '3%',
 60         top : '3%',
 61         containLabel: true
 62     },
 63     xAxis:  {
 64         show:false,
 65         type: 'value',
 66          //刻度线设置  
 67                     axisTick : {  
 68                         //隐藏刻度线  
 69                         show : true,  
 70                     },
 71                     axisLine : {  
 72                         //轴线样式  
 73                         lineStyle : {  
 74                             //设置轴线宽度  
 75                             width : 1,  
 76                             //轴线颜色  
 77                             color : 'rgba(1,134,198,0.8)'  
 78                         }  
 79                     },  
 80     },
 81     yAxis: {
 82         type: 'category',
 83             // axisTick:{
 84             //     show:false
 85             // },
 86         axisLabel : {
 87             textStyle : {
 88                 color:'rgb(119 ,136 ,153)'
 89             }
 90         },
 91         data: IDC,
 92 
 93         axisLine : {  
 94                         //轴线样式  
 95                         lineStyle : {  
 96                             //设置轴线宽度  
 97                             width : 1,  
 98                             //轴线颜色  
 99                             color : 'rgba(1,134,198,0.8)'  
100                         }  
101                     },
102         },
103     series: [
104     {
105         name: '遭受入侵',
106         type: 'bar',
107         barWidth:15,
108         // barCategoryGap: '15%',
109         // boundaryGap : true, 
110         stack: '总量',
111         label: {
112             normal: {
113                 show: false,
114                 position: 'insideRight'
115             }
116         },
117         itemStyle : {
118             normal : { 
119                 color : colorL[0]
120             },
121         },
122 
123         data: DATA
124     },
125     {
126         name: '黑客控制',
127         type: 'bar',
128         barWidth:15,
129         stack: '总量',
130         label: {
131             normal: {
132                 show: false,
133                 position: 'insideRight'
134             }
135         },
136         itemStyle : {
137             normal : { 
138                 color : colorL[1]
139             },
140         },
141         data:DATA
142     },
143     {
144         name: '黑产牟利',
145         type: 'bar',
146         stack: '总量',
147         barWidth:15,
148         label: {
149             normal: {
150                 show: false,
151                 position: 'insideRight'
152             }
153         },
154         itemStyle : {
155             normal : { 
156                 color : colorL[2]
157             },
158         },
159         data: DATA
160     },
161     {
162         name: '内部攻击',
163         type: 'bar',
164         stack: '总量',
165         barWidth:15,
166         label: {
167             normal: {
168                 show: false,
169                 position: 'insideRight'
170             }
171         },
172         itemStyle : {
173             normal : { 
174                 color : colorL[3]
175             },
176         },
177         data: DATA
178     },
179     {
180         name: '翻墙软件',
181         type: 'bar',
182         stack: '总量',
183         barWidth:15,
184         label: {
185             normal: {
186                 show: false,
187                 position: 'insideRight'
188             }
189         },
190         itemStyle : {
191             normal : { 
192                 color : colorL[4]
193             },
194         },
195         data: DATA
196     }
197     ,
198     {
199         name: '代理工具',
200         type: 'bar',
201         stack: '总量',
202         barWidth:15,
203         label: {
204             normal: {
205                 show: false,
206                 position: 'insideRight'
207             }
208         },
209         itemStyle : {
210             normal : { 
211                 color : colorL[5]
212             },
213         },
214         data: DATA
215     }
216     ,
217     {
218         name: 'VPN',
219         type: 'bar',
220         stack: '总量',
221         barWidth:15,
222         label: {
223             normal: {
224                 show: false,
225                 position: 'insideRight'
226             }
227         },
228         itemStyle : {
229             normal : { 
230                 color : colorL[6]
231             },
232         },
233         data: DATA,
234         }
235         ]
236     };
237 
238     // 使用刚指定的配置项和数据显示图表。
239     myChart.setOption(option);
240 </script>
241 </body>
242 </html>
  • 相关阅读:
    Day1-while and for/break and continue
    Day1-用户输入及字符串格式化输入
    Day1-python基础
    2-21-源码编译搭建LNMP环境
    2-20-使用apache搭建web网站
    2-19-mysql优化
    2-18-搭建mysql集群实现高可用
    2-17-MySQL读写分离-mysql-proxy
    2-16-2MySQL主从
    2-14-存储过程-触发器-事务
  • 原文地址：https://www.cnblogs.com/carsonwuu/p/8267519.html
Copyright © 2011-2022 走看看