<!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="./echarts.js"></script>
</head>
<body>
<div id="main" style="width: 700px; height: 500px;background-color: rgb(22, 214, 240);"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"))
var option = {
tooltip:{
trigger:'axis',
axisPointer:{type:'shadow'}
},
legend:{
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
},
toolbox:{
show:true,
orient:'vertical',
x:'right',
y:'center',
feature:{
mark:{show:true},
dataView:{show:true,readOnly:false},
magicType:{show:true,type:['line','bar','stack','tiled']},
restore:{show:true},
saveAsImage:{show:true}
}
},
xAxis:[
{
type:'category',
data:['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis:[
{type:'value'}
],
series:[
{
name:'直接访问',
type:'bar',
data:[320,332,301,334,390,330,320],
},
{
name:'邮件营销',
type:'bar',
stack:'广告',
data:[120,132,101,134,90,230,210]
},
{
name:'联盟广告',
type:'bar',
stack:'广告',
data:[220,182,191,234,290,330,310]
},
{
name:'视频广告',
type:'bar',
stack:'广告',
data:[150,232,202,154,190,330,310]
},
{
name:'搜索引擎',
type:'bar',
data:[862,1018,964,1026,1679,1600,1570]
},
{
name:'百度',
type:'bar',
with:5,
stack:'搜索引擎',
data:[620,732,701,734,1090,1130,1120]
},
{
name:'谷歌',
type:'bar',
stack:'搜索引擎',
data:[120,132,101,134,290,230,220]
},
{
name:'必应',
type:'bar',
stack:'搜索引擎',
data:[60,72,71,74,190,130,110]
},
{
name:'其他',
type:'bar',
stack:'搜索引擎',
data:[62,82,91,84,109,110,120]
},
],
};
myChart.setOption(option);
</script>
</body>
</html>
