<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Echarts图表</title>
<!-- 引入echarts.min.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
backgroundColor: '#000',
grid: {
left: 60,
right: 50,
top: 75,
bottom: 50
},
tooltip: {
trigger: 'axis',
showContent: true,
formatter: function(params) {
var res = '<div><p>' + params[0].name + '</p></div>'
for (var i = 0; i < params.length; i++) {
res += '<p>' + params[i].seriesName + ':' + params[i].value + '</p>'
}
return res;
}
},
toolbox: {
//这个是设置工具栏里要显示哪些工具，以及这些工具的样式等。
feature: {
//数据视图工具，可以展现图表所用的数据，并且可以编辑数据，再将编辑后的数据展示出来。同时也可以设置为数据为只读。
dataView: {
show: true,
readOnly: false
},
//动态类型切换
magicType: {
show: true,
type: ['line', 'bar']
},
//配置项还原
restore: {
show: true
},
//保存为图片
saveAsImage: {
show: true
}
}
},
legend: {
top: 10,
textStyle: {
fontSize: 10,
color: 'rgba(255,255,255,.7)'
},
data: ['下雨', '下雪', '晴天', '订单量']
},
xAxis: [{
type: 'category',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.2)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
axisLabel: {
color: "rgba(255,255,255,.7)"
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}],
yAxis: [{
type: 'value',
name: '订单量',
min: 0,
max: 200,
interval: 50,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.3)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.01)'
}
},
axisLabel: {
color: "rgba(255,255,255,.3)"
}
},
{
type: 'value',
name: '温度',
min: 0,
max: 25,
interval: 5,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.4)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0)'
}
},
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [{
name: '下雨',
type: 'bar',
itemStyle: {
normal: {
color: '#0bd6ff'
}
},
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',
itemStyle: {
normal: {
color: '#005fa0'
}
},
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: 'bar',
itemStyle: {
normal: {
color: '#2c7dfe'
}
},
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]
},
{
name: '订单量',
type: 'line',
itemStyle: {
normal: {
color: '#20fefe'
}
},
yAxisIndex: 1,
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>
