<!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>
<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 = 5;
ctx.font = '8px Microsoft Yahei'; // 设置水印文字的字体
ctx.translate(70, 70); // 设置水印文字的偏转值
ctx.rotate(-Math.PI / 4); // 设置水印旋转的角度
ctx.fillText(waterMarkText, 0, 0); // 设置填充水印
var option1={
backgroundColor: {type:'patten',image:canvas,repeat:'repeat'},
title:{
text:'咖啡店各年的订单数据分析',
left:'center'
},
tooltip:{
trigger:'item',
formatter:"{a}<br/>{b}:{c}({d}%)"
},
legend:{
orient:'vertical',
left:62,
top:22,
data:[]
},
toolbox:{
show:true,
left:444,
top:28,
feature:{
mark:{show:true},
dataView:{show:true,readOnly:false},
magicType:{
show:true,
type:['pie','funnel'],
option:{
funnel:{
x:'25%',
width:'50%',
funnelAlign:'left',
max:1548
}
}
},
restore:{show:true},
saveAsImage:{show:true}
}
},
calculable:true,
series: [
{
name: '订单量',
type: 'pie',
radius:'66%',
center:['58%','55%'],
clockWise:true,
data: [],
}
]
};
var myChart2=echarts.init(document.getElementById("main2"))
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 = 10;
ctx.font = '8px Microsoft Yahei'; // 设置水印文字的字体
ctx.translate(60, 60); // 设置水印文字的偏转值
ctx.rotate(-Math.PI / 4); // 设置水印旋转的角度
ctx.fillText(waterMarkText, 0, 0); // 设置填充水印
var option2={
backgroundColor: {type:'patten',image:canvas,repeat:'repeat'},
title: {
text: '咖啡店各年的订单数据分析',
},
// backgroundColor: 'rgba(204,204,204,0.7)',
tooltip: {
trigger: 'axis',
},
legend:{
data:[],
left:422,
color:'red',
top:8
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Milk Tea',
type: 'line',
data: [],
itemStyle: {
normal: {
color: 'red'
}
}
},
{
name: 'Matcha Latte',
type: 'line',
data: [],
itemStyle: {
normal: {
color: 'pink'
}
}
},
{
name: 'Cheese Cocoa',
type: 'line',
data: [],
itemStyle: {
normal: {
color: '#D8BFD8'
}
}
},
{
name: 'Walnut Brownie',
type: 'line',
data: [],
itemStyle: {
normal: {
color: '#D8BFD8'
}
}
},
]
};
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]);
myChart1.showLoading({
text:'请您稍等休息片刻, loading data...',
textStyle:{fontSize:35,
color:'green'
},
effect:"bubble",
color:'red',
textColor:'Lime',
maskColor:'yellow',
});
myChart2.showLoading({
text:'请您稍等休息片刻, loading data...',
textStyle:{fontSize:35,
color:'green'
},
effect:"bubble",
color:'red',
textColor:'Lime',
maskColor:'yellow',
});
$.getJSON("咖啡店各年订单.json",function(json){
var d =json.data;
var coffee1 =[];
var coffee2 =[];
});
for(var i=0;i<d.length;i++){
if(d[i].sex=='coffee'){
coffee1.push(d[i].value);
specList.push(d[i].specName);
}else{
coffee2.puah(d[i].value);
}
};
myChart1.setOption({
xAxis:{data:specList},
series:[{name:'订单量',data:coffee2}]
});
myChart2.setOption({
xAxis:{data:specList},
series:[{name:'',data:coffee1}]
});
setTimeout(() =>{
myChart1.hideLoading();
myChart1.setOption(option1);
},3000);
setTimeout(() =>{
myChart2.hideLoading();
myChart2.setOption(option2);
},3000);
</script>
</body>
</html>
echarts加载
于 2024-04-24 17:36:34 首次发布