记一次百度ECharts的使用

准备

网址：http://echarts.baidu.com/download.html
下载文件：echarts.min.js
网址：http://echarts.baidu.com/download-map.html
下载文件：china.js

柱形图

参数详解

 var echarts = require('echarts');
      var myChart = echarts.init(document.getElementById('item'));
      let option = {
        title : {
        text: (new Date()).getFullYear()+'年度',
      },
      tooltip : {
        trigger: 'axis'
      },
      legend: {
        data:['入库数','取件数','退件数']
      },
      toolbox: {
        show : true,
        feature : {
          mark : {show: true},
          dataView : {show: true, readOnly: false},
          magicType : {show: true, type: ['line', 'bar']},
          restore : {show: true},
          saveAsImage : {show: true}
        }
      },
      calculable : true,
      xAxis : [
        {
          type : 'category',
          data : ['天天快递','申通快递','德邦快递']
         }
      ],
      yAxis : [
        {
          type : 'value'
        }
      ],
      series : [
        {
          name:'入库数',
          type:'bar',
          data:[12，,34,20],
          markPoint : {
            data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
            ]
          },
          markLine : {
            data : [
              {type : 'average', name: '平均值'}
            ]
          }
        },
        {
          name:'取件数',
          type:'bar',
          data:[14,11,40],
          markPoint : {
            data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
            ]
          },
          markLine : {
            data : [
              {type : 'average', name: '平均值'}
            ]
          }
        },
        {
          name:'退件数',
          type:'bar',
          data:[34,12,8],
          markPoint : {
            data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
            ]
          },
          markLine : {
            data : [
              {type : 'average', name: '平均值'}
            ]
          }
        },

      ]};
      myChart.setOption(option);
    }

项目中前端代码应用：

//引入js
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.5"></script>
<script src="js/plugins/echarts/echarts-all.js"></script>
<script src="js/content.min.js?v=1.0.0"></script>

//定义一个存放图标的dom
<div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="echarts" id="chart-buy"></div>
                    <div class="echarts" id="chart-sale"></div>
                </div>
            </div>
        </div>
    </div>

//请求js
$(document).ready(function () {

        //查询昨日购销货数量
        $.ajax({
            type: "GET",
            url: "http://localhost:8080/maintain/buyAndSaleYesterday",
            success: function (res) {
                if (res.code == 200) {
                  $('#yesterdayBuy').html(res.data.buys);
                  $('#yesterdaySale').html(res.data.sales);
                }
            }
        });

        // 基于准备好的dom，初始化echarts图表
        var buyChart = echarts.init(document.getElementById('chart-buy'));
        var saleChart = echarts.init(document.getElementById('chart-sale'));

        $.ajax({
            type: "GET",
            url: "http://localhost:8080/test/buyAndSale",
            success: function (res) {
                if (res.code == 200) {
                    var category_buy = [];
                    var buys = [];
                    var category_sale = [];
                    var sales = [];
                    for (var i = 0; i < res.data.buyList.length; i++) {
                        category_buy.push(res.data.buyList[i].dateStr);
                        buys.push(res.data.buyList[i].buys);
                    }
                    for (var i = 0; i < res.data.saleList.length; i++) {
                        category_sale.push(res.data.saleList[i].dateStr);
                        sales.push(res.data.saleList[i].sales);
                    }
                    var buyOption = {
                        tooltip: {show: true},
                        legend: {data: ['购货量']},
                        xAxis: [{
                            type: 'category',
                            data: category_buy
                        }],
                        yAxis: [{type: 'value'}],
                        series: [{
                            'name': '购货量',
                            'type': 'bar',
                            'data': buys
                        }]
                    };
                    // 为echarts对象加载数据
                    buyChart.setOption(buyOption);

                    var saleOption = {
                        tooltip: {show: true},
                        legend: {data: ['销货量']},
                        xAxis: [{
                            type: 'category',
                            data: category_sale
                        }],
                        yAxis: [{type: 'value'}],
                        series: [{
                            'name': '销货量',
                            'type': 'bar',
                            'data': sales
                        }]
                    };
                    // 为echarts对象加载数据
                    saleChart.setOption(saleOption);
                }
            }
        });
    })

//后端代码
    @RequestMapping(value = "/buyAndSale")
    @ResponseBody
    public R buyAndSale() {
        return R.ok(this.service.queryBuyAndSale());
    }

项目中的效果图：

bar.png

