html部分
<div id="lineAndBar" style="width:1000px; height:320px"></div>
js部分
var WEcharts = echarts.init(document.getElementById("charts"))
var option = {
color:['#3D9AFF',"#FFAE53",'#D2DBE8','#76B5F7', '#FFAE53', '#d48265',],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
saveAsImage: {show: true}
}
},
legend: {
data: ['用水量', '用电量']
},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '水量',
min: 0,
max: 250,
interval: 30,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value}KW·H'
}
}
],
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: 'line',
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]
}
]
}
WEcharts.setOption(option)
注意 要去官网把对应得js和css引入echart下载链接
