<!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>
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main1" style="width: 600px; height: 400px;"></div>
<div id="main2" style="width: 600px; height: 400px;"></div>
<!-- 第一个水印 -->
<div class="watermark1">水印 1</div>
<!-- 第二个水印 -->
<div class="watermark2">水印 2</div>
<script type="text/javascript">
var myChart1=echarts.init(document.getElementById("main1"));
var waterMarkText = '小智张'; // 设置水印的字符
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.08;
ctx.font = '30px Microsoft Yahei'; // 设置水印文字的字体
ctx.translate(50, 50); // 设置水印文字的偏转值
ctx.rotate(-Math.PI / 4); // 设置水印旋转的角度
ctx.fillText(waterMarkText, 0, 0); // 设置填充水印
var option1={
title: {
text: '北斗七行受欢迎度',
subtext: '来源:百度',
},
tooltip: {
trigger: 'axis',
},
legend:{
data:['欢迎度'],
left:422,
color:'red',
top:8
},
xAxis: {
type: 'category',
data: ['璐姐', '岚姐', '蕾姐','巴巴','小胡','王哥','小妹']
},
yAxis: {
type: 'value'
},
series: [{
name: '欢迎度',
type: 'bar',
label: { // 柱状图上的文字设置
show: true, // 是否显示
rotate: 60, // 旋转角度
position: 'top' // 显示位置
},
barWidth: '30%', // 柱的宽度
data:[75,84,90,98,77,80,70]
}]
};
var myChart2=echarts.init(document.getElementById("main2"))
var option2={
title: {
text: '北斗七行受欢迎度',
subtext: '来源:百度',
},
tooltip: {
trigger: 'axis',
},
legend:{
data:['欢迎度'],
left:422,
color:'red',
top:8
},
xAxis: {
type: 'category',
data: ['璐姐', '岚姐', '蕾姐','巴巴','小胡','王哥','小妹']
},
yAxis: {
type: 'value'
},
series: [{
name: '欢迎度',
type: 'line',
label: { // 柱状图上的文字设置
show: true, // 是否显示
rotate: 60, // 旋转角度
position: 'top' // 显示位置
},
barWidth: '30%', // 柱的宽度
data:[75,84,90,98,77,80,70]
}]
};
myChart1.setOption(option1);// 为myChart1对象加载数据
myChart2.setOption(option2);// 为myChart2对象加载数据
// 多图表联动配置方法1:分别设置每个echarts对象的group值
myChart1.group='group1';
myChart2.group='group1';
echarts.connect('group1');
// 多图表联动配置方法2:直接传入需要联动的echarts对象myChart1,myChart2
echarts.connect([myChart1,myChart2]);
</script>
</body>
</html>