您的位置:首页 > 其它

echarts集成 实例-包含柱状图、悬浮提示、文本提示

2016-11-25 15:13 393 查看
echarts的集成实例其实很多的,官方网站也有,在这里呢我就备注一下,记一下。

下面简单集成一个柱状图,主要分为三步曲:

1 .首先引入js

<script type="text/javascript" src="<c:url value="/lib/echarts/echarts-all.js"/>"></script>
<script type="text/javascript" src="<c:url value="/lib/echarts/config.js"/>"></script>


2.html 定义一个块,用于放图形

<div id="echarts" style="height:580px;width:100%"></div>


3.在js里面为图形添加内容

var myChart = echarts.init(document.getElementById("echarts"));
option = {
title : {
text: 'XXXX'

},
tooltip : {//鼠标悬浮弹窗提示
/*  trigger: 'axis' */
trigger : 'item',
show:true,
showDelay: 0,
hideDelay: 0,
transitionDuration:0,
backgroundColor : 'rgba(255,0,255,0.7)',
borderColor : '#f50',
borderRadius : 8,
borderWidth: 2,
padding: 10,    // [5, 10, 15, 20]
formatter: function (params,ticket,callback) {
// console.log(params);
var res = params[1]+   '<br/>'+"XX人数"+' : ' + params[2];
return res;
}
},
calculable : false,
xAxis : [
{
type : 'value',
boundaryGap : [0, 0.01]
}
],
yAxis : [
{
type : 'category',
data : nameList/* ['巴西','印尼','美国','印度','中国','世界人口(万)'] */
}
],
series : [
{
name:'XX人数',
type:'bar',
data:countList,/* [23, 1, 13, 15, 34, 68] */

itemStyle : {
normal : {
color : (function() {
var zrColor = zrender.tool.color;
return zrColor.getLinearGradient(0, 80, 0, 500,
[ [ 0, 'purple' ],
[ 0.5, 'orangered' ],
[ 1, 'orange' ] ])
})(),
label : {
show : true,
position : 'right' /* ,
formatter: function (params,ticket,callback) {
console.log(params);
var res =  params.data+"人";
return res;
} */
}
},
emphasis : {
label : {
show : true,
textStyle : {
color : 'orange',
fontWeight : 'bold'
}
}
}
}
}
]
};

myChart.setOption(option);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息