###多图例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#top{
width: 100%;
height: 400px;
/* background-color: red; */
/* float: left; */
}
#topL{
width: 50%;
height: 100%;
/* background-color: green; */
float: left;
}
#topR{
width: 50%;
height: 100%;
/* background-color: fuchsia; */
float:right;
}
#foot{
width: 100%;
height: 560px;
}
#footL{
width: 50%;
height: 100%;
/* background-color: green; */
float: left;
}
#footR{
width: 50%;
height: 100%;
/* background-color: green; */
float:right;
}
</style>
</head>
<body>
<!-- <div id="map-wrap0" style="width: 98%;height:800px;"></div> -->
<div id="body">
<div id="top">
<div id="topL"></div>
<div id="topR">
<h3>全球GMV数据展示</h3>
<div id="topTops"></div>
</div>
</div>
<div id="foot">
<div id="footL"></div>
<div id="footR">
</div>
</div>
</div>
</body>
<script src="./lib/jquery/jQuery-2.1.4.min.js"></script>
<script src="./lib/dep/echarts.js"></script>
<script src="./lib/map/json/world.js"></script>
<script>
var mapChart = echarts.init(document.getElementById('topL'));
var topLOption = {
title : {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
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',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} °C'
}
}
],
series : [
{
name:'最高气温',
type:'line',
data:[0, 15],
markPoint : {
data : [
// {type : 'max', name: '最大值'},
// {type : 'min', name: '最小值'}
]
},
smooth:true,
markLine : {
data : [
// {type : 'average', name: '平均值'}
]
}
},
{
name:'最低气温',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint : {
data : [
// {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
]
},
markLine : {
data : [
// {type : 'average', name : '平均值'}
]
}
}
]
};
mapChart.setOption(topLOption);
// var maptopL = echarts.init(document.getElementById('topL'));
//------------------------------------引用请注明出处
// 自定义纹理(参考echarts的饼图纹理 http://gallery.echartsjs.com/editor.html?c=pie-pattern)
var myImg = new Image();
var myColor=['red','orange','yellow','green','cyan','blue','purple'];
var xAxisData=['Sun', 'Mon', 'Tue'];
var optionFoot = {
title: {
text: 'Echarts Color引申用法',
subtext:'作者 : 花自飘凌水自流'
},
toolbox:{
right:20,
feature:{
saveAsImage: {},
restore: {},
dataView: {},
dataZoom: {},
magicType: {
type:['line','bar']
},
// brush: {},
}
},
grid: [
{
show: false,
left: 0,
top: '12%',
containLabel: true,
width: '22.5%',
height:'40%'
},
{
show: false,
left: '25%',
top: '12%',
containLabel: true,
width: '22.5%',
height:'40%'
},
{
show: false,
left: 0,
top: '12%',
left: '50%',
containLabel: true,
width: '22.5%',
height:'40%'
},
{
show: false,
left: '75%',
top: '12%',
containLabel: true,
width: '22.5%',
height:'40%'
},
{
show: false,
left: 0,
top: '60%',
containLabel: true,
width: '22.5%',
height:'40%'
},
{
show: false,
left: '25%',
top: '60%',
containLabel: true,
width: '22.5%',
height:'40%'
},
{
show: false,
left: 0,
top: '60%',
left: '50%',
containLabel: true,
width: '22.5%',
height:'40%'
},
{
show: false,
left: '75%',
top: '60%',
containLabel: true,
width: '22.5%',
height:'40%'
},
],
xAxis: [
{
gridIndex:0,
axisTick:{
alignWithLabel: true
},
data:xAxisData
},
{
gridIndex:1,
axisTick:{
alignWithLabel: true
},
data:xAxisData
},
{
gridIndex:2,
axisTick:{
alignWithLabel: true
},
data:xAxisData
},
{
gridIndex:3,
axisTick:{
alignWithLabel: true
},
data:xAxisData
},
{
gridIndex:4,
axisTick:{
alignWithLabel: true
},
data:xAxisData
},
{
gridIndex:5,
axisTick:{
alignWithLabel: true
},
data:xAxisData
},
{
gridIndex:6,
axisTick:{
alignWithLabel: true
},
data:xAxisData
},
{
gridIndex:7,
axisTick:{
alignWithLabel: true
},
data:xAxisData
}
],
yAxis: [
{
gridIndex:0,
},
{
gridIndex:1,
},
{
gridIndex:2,
},
{
gridIndex:3,
},
{
gridIndex:4,
},
{
gridIndex:5,
},
{
gridIndex:6,
},
{
gridIndex:7,
},
],
series: [
{
type: 'bar',
name:'自定义纹理',
xAxisIndex:0,
yAxisIndex:0,
itemStyle: {
normal: {
color: {
// image: myImg,
repeat: 'repeat'
},
borderWidth: 3,
borderColor: '#235894'
}
},
data:[220, 182, 191]
},
{
type: 'bar',
xAxisIndex:1,
yAxisIndex:1,
name:'渐变1',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 0, 0, 0.8)'
}, {
offset: 0.8,
color: 'rgba(0, 255, 0, 0.8)'
}], false),
}
},
data:[220, 182, 191]
},
{
type: 'bar',
xAxisIndex:2,
yAxisIndex:2,
name:'渐变2',
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(14,125,218,0.8)'
}, {
offset: 1, color: 'rgba(14,125,218,0.3)'
}],
globalCoord: false
}
}
},
data:[220, 182, 191]
},
{
type: 'bar',
xAxisIndex:3,
yAxisIndex:3,
itemStyle: {
normal: {
// callback,设定每一bar颜色,配置项color顶axis一组bars颜色
color: function(params) {
var num=myColor.length;
return myColor[params.dataIndex%num]
}
}
},
data:[220, 182, 191]
},
{
type: 'bar',
name:'自定义纹理',
xAxisIndex:4,
yAxisIndex:4,
itemStyle: {
normal: {
color: {
// image: myImg,
repeat: 'repeat',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 0, 0, 0.8)'
}, {
offset: 0.8,
color: 'rgba(0, 255, 0, 0.8)'
}], false),
},
borderWidth: 3,
borderColor: '#235894'
}
},
data:[220, 182, 191]
},
{
type: 'bar',
xAxisIndex:5,
yAxisIndex:5,
name:'渐变1',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 0, 0, 0.8)'
}, {
offset: 0.8,
color: 'rgba(0, 255, 0, 0.8)'
}], false),
}
},
data:[220, 182, 191]
},
{
type: 'bar',
xAxisIndex:6,
yAxisIndex:6,
name:'渐变2',
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(14,125,218,0.8)'
}, {
offset: 1, color: 'rgba(14,125,218,0.3)'
}],
globalCoord: false
}
}
},
data:[220, 182, 191]
},
{
type: 'bar',
xAxisIndex:7,
yAxisIndex:7,
itemStyle: {
normal: {
// callback,设定每一bar颜色,配置项color顶axis一组bars颜色
color: function(params) {
var num=myColor.length;
return myColor[params.dataIndex%num]
}
}
},
data:[220, 182, 191]
}
]
};
// var maptopL = echarts.init(document.getElementById('topL'));
var mapfoot = echarts.init(document.getElementById('footL'));
mapfoot.setOption(optionFoot);
var color =['#FF0000', ' #FF7F00', '#FFFF00', '#00FF00', '#00FFFF', '#64F7CD','orangered', '#8B00FF','#1E85FF','#334455',"#64F7CD"];
var data = [{
"time": 2017,
"data": [{
"name": "United States",
"value": [1025000, 31.222, "美国分部",'red']
},
{
"name": "Russia",
"value": [433412, 13.202, "俄国分部",'green']
}
,
{
"name": "Japan",
"value": [209071, 6.369, "日本分部",'#ddd']
}
// ,
// {
// "name": "Japan",
// "value": [209071, 6.369, "日本分部"]
// }, {
// "name": "Germany",
// "value": [208867, 6.362, "德国分部"]
// }, {
// "name": "France",
// "value": [146982, 4.477, "法国分部"]
// }, {
// "name": "United Kingdom",
// "value": [124970, 3.807, "英国分部"]
// }, {
// "name": "Italy",
// "value": [109260, 3.328, "意大利分部"]
// }, {
// "name": "China",
// "value": [91506, 2.787, "中国分部"]
// }, {
// "name": "Canada",
// "value": [86303, 2.629, "加拿大分部"]
// }, {
// "name": "India",
// "value": [61470, 1.873, "印度分部"]
// }
]
}]
var optionFootR = {
backgroundColor: '',
baseOption: {
animationDurationUpdate: 1000,
animationEasingUpdate: '',
timeline: {
show:false,
axisType: 'category',
orient: 'vertical',
autoPlay: true,
inverse: true,
playInterval: 5000,
left: null,
right: 5,
top: 20,
bottom: 20,
width: 46,
height: null,
label: {
normal: {
textStyle: {
color: '#ddd'
}
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
symbol: 'none',
lineStyle: {
color: '#555'
},
checkpointStyle: {
color: '#bbb',
borderColor: '#777',
borderWidth: 1
},
controlStyle: {
showNextBtn: false,
showPrevBtn: false,
normal: {
color: '#666',
borderColor: '#666'
},
emphasis: {
color: '#aaa',
borderColor: '#aaa'
}
},
data: data.map(function(ele) {
return ele.time
})
},
backgroundColor: '#25499F',
title: {
text: '2017全球GMV情况',
subtext: '统计单位:100',
left: 'center',
top: 'top',
textStyle: {
fontSize: 25,
color: 'rgba(255,255,255, 0.9)'
}
},
tooltip: {
formatter: function(params) {
if ('value' in params.data) {
return params.data.value[2] + ': ' + params.data.value[0];
}
}
},
grid: {
left: 10,
right: '45%',
top: '70%',
bottom: 5
},
xAxis: {},
yAxis: {},
series: [{
id: 'map',
type: 'map',
mapType: 'world',
top: '10%',
//bottom: '25%',
//left: '5%',
//right: '10%',
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#404a59'
},
emphasis: {
label: {
show: true
},
areaColor: 'rgba(255,255,255, 0.5)'
}
},
data: []
}, {
id: 'bar',
type: 'bar',
tooltip: {
show: false
},
label: {
normal: {
show: true,
position: 'right',
textStyle: {
color: '#ddd'
}
}
},
data: []
}, {
id: 'pie',
type: 'pie',
radius: ['12%', '20%'],
center: ['75%', '85%'],
//roseType: 'area',
tooltip: {
formatter: '{b} {d}%'
},
data: [],
label: {
normal: {
textStyle: {
color: '#ddd'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: '#ddd'
}
}
},
itemStyle: {
normal: {
borderColor: 'rgba(0,0,0,0.3)',
borderSize: 1
}
}
}]
},
options: []
}
//@mark:待优化
for (var i = 0; i < data.length; i++) {
//计算其余国家GDP
var restPercent = 100;
var restValue = 0;
data[i].data.forEach(function(ele) {
restPercent = restPercent - ele.value[1];
});
restValue = data[i].data[0].value[0] * (restPercent / data[i].data[0].value[1]);
optionFootR.options.push({
// visualMap: [{
// //type:'continous',
// //type: 'continuous',
// show:false,
// calculable: true,
// dimension: 0,
// left: 10,
// top: 'center',
// itemWidth: 12,
// min: data[i].data[9].value[0],
// max: data[i].data[0].value[0],
// text: ['High', 'Low'],
// textStyle: {
// color: '#ddd'
// },
// inRange: {
// //color: ['lightskyblue', 'yellow', 'orangered', 'red']
// color: ['lightskyblue', 'yellow', 'white'],
// }
// }],
xAxis: {
type: 'value',
boundaryGap: [0, 0.1],
axisLabel: {
show: false,
},
splitLine: {
show: false
}
},
yAxis: {
type: 'category',
axisLabel: {
show: false,
textStyle: {
color: '#ddd'
}
},
data: data[i].data.map(function(ele) {
return ele.value[2]
})
// .reverse()
},
series: [{
id: 'map',
data: data[i].data,
itemStyle: {
normal: {
// callback,设定每一bar颜色,配置项color顶axis一组bars颜色
color: function(params) {
var num=myColor.length;
console.log(params.data);
if(params.data.value){
// console.log(params.data);
// console.log(params.data.value[3]);
// console.log(params.data);
return params.data.value[3]
}
// console.log(params.data.value[3])
// return params.data.value[3]
// myColor[params.dataIndex%num]
}
}
},
}, {
id: 'bar',
label: {
normal: {
position: 'right',
formatter: '{b} : {c}',
}
},
itemStyle: {
normal: {
// callback,设定每一bar颜色,配置项color顶axis一组bars颜色
color: function(params) {
var num=myColor.length;
// var arr =['red','green'];
// console.log(params)
// return ''+params+''
// console.log(params.dataIndex)
return myColor[params.dataIndex];
}
}
},
data: data[i].data.map(function(ele) {
return ele.value[0]
})
// .sort(function(a, b) {
// return a > b
// })
}, {
id: 'pie',
data: data[i].data.map(function(ele) {
return {
name: ele.value[2]+' '+ele.value[1]+'%',
value: ele.value
}
}),
itemStyle: {
normal: {
// callback,设定每一bar颜色,配置项color顶axis一组bars颜色
color: function(params) {
var num=myColor.length;
// var arr =['red','green'];
// console.log(params)
// return ''+params+''
// console.log(params.dataIndex)
return myColor[params.dataIndex];
}
}
},
}]
})
}
var mapfootR = echarts.init(document.getElementById('footR'));
mapfootR.setOption(optionFootR);
</script>
</html>
复制代码