Echarts 示例代码
发布时间：2020-05-24 21:19:55 所属栏目：Java 来源：互联网
导读：Echarts 示例代码
|
下面是脚本之家 jb51.cc 通过网络收集整理的代码片段。 脚本之家小编现在分享给大家，也给大家做个参考。 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<title>Echarts</title>
<script type="text/javascript" src="js/esl.js"></script>
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
</head>
<body>
<div id="main" style="height:500px"></div>
<div>
<span id='wrong-message' style="color:red"></span>
<span id='hover-console' style="color:#1e90ff"></span>
<span id='console' style="color:#1e90ff">Event Console</span>
</div>
<!--echarts 包 -->
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript">
//路径配置
require.config({
paths:{
//zrender:'./zrender/src',echarts: './js',//"jquery":"./js/jquery-2.1.0.min"
}
});
var data_array=[12,47,39,45,30,20];
var str_array=["江西","福建","北京","黑龙江","海南","安徽"];
//设置主要样式
require(
[
'echarts','echarts/chart/bar','echarts/chart/line',//'jquery'
],function(ec){
//初始化echart对象
var myChart = ec.init(document.getElementById('main'));//ec.init( $("#main")));//
var option={
//标题
title:{
show:true,//主标题
text:"省份基地数量 ",link:"http://www.baidu.com",target:"blank",textStyle:{
color:"#9932CC"
},//副标题
subtext:"**机密**",sublink:'www.google.com',subtarget:'self',subtextStyle:{
color:"#8F8F8F",fontSize:16,align:'center'
},//位置
x:'left',y:'top',textAlign:'left',//颜色
backgroundColor:"#FFD39B",padding:2,//主副标题纵向间隔
itemGap:3,borderWidth:1
},//提示栏
tooltip:{
show:true,//zlevel:1,// z:3,//触发类型
trigger:'axis',//默认为'item'
//延时
//showDelay:1000,enterable:true,//颜色
backgroundColor:"#AB82FF",testStyle:{
color: 'yellow',decoration: 'none',fontFamily: 'Verdana,sans-serif',fontSize: 15,fontStyle: 'italic',fontWeight: 'bold'
},//坐标轴指示器
axisPointer:{
type: 'line',lineStyle: {
color: '#48b',width: 2,type: 'solid'
},crossStyle: {
color: '#1e90ff',width: 1,type: 'dashed'
},shadowStyle: {
color: 'rgba(150,150,0.3)',width: 'auto',type: 'default'
}
},//内容格式化
formatter:function(params,ticket,callback)
{
//处理提示框显示的信息
console.log(params);
var res=params[0].name+'<br/>';
for(var i=0;i<params.length;i++)
{
res+=params[i].seriesName+':'+params[i].value;
}
//模拟异步回调
setTimeout(function()
{
callback(ticket,res);
},500)
return "loading";
}
//formatter: "{b}<br/>{a}:{c}"
},//工具箱
toolbox:{
show:true,orient:'vertical',x:'right',itemSize:20,//特征
feature:{
mark : {
show : true,title : {
mark : '辅助线开关',markUndo : '删除辅助线',markClear : '清空辅助线'
},lineStyle : {
width : 2,color : '#1e90ff',type : 'dashed'
}
},dataZoom : {
show : true,title : {
dataZoom : '区域缩放',dataZoomReset : '区域缩放后退'
}
},dataView : {
show : true,title : '数据视图',readOnly: false,lang: ['数据视图','关闭','刷新']
},magicType: {
show : true,title : {
line : '折线图切换',bar : '柱形图切换',stack : '堆积',tiled : '平铺',force: '力导向布局图切换',chord: '和弦图切换',pie: '饼图切换',funnel: '漏斗图切换'
},//为各个切换试图单独设置option
/* option: {
// line: {...},// bar: {...},// stack: {...},// tiled: {...},// force: {...},// chord: {...},// pie: {...},// funnel: {...}
},*/
type : ['line','bar','stack','tiled']
},restore : {
show : true,title : '还原'
},saveAsImage : {
show : true,title : '保存为图片',type : 'png',lang : ['点击保存']
}
}
/* feature : {
mark : {show: true},dataView : {show: true,readOnly: false},magicType : {show: true,type: ['line','tiled']},restore : {show: true},saveAsImage : {show: true}
} */
},//图例
legend: {
data:str_array,//['销量']
//selectMode:'multiple',//selected:{
// '江西':false
// }
},xAxis:[
{
type:'category',data:str_array
}
],yAxis:[
{
type:'value'
}
],/* timeline:{ //时间轴
data:[
'2002-01-01','2003-01-01','2004-01-01','2005-01-01','2006-01-01','2007-01-01',],checkpointStyle:{
symbol : 'auto',symbolSize : 'auto',color : 'auto',borderColor : 'auto',borderWidth : 'auto',label: {
show: false,textStyle: {
color: 'red'
}
}
}
label : {
formatter : function(s) {
return s.slice(0,4);
}
},autoPlay : true,playInterval : 1000
},*/
//数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据
series:[
{
name:"数量",type:"bar",data:data_array,itemStyle: {normal: {areaStyle: {type: 'default'}}}
},{
name:"数量",type:"line",data:data_array
}
]
};//end of option
myChart.setOption(option);
//事件命名统一挂载到require('echarts/config').EVENT
var ecConfig = require('echarts/config');
//绑定事件
myChart.on(ecConfig.EVENT.CLICK,eConsole1);
//事件响应函数处理
function eConsole1(param) {
var mes = '【' + param.type + '】';
if (typeof param.seriesIndex != 'undefined') {
mes += ' seriesIndex : ' + param.seriesIndex;
mes += ' dataIndex : ' + param.dataIndex;
}
if (param.type == 'hover') {
document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;
alert(mes);
}
else {
document.getElementById('console').innerHTML = mes;
alert(mes);
}
console.log(param);
};
}//end of function
);//end of require
</script>
</body>
</html>
以上是脚本之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。 如果觉得脚本之家网站内容还不错，欢迎将脚本之家网站推荐给程序员好友。 （编辑：安卓应用网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |