Echarts绘制折线图柱状图混合图表练习
使用绘制折线图柱状图混合图表练习
第一次看见这个图表库，感觉好NB。做个练习纪念纪念。
页面的布局和图表的设置。在官方示例上编辑修改很是方便。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双坐标系</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.common.min.js"></script>
<script>
$(document).ready(function () {
//放置图表的容器
var group = $("#group");
//设置容器的宽度、高度和背景颜色
group.css({
"width": "650px",
"height": "400px",
"background-color": "aliceblue"
});
//创建图表对象
var chart = echarts.init(group.get(0));
chart.showLoading();//显示等待条
//设置图表显示的内容
var option = {
legend: {
selectedMode: false,//不可点击
data: ['蒸发量', '降水量', '平均温度']
},
grid: {
left: 100
},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
splitLine: {//显示分割线
show: true
}
}
],
yAxis: [
{
type: 'value',
name: '水量',
splitLine: {//不显示分割线
show: false
},
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
axisLabel: {
formatter: '{value} °C'
},
splitLine: {
show: false
}
}
],
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: 'bar',
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: 'line',
yAxisIndex: 1,//索引从0开始
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]
}
]
};
// 使用刚指定的配置项和数据显示图表。
chart.setOption(option);
//两秒后关闭等待进度条
setTimeout(function () {
chart.hideLoading();//隐藏等待条
}, 2000);
});
</script>
</head>
<body>
<div id="group"></div>
</body>
</html>
实现效果上感觉比使用Hellocharts和MPAndroidChart方便了不少（当然这也没有什么可比性，不过可以试试使用MPAndroidChart实现类似这样的图表效果）运行效果如下图：
版权声明：本文为baidu_32377671原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。