百度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());
}项目中的效果图：
中国地图
示例代码：
<!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;
}效果图：
采坑：使用中国地图的时候后端返回的json值中，name的值一定得和示例参数中name 的值相同，否则地图上会不显示相应的value
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-06-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录