准备
网址: 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
来源: http://www.jianshu.com/p/21df906a8118