百度的ECharts使用示例

刺骨的言语ヽ痛彻心扉 2022-06-01 13:54 223阅读 0赞

转载地址:http://blog.csdn.net/qq\_34378776/article/details/53862723

一直以来我都使用JFrechart框架做图表,这种基于Java的组件比较笨重,我总是神烦,需要费脑子编写统计SQL语句,还需要写Java代码想办法生成图表,而使用了百度ECharts我的工作重心只需要放在获取数据,轻松多了,不扯淡,直接上代码   
如何动态组织百度ECharts数据

data: (function(){ 
        var res = [];
        var len = departmentName.length;
        while (len--) {
        res.push({
        name: departmentName[len],
        value: totaldata[len]
    });
     
      
       1
       2
       3
       4
       5
       6
       7
       8

改写这个模板就可以了

下面给出饼状图、折线图、柱状图、漏斗图等示例,要是需要玩更牛逼的图,让客户加钱,你再参考百度ECharts官网就可以了,其实上面的图就够你用了

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        
        <script src="echarts.js" type="text/javascript"></script>
        <title>QuickStart</title>
    </head>
    <body>
        
        <div id="main" style="width: 600px;height: 400px;"></div>
         <script type="text/javascript"> //将echart初始化到div中 var myChart=echarts.init(document.getElementById("main")) ; //指定图表的配置项和数据 var option={ title:{ text:"Echarts HelloWorld!!!" } , tooltip:{} , legend:{ data:'销量' }, xAxis:{ data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子'] }, yAxis:{} , series:{ name:'销量', type:'bar' , data:[5,20,36,10,10,20] } } ; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option) ; </script>
    </body>
    </html>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30
       31
       32
       33
       34
       35
       36
       37
       38

![这里写图片描述][SouthEast]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>柱状图</title>
        
        <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
        
        <script type="text/javascript" src="echarts.js"></script>
        <script type="text/javascript"> $(function () { var myChart=echarts.init(document.getElementById("main")); var dataAxis = []; var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220]; var yMax = 500; var dataShadow = []; for (var i = 0; i < data.length; i++) { dataShadow.push(yMax); dataAxis.push(i) ; } option = { title: { text: '特性示例：渐变色 阴影 点击缩放', subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom' }, xAxis: { data: dataAxis, axisLabel: { inside: true, textStyle: { color: '#fff' } }, axisTick: { show: false }, axisLine: { show: false }, z: 10 }, yAxis: { axisLine: { show: false }, axisTick: { show: false }, axisLabel: { textStyle: { color: '#999' } } }, dataZoom: [ { type: 'inside' } ], series: [ { // For shadow type: 'bar', itemStyle: { normal: {color: 'rgba(0,0,0,0.05)'} }, barGap:'-100%', barCategoryGap:'40%', data: dataShadow, animation: false }, { type: 'bar', itemStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#83bff6'}, {offset: 0.5, color: '#188df0'}, {offset: 1, color: '#188df0'} ] ) }, emphasis: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#2378f7'}, {offset: 0.7, color: '#2378f7'}, {offset: 1, color: '#83bff6'} ] ) } }, data: data } ] }; var zoomSize = 6; myChart.on('click', function (params) { console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]); myChart.dispatchAction({ type: 'dataZoom', startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)], endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)] }); }); myChart.setOption(option) ; }); </script>
    </head>
    <body>
        <div id="main" style="width: 1600px;height: 1000px"></div>
    </body>
    </html>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30
       31
       32
       33
       34
       35
       36
       37
       38
       39
       40
       41
       42
       43
       44
       45
       46
       47
       48
       49
       50
       51
       52
       53
       54
       55
       56
       57
       58
       59
       60
       61
       62
       63
       64
       65
       66
       67
       68
       69
       70
       71
       72
       73
       74
       75
       76
       77
       78
       79
       80
       81
       82
       83
       84
       85
       86
       87
       88
       89
       90
       91
       92
       93
       94
       95
       96
       97
       98
       99
       100
       101
       102
       103
       104
       105
       106
       107
       108
       109
       110
       111
       112
       113
       114
       115
       116
       117
       118
       119
       120
       121
       122
       123

![这里写图片描述][SouthEast 1]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>折线图</title>
        
        <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
        
        <script type="text/javascript" src="echarts.js"></script>
        
        <script type="text/javascript"> $(function () { //1.初始化Echarts var myChart=echarts.init(document.getElementById("main")); //这里不允许使用JQuery简化 //2.创建Oprion var option={ title:{ text:'折线图堆叠' } , tooltip:{ trigger:'axis' } , legend:{ data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'] } , grid:{ left:'3%' , right:'4%' , bottom:'3%' , containLabel:true } , toolbox:{ feature:{ saveAsImage:{} } } , xAxis:{ type:'category', boundaryGap:false , data:['周一','周二','周三','周四','周五','周六','周日'] } , yAxis:{ type:'value' } , series:[ { name : '邮件营销', type : 'line' , stack : '总量' , data : [120,132,101,134,90,230,210] } , { name : '联盟广告' , type : 'line' , stack : '总量' , data :[220,182,191,234,290,330,310] } , { name : '视频广告' , type : 'line' , stack : '总量' , data : [150,232,201,154,190,330,410] } , { name : '直接访问', type : 'line' , stack :' 总量' , data :[320,332,301,334,390,330,320] }, { name : '搜索引擎' , type : 'line' , stack : '总量' , data : [920,932,901,934,1290,1330,1320] } ] } //3.设置Echarts的Option myChart.setOption(option) ; }); </script>
    </head>
    <body>
        <div id="main" style="width:1000px;height: 600px"></div>
    </body>
    </html>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30
       31
       32
       33
       34
       35
       36
       37
       38
       39
       40
       41
       42
       43
       44
       45
       46
       47
       48
       49
       50
       51
       52
       53
       54
       55
       56
       57
       58
       59
       60
       61
       62
       63
       64
       65
       66
       67
       68
       69
       70
       71
       72
       73
       74
       75
       76
       77
       78
       79
       80
       81
       82
       83
       84
       85
       86
       87

![这里写图片描述][SouthEast 2]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>饼状图</title>
        
        <script type="text/javascript" src="echarts.js"></script>
    </head>
    <body>
        <div id="main" style="width: 1200px;height: 900px"></div>
        <script type="text/javascript">  var myChart=echarts.init(document.getElementById("main")) ;  var option={ title :{ text:'某站点用户访问来源', subtext:'纯属虚构' , x:'center' } , tooltip:{ trigger:'item' , formatter:'{a} <br/> {b} :{c} ({d}%)' } , legend:{ orient:'vertical' , left:'left' , data:['直接营销','邮件营销','联盟广告','视频广告','搜索引擎'] } , series:[ { name:'访问来源', type:'pie' , radius:'55%' , center:['50%','60%'], data:[ {value:355,name:'直接访问'}, {value:310,name:'邮件营销'}, {value:234,name:'联盟广告'}, {value:135,name:'视频广告'}, {value:1548,name:'搜索引擎'} ], itemStyle:{ emphasis:{ shadowBlur:10 , shadowOffsetX:0 , shadowColor:'rgba(0,0,0,0.5)' } } } ] };  myChart.setOption(option) ; </script>
    </body>
    </html>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30
       31
       32
       33
       34
       35
       36
       37
       38
       39
       40
       41
       42
       43
       44
       45
       46
       47
       48
       49
       50
       51
       52
       53
       54
       55
       56
       57
       58

![这里写图片描述][SouthEast 3]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>饼状图</title>
        
        <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
        
        <script type="text/javascript" src="echarts.js"></script>
        
        <script type="text/javascript"> $(function () { //1.初始化百度Echarts var myChart=echarts.init(document.getElementById("main")); //2.设置Option var option={ tooltip:{ trigger:'item', formatter:"{a}<br/>{b}:{c}({d}%)" } , legend:{ orient:'vertical' , x:'left' , data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] } , series: [ { name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } } , labelLine: { normal: { show: false } }, data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ] } ] } ; //3.配置百度Echarts的Option myChart.setOption(option) ; }); </script>
    </head>
    <body>
        <div id="main" style="width: 1200px;height: 800px">
        </div>
    </body>
    </html>
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30
       31
       32
       33
       34
       35
       36
       37
       38
       39
       40
       41
       42
       43
       44
       45
       46
       47
       48
       49
       50
       51
       52
       53
       54
       55
       56
       57
       58
       59
       60
       61
       62
       63
       64
       65
       66
       67
       68
       69

![这里写图片描述][SouthEast 4]

*总结:百度ECharts到底怎么玩,思路很简单,通过Ajax技术获取数据,然后利用上面给的配置数据的模板设置数据data;Echarts步骤,先初始化(init),再配置Option,最后设置Option(myChart.setOption(option)),当然初始化前先用Ajax获取数据,获取不到数据一切都是个蛋；需要的技术支持:Ajax+JSON+JQuery+MVC架构,不会的赶紧补习吧；上面给你的示例鸟用没有,总结规律才是王道,其实ECharts简单到没有朋友*

*转载地址:http://blog.csdn.net/qq\_34378776/article/details/53862723*

[SouthEast]: /images/20220601/a37a6f852871407b8c5ec863ed5041f2.png
[SouthEast 1]: /images/20220601/36016a0d5e744547ab0fe3ee499c8c96.png
[SouthEast 2]: /images/20220601/0e2683a3e7a446099f7d405629bedfb6.png
[SouthEast 3]: /images/20220601/817420f433d34b2789a75ae333be93d0.png
[SouthEast 4]: /images/20220601/3e0f67da72214d1f8e6e4f26c0e4d76c.png