中国地图

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
        <title>ECharts</title>
        <link rel="stylesheet" type="text/css" href="css/main.css"/>
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/echarts.min.js"></script>
        <script src="js/china.js"></script>
        <style>#china-map {width:1000px; height: 1000px;margin: auto;}</style>
    </head>
    <body>        

        <div id="china-map"></div>

        <script>
            var myChart = echarts.init(document.getElementById('china-map'));
            var option = {
                tooltip: {
//                    show: false //不显示提示标签
                    formatter: '{b}', //提示标签格式
                    backgroundColor:"#ff7f50",//提示标签背景颜色
                    textStyle:{color:"#fff"} //提示标签字体颜色
                },
                series: [{
                    type: 'map',
                    mapType: 'china',
                    label: {
                        normal: {
                            show: true,//显示省份标签
                            textStyle:{color:"#c71585"}//省份标签字体颜色
                        },    
                        emphasis: {//对应的鼠标悬浮效果
                            show: true,
                            textStyle:{color:"#800080"}
                        } 
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: .5,//区域边框宽度
                            borderColor: '#009fe8',//区域边框颜色
                            areaColor:"#ffefd5",//区域颜色
                        },
                        emphasis: {
                            borderWidth: .5,
                            borderColor: '#4b0082',
                            areaColor:"#ffdead",
                        }
                    },
                    data:[
                        {name:'福建', selected:true}//福建为选中状态
                    ]
                }],
            };

            myChart.setOption(option);
            myChart.on('mouseover', function (params) {
                var dataIndex = params.dataIndex;
                console.log(params);
            });
        </script>

    </body>
</html>

项目中的应用：

//引入js
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.5"></script>
<script src="js/plugins/echarts/echarts-all.js"></script>
<script src="js/content.min.js?v=1.0.0"></script>

//定义一个dom
  <div class="row">
    <div style="height:600px" id="echarts-map-chart"></div>
  </div>

//请求js
$(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "http://localhost:8080/test/shopCount",
            success: function (res) {
                if (res.code == 200) {
                    var s = echarts.init(document.getElementById("echarts-map-chart")),
                        d = res.data;
                    console.log(d);
                    c = {
                        title: {
                            text: "各省份店铺注册情况",
                            x: "center"
                        },
                        tooltip: {
                            //show: false //不显示提示标签
                            trigger: "item",
                            backgroundColor: "#ff7f50",//提示标签背景颜色
                            textStyle: {color: "#fff"} //提示标签字体颜色
                        },
                        dataRange: {
                            min: 0,
                            max: 2500,
                            x: "left",
                            y: "bottom",
                            text: ["高", "低"],
                            calculable: !0
                        },
                        toolbox: {
                            show: !0,
                            orient: "vertical",
                            x: "right",
                            y: "center",
                            feature: {
                                mark: {
                                    show: !0
                                },
                                dataView: {
                                    show: !0,
                                    readOnly: !1
                                },
                                restore: {
                                    show: !0
                                },
                                saveAsImage: {
                                    show: !0
                                }
                            }
                        },
                        roamController: {
                            show: !0,
                            x: "right",
                            mapTypeControl: {
                                china: !0
                            }
                        },
                        series: [{
                            name: "数量",
                            type: "map",
                            mapType: "china",
                            roam: !1,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: !0
                                    }
                                },
                                emphasis: {
                                    label: {
                                        show: !0
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderWidth: .5,//区域边框宽度
                                    borderColor: '#009fe8',//区域边框颜色
                                    areaColor: "#ffefd5",//区域颜色
                                },
                                emphasis: {
                                    borderWidth: .5,
                                    borderColor: '#4b0082',
                                    areaColor: "#ffdead",
                                }
                            },
                            data: d
                        }]
                    };
                    s.setOption(c);
                } 
            }
        });
    });

//后端代码controller层
    @RequestMapping(value = "/shopCount")
    @ResponseBody
    public R shopCount() {
        return R.ok(this.service.shopCount());
    }
//service层对name进行处理
 @Override
    public List<ShopCountMapVO> shopCount() {
        List<ShopCountMapVO> list = this.mapper.shopCount();
        //适应百度地图对省份名称进行截取
        for (ShopCountMapVO vo : list) {
            if (vo.getName().startsWith("内蒙古") || vo.getName().startsWith("黑龙江")) {
                vo.setName(vo.getName().substring(0, 3));
            } else {
                vo.setName(vo.getName().substring(0, 2));
            }
        }
        return list;
    }

效果图：

china.png

采坑：使用中国地图的时候后端返回的json值中，name的值一定得和示例参数中name 的值相同，否则地图上会不显示相应的value