04-echarts的高级功能
目录
1. 双Y轴折线图与柱状图混搭
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5-1-双Y轴折线图与柱状图混搭</title>
</head>
<body>
<script src="js/echarts.js"></script>
<div id="box" style="width: 1000px;height: 600px"></div>
<script>
var myChart = echarts.init(document.getElementById("box"));
const colors = ['#5470C6', '#91CC75', '#EE6666'];
var option = {
backgroundColor: 'rgba(128,128,128,0.1)',
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['蒸发量', '降水量', '气温']
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
// prettier-ignore
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value',
name: '蒸发量',
position: 'right',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '降水量',
position: 'right',
alignTicks: true,
offset: 80,
axisLine: {
show: true,
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '气温',
position: 'left',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: '蒸发量',
type: 'bar',
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
},
{
name: '降水量',
type: 'bar',
yAxisIndex: 1,
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
]
},
{
name: '气温',
type: 'line',
yAxisIndex: 2,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
2. 带水印的柱状图与饼图混搭
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5-2-带水印的柱状图与饼图混搭</title>
</head>
<body>
<script src="js/echarts.js"></script>
<div id="box" style="width: 1000px;height: 600px"></div>
<script>
var myChart = echarts.init(document.getElementById("box"));
const builderJson = {
all: 10887,
charts: {
地理坐标图: 3237, //map
路径图: 2164, //lines
柱状图: 7561, //bar
折线图: 7778, //line
饼图: 7355, //pie
散点图: 2405, //scatter
K线图: 1842, //candlestick
雷达图: 2090, //radar
热力图: 1762, //heatmap
矩形树图: 1593, //treemap
关系图: 2060, //graph
盒须图: 1537, //boxplot
平行坐标系: 1908, //parallel
仪表盘图: 2107, //gauge
漏斗图: 1692, //funnel
桑基图: 1568 //sankey
},
components: {
地理坐标系组件: 2788, //geo
标题组件: 9575, //title
图例组件: 9400, //legend
提示组件: 9466, //tooltip
直角坐标系组件: 9266, //grid
图表标注组件: 3419, //markPoint
图表标线组件: 2984, //markLine
时间线组件: 2739, //timeline
区域缩放组件: 2744, //dataZoom
视觉映射组件: 2466, //visualMap
工具框组件: 3034, //toolbox
极坐标系组件: 1945 //polar
},
ie: 9743
};
const downloadJson = {
'完整版': 17365, //'echarts.min.js'
'精简版': 4079, //'echarts.simple.min.js'
'常用版': 6929, //'echarts.common.min.js'
'源代码版': 14890 //'echarts.js'
};
const themeJson = {
'黑色主题': 1594, //'dark.js'
'信息主题': 925, //'infographic.js'
'明亮主题': 1608, //'shine.js'
'罗马主题': 721, //'roma.js'
'马卡龙主题': 2179, //'macarons.js'
'复古主题': 1982 //'vintage.js'
};
const waterMarkText = 'ECHARTS';
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.08;
ctx.font = '20px Microsoft Yahei';
ctx.translate(50, 50);
ctx.rotate(-Math.PI / 4);
ctx.fillText(waterMarkText, 0, 0);
var option = {
backgroundColor: {
type: 'pattern',
image: canvas,
repeat: 'repeat'
},
// title: {
// text: '5-2-带水印的柱状图与饼图混搭',
// subtext: '某某'
// },
tooltip: {},
title: [
{
text: '5-2-带水印的柱状图与饼图混搭',
textStyle: {
fontSize: 14,
},
subtext: '某某'
},
{
text: '在线构建',
subtext: '总计 ' + builderJson.all,
x: '25%',
textAlign: 'center'
},
{
text: '各标题组件的使用次数',
subtext:
'总计 ' +
Object.keys(downloadJson).reduce(function (all, key) {
return all + downloadJson[key];
}, 0),
x: '25%', y: '50%',
textAlign: 'center'
},
{
text: '各版本下载',
subtext:
'总计 ' +
Object.keys(downloadJson).reduce(function (all, key) {
return all + downloadJson[key];
}, 0),
x: '75%',
textAlign: 'center'
},
{
text: '主题下载',
subtext:
'总计 ' +
Object.keys(themeJson).reduce(function (all, key) {
return all + themeJson[key];
}, 0),
x: '75%', y: '50%',
textAlign: 'center'
}
],
grid: [
{
top: 50,
width: '50%',
bottom: '50%',
left: 10,
containLabel: true
},
{
top: '55%',
width: '50%',
bottom: 0,
left: 10,
containLabel: true
}
],
xAxis: [
{
type: 'value',
max: builderJson.all,
splitLine: {
show: false
}
},
{
type: 'value',
max: builderJson.all,
gridIndex: 1,
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'category',
data: Object.keys(builderJson.charts),
axisLabel: {
interval: 0,
rotate: 30
},
splitLine: {
show: false
}
},
{
gridIndex: 1,
type: 'category',
data: Object.keys(builderJson.components),
axisLabel: {
interval: 0,
rotate: 30
},
splitLine: {
show: false
}
}
],
series: [
{
type: 'bar',
stack: 'chart',
z: 3,
label: {
position: 'right',
show: true
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.charts[key];
})
},
{
type: 'bar',
stack: 'chart',
silent: true,
itemStyle: {
color: '#eee'
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.all - builderJson.charts[key];
})
},
{
type: 'bar',
stack: 'component',
xAxisIndex: 1,
yAxisIndex: 1,
z: 3,
label: {
position: 'right',
show: true
},
data: Object.keys(builderJson.components).map(function (key) {
return builderJson.components[key];
})
},
{
type: 'bar',
stack: 'component',
silent: true,
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
color: '#eee'
},
data: Object.keys(builderJson.components).map(function (key) {
return builderJson.all - builderJson.components[key];
})
},
{
type: 'pie',
radius: [0, '30%'],
center: ['75%', '25%'],
data: Object.keys(downloadJson).map(function (key) {
return {
name: key.replace('.js', ''),
value: downloadJson[key]
};
})
},
{
type: 'pie',
radius: [0, '30%'],
center: ['75%', '75%'],
data: Object.keys(themeJson).map(function (key) {
return {
name: key.replace('.js', ''),
value: themeJson[key]
};
})
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
3. 柱状图联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>柱状图联动图表</title>
</head>
<body>
<script src="js/echarts.js"></script>
<div id="box1" style="width: 800px;height: 368px"></div>
<div id="box2" style="width: 800px;height: 368px"></div>
<script>
var myChart1 = echarts.init(document.getElementById("box1"));
var myChart2 = echarts.init(document.getElementById("box2"));
var option1 = {
backgroundColor: 'rgba(128,128,128,0.1)',
color: ['LimeGreen','DarkGreen','red','blue','Purple'],
title: {
text: '5-3-柱状图联动图表',
left: 40,
top: 5,
subtext: '某某'
},
tooltip: {
show: true
},
legend: {
data: ['2019年招生'],
left: 422,
top: 8
},
xAxis: [
{
data: ['大数据', '云计算', 'Oracle', 'ERP', '人工智能', '软件开发', '移动开发', '网络技术']
}
],
yAxis: [
{
type: 'value',
},
],
series: [
{
name: '2019年招生',
type: 'bar',
BarWidth: 40,
data: [
125, 62, 45, 56, 123, 205, 108, 128
]
},
]
};
var option2 = {
backgroundColor: 'rgba(128,128,128,0.1)',
color: ['blue','LimeGreen','DarkGreen','red','Purple'],
title: {
text: '5-3-柱状图联动图表',
left: 40,
top: 8,
subtext: '某某'
},
tooltip: {
show: true
},
legend: {
data: ['2020年招生'],
left: 422,
top: 8
},
xAxis: [
{
data: ['大数据', '云计算', 'Oracle', 'ERP', '人工智能', '软件开发', '移动开发', '网络技术']
}
],
yAxis: [
{
type: 'value',
},
],
series: [
{
name: '2020年招生',
type: 'bar',
BarWidth: 40,
data: [
325, 98, 53, 48, 222, 256, 123, 111
]
},
]
};
myChart1.setOption(option1);
myChart2.setOption(option2);
echarts.connect([myChart1,myChart2])
</script>
</body>
</html>
运行效果：
多图表联动配置方法
//多图表联动配置方法1：分别设置每个echarts对象的group值
//myChart1.group = 'group1';
//myChart2.group = 'group1';
//echarts.connect('group1');
//多图表联动配置方法2：直接传入需要联动的echarts对象myChart1，myChart2
echarts.connect([myChart1,myChart2]);
4. 饼图与柱状图联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>饼图与柱状图联动</title>
</head>
<body>
<script src="js/echarts.js"></script>
<div id="box1" style="width: 800px;height: 368px"></div>
<div id="box2" style="width: 800px;height: 368px"></div>
<script>
var myChart1 = echarts.init(document.getElementById("box1"));
var myChart2 = echarts.init(document.getElementById("box2"));
var option1 = {
backgroundColor: 'rgba(128,128,128,0.1)',
color: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrChid', 'Navy'],
title: {
text: '5-4-饼图与柱状图联动图表',
x: 'center',
y: 5,
subtext: '某某'
},
tooltip: {
show: true,
trigger: 'item',
formatter: '{a}<br/>{b}:{c}({d}%)'
},
legend: {
orient: 'vertical',
data: ['2016', '2017', '2018', '2019', '2020'],
x: 15,
y: 15,
},
series: [
{
name: '总人数',
type: 'pie',
radius: '70%',
center: ['50%', 190],
data: [
{
value: 1695,
name: '2016'
},
{
value: 1790,
name: '2017'
},
{
value: 2250,
name: '2018'
},
{
value: 2250,
name: '2019'
},
{
value: 2570,
name: '2020'
},
]
},
]
};
var option2 = {
backgroundColor: 'rgba(128,128,128,0.1)',
color: ['red', 'Lime', 'blue', 'DarkGreen', 'DarkOrChid', 'Navy'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['大数据', 'Oracle', '云计算', '人工智能', '软件工程'],
left: 42,
top: 25
},
toolbox: {
show: true,
orient: 'vertical',
left: 550,
top: 'center',
feature: {
mark: { show: true },
restore: { show: true },
saveAsImage: { show: true },
magicType: {
show: true,
type: ['line','bar','stack','tiled']
}
}
},
xAxis: [
{
data: ['2016', '2017', '2018', '2019', '2020'],
}
],
yAxis: [
{
type: 'value',
splitArea: {show: true}
},
],
series: [
{
name: '大数据',
type: 'bar',
stack: '总量',
BarWidth: 45,
data: [
301, 334, 390, 330, 320
]
},
{
name: 'Oracle',
type: 'bar',
stack: '总量',
BarWidth: 45,
data: [
101, 134, 90, 230, 210
]
},
{
name: '云计算',
type: 'bar',
stack: '总量',
BarWidth: 45,
data: [
191, 234, 290, 330, 310
]
},
{
name: '人工智能',
type: 'bar',
stack: '总量',
BarWidth: 45,
data: [
201, 154, 190, 330, 410
]
},
{
name: '软件工程',
type: 'bar',
stack: '总量',
BarWidth: 45,
data: [
901, 934, 1290, 1330, 1320
]
},
]
};
myChart1.setOption(option1);
myChart2.setOption(option2);
echarts.connect([myChart1,myChart2])
</script>
</body>
</html>
运行效果：
5. Echarts主题
1.设置主题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置马卡龙主题</title>
</head>
<body>
<script src="js/echarts.js"></script>
<script src="js/macarons.js"></script>
<div id="box" style="width: 800px;height: 600px"></div>
<script>
var myChart = echarts.init(document.getElementById("box"),'macarons');
var option = {
title: {
text: '设置马卡龙主题',
left: 60,
top: 2,
subtext: 'xxx'
},
tooltip: {},
grid: {
show: true
},
legend: {
left: 510,
top: 10,
data: ['2018', '2019', '2020'],
},
xAxis: [
{
data: ['大数据', '云计算', '人工智能', '网络工程' ,'移动开发','软件开发']
}
],
yAxis: {},
series: [
{
name: '2018',
type: 'bar',
data: [
122, 55, 44, 56, 110,222
]
},
{
name: '2019',
type: 'bar',
data: [
315, 98, 122, 96,115,278
]
},
{
name: '2020',
type: 'bar',
data: [
382, 123, 222, 94, 125,369
]
},
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
2.主题切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Echarts主题切换</title>
</head>
<body>
<script src="js/echarts.js"></script>
<script src="js/infographic.js"></script>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/macarons.js"></script>
<script src="js/roma.js"></script>
<script src="js/shine.js"></script>
<script src="js/vintage.js"></script>
<div id="themeArea"><label>Echarts主题切换</label></div>
<select name="" id="sel">
<option value="dark">dark</option>
<option value="macarons">macarons</option>
<option value="roma">roma</option>
<option value="shine">shine</option>
<option value="vintage">vintage</option>
<option value="infographic">infographic</option>
</select>
<div id="box" style="width: 800px;height: 600px"></div>
<script>
var myChart = echarts.init(document.getElementById("box"));
var option = {
title: {
text: '5-5-shine主题柱状图',
left: 60,
top: 2,
subtext: '某某'
},
tooltip: {},
grid: {
show: true
},
legend: {
left: 510,
top: 10,
data: ['2018', '2019', '2020'],
},
xAxis: [
{
data: ['大数据', '云计算', '人工智能', '网络工程' ,'移动开发','软件开发']
}
],
yAxis: {},
series: [
{
name: '2018',
type: 'bar',
data: [
122, 55, 44, 56, 110,222
]
},
{
name: '2019',
type: 'bar',
data: [
315, 98, 122, 96,115,278
]
},
{
name: '2020',
type: 'bar',
data: [
382, 123, 222, 94, 125,369
]
},
]
};
myChart.setOption(option);
$('#sel').change(function(){
myChart.dispose();
let Theme = $(this).val();
myChart = echarts.init(document.getElementById('box'),Theme);
myChart.setOption(option);
});
</script>
</body>
</html>
运行效果：
6. 时间轴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时间轴</title>
</head>
<body>
<script src="js/echarts.js"></script>
<div id="box" style="width: 1000px;height: 600px"></div>
<script>
var myChart = echarts.init(document.getElementById("box"));
var option = {
baseOption: {
timeline: {
axisType: "category",
data: ['2020', '2021', '2022'],
autoPlay: true,
loop: true,
playInterval: 1000
},
title: {
text: '时间轴',
subtext: '某某'
},
xAxis: {
type: 'category',
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar'
}
]
},
options: [
{
title: {
text: "2020年销量"
},
series: [{
data: [
{name: '衬衫',value: '120'},
{name: '羊毛衫',value: '80'},
{name: '雪纺衫',value: '320'},
{name: '裤子',value: '100'},
{name: '高跟鞋',value: '50'},
{name: '袜子',value: '300'},
]
}
]
},
{
title: {
text: "2021年销量"
},
series: [{
data: [
{name: '衬衫',value: '130'},
{name: '羊毛衫',value: '60'},
{name: '雪纺衫',value: '360'},
{name: '裤子',value: '180'},
{name: '高跟鞋',value: '60'},
{name: '袜子',value: '250'},
]
}
]
},
{
title: {
text: "2022年销量"
},
series: [{
data: [
{name: '衬衫',value: '180'},
{name: '羊毛衫',value: '90'},
{name: '雪纺衫',value: '200'},
{name: '裤子',value: '130'},
{name: '高跟鞋',value: '80'},
{name: '袜子',value: '350'},
]
}
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行效果：
7. 添加鼠标单击事件的柱状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="js/echarts.js"></script>
<div id="main" style="width: 800px;height: 600px"></div>
<script>
var myChart = echarts.init(document.getElementById("main"));
var option = {
color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
backgroundColor: 'rgba(128,128,128,0.1)',
title: {
text: '添加鼠标单击事件的柱状图',
subtext: '某某'
},
tooltip: {},
legend: {
data: ['2019年招生'],
left: 422,
top: 8
},
xAxis: {
data: ['大数据', '云计算', 'ERP', '人工智能', '软件开发', '移动开发', '网络技术']
},
yAxis: {},
series: [
{
name: '招生人数',
type: 'bar',
barWidth: 55,
data: [350, 200, 66, 210, 200, 135]
}
]
};
myChart.setOption(option);
myChart.on('click',function(params){
var yt = alert("鼠标单击事件，您刚才单击了：" + params.name);
window.open('https://www.baidu.com/s?wd='+encodeURIComponent(params.name));
});
window.addEventListener("resize",function(){
myChart.resize();
});
</script>
</body>
</html>
运行效果：
8. 包含鼠标单击事件的参数params的柱状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="js/echarts.js"></script>
<div id="main" style="width: 1000px;height: 600px"></div>
<script>
var myChart = echarts.init(document.getElementById("main"));
var option = {
color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
backgroundColor: 'rgba(128,128,128,0.1)',
title: {
text: '5-7-包含鼠标单击事件的参数params的柱状图',
subtext: '某某',
left: 70,
top: 9
},
tooltip: {
trigger: 'item',
show: true,
formatter: "{a} <br/>{b} : {c}"
},
legend: {
left: 600,
top: 9
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
},
{
name: '产量',
type: 'bar',
data: [15,38,20,24,20,45]
},
{
name: '利润',
type: 'bar',
data: [25,15,10,10,15,22]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
myChart.on('click',function(params){
alert("第"+(params.dataIndex+1)+"件产品："+params.name+"的"
+params.seriesName+"为："+params.value+
"\n\n 1--componentType:"+params.componentType+
"\n 2--seriesType:"+params.seriesType+
"\n 3--seriesIndex"+params.seriesIndex+
"\n 4--seriesName"+params.seriesName+
"\n 5--nmae"+params.name+
"\n 6--dataIndex:"+params.dataIndex+
"\n 7--data:"+params.data+
"\n 8--dataType"+params.dataType+
"\n 9--value"+params.value+
"\n 10--color:"+params.color);
});
</script>
</body>
</html>
运行效果：
9. 图例选中事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="js/echarts.js"></script>
<div id="main" style="width: 1000px;height: 600px"></div>
<script>
var myChart = echarts.init(document.getElementById("main"));
var option = {
color: ['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple'],
backgroundColor: 'rgba(128,128,128,0.1)',
title: {
text: '5-8-图例选中事件',
subtext: '某某',
left: 70,
top: 9
},
tooltip: {
trigger: 'item',
show: true,
formatter: "{a} <br/>{b} : {c}"
},
legend: {
left: 600,
top: 9
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
},
{
name: '产量',
type: 'bar',
data: [15, 38, 20, 24, 20, 45]
},
{
name: '利润',
type: 'bar',
data: [25, 15, 10, 10, 15, 22]
}
]
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
myChart.on('click', function (params) {
alert("第" + (params.dataIndex + 1) + "件产品：" + params.name + "的"
+ params.seriesName + "为：" + params.value +
"\n\n 1--componentType:" + params.componentType +
"\n 2--seriesType:" + params.seriesType +
"\n 3--seriesIndex" + params.seriesIndex +
"\n 4--seriesName" + params.seriesName +
"\n 5--nmae" + params.name +
"\n 6--dataIndex:" + params.dataIndex +
"\n 7--data:" + params.data +
"\n 8--dataType" + params.dataType +
"\n 9--value" + params.value +
"\n 10--color:" + params.color);
});
myChart.on('legendselectchanged', function (params) {
var isSelected = params.selected[params.name];
// 在控制台打印
console.log((isSelected ? '你选中了' : '你取消选中了') + '图例：' + params.name);
console.log(params.selected);
});
</script>
</body>
</html>
运行效果：
10. 调用datazoom（数据区域缩放组件）事件的折线图与柱状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="js/echarts.js"></script>
<div id="main1" style="width: 800px;height: 600px"></div>
<div id="main2" style="width: 800px;height: 600px"></div>
<script>
var myChart1 = echarts.init(document.getElementById("main1"));
var myChart2 = echarts.init(document.getElementById("main2"));
var data = [];
var now = new Date(2020, 5, 2, 24, 60, 60);
var oneDay = 24 * 600 * 600;
function randomData() {
now = new Date(+now + oneDay);
value = Math.random() * 80 + 20;
return {
name: now.toLocaleString('chinese', { hour12: false }),
value: [
now.toLocaleString('chinese', { hour12: false }),
Math.round(value)
]
}
}
for (var i = 0; i < 300; i++) {
data.push(randomData());
}
var option1 = {
color: ['DarkGreen', 'red', 'LimeGreen', 'blue', 'Purple', 'GreenYellow', 'DarkTurquoise'],
backgroundColor: 'rgba(128,128,128,0.1)',
title: {
text: '5-9-调用datazoom（数据区域缩放组件）事件的折线图与柱状图',
subtext: '某某',
left: 110,
top: 12
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0];
var date = new Date(params.name);
return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日' + ':' + params.value[1];
},
axisPointer: { animation: false }
},
xAxis: {
type: 'time',
splitLine: { show: false }
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: { show: false }
},
dataZoom: [
{
type: 'inside',
show: true,
start: 20,
end: 70,
}
],
series: [
{
name: '模拟数据',
type: 'line',
data: data
}
]
};
var option2 = {
color: ['blue', 'LimeGreen','red','DarkGreen', 'Purple', 'GreenYellow', 'DarkTurquoise'],
backgroundColor: 'rgba(128,128,128,0.1)',
title: {
text: '此图表与上面同步变化',
left: 110,
top: 12
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0];
var date = new Date(params.name);
return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日' + ':' + params.value[1];
},
axisPointer: { animation: false }
},
xAxis: {
type: 'time',
splitLine: { show: false }
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: { show: false }
},
dataZoom: [
{
type: 'inside',
show: true,
start: 0,
end: 100,
}
],
series: [
{
name: '模拟数据',
type: 'bar',
data: data
}
]
};
myChart1.setOption( option1);
myChart2.setOption(option2);
myChart1.on('datazoom',function(params){
console.log(params);
var startValue = myChart1.getModel().option.dataZoom[0].startValue;
var endValue = myChart1.getModel().option.dataZoom[0].endValue;
var startPercent = myChart1.getModel().option.dataZoom[0].start;
var endPercent = myChart1.getModel().option.dataZoom[0].end;
console.log(startValue,endValue,startPercent,endPercent);
option2.dataZoom[0].start = startPercent;
option2.dataZoom[0].end = endPercent;
myChart2.setOption(option2);
});
</script>
</body>
</html>
运行效果：
浙公网安备 33010602011771号