通过对ECharts官网入门示例中的柱状图进行修改,实现基于同一份数据在一张图上同时绘制饼图与柱状图的效果。
数据
衬衫 | 羊毛衫 | 雪纺衫 | 裤子 | 高跟鞋 | 袜子 |
---|---|---|---|---|---|
5 | 20 | 36 | 10 | 10 | 20 |
结果
思路
刚开始做的时候对 ECharts 的语法以及数据的组织方式并不理解,因为这次主要是为了绘制出饼图和柱状图,所以着重看了这两种图的代码,然后在一起组织的时候经常因为我对语法不熟悉而出错,不过尝试了好几次之后也成功了,但是肯定是不对的,因为饼图和柱状图我使用了独立的数据,按理说这两个图共享一份数据才是正确的。
于是我通过仔细查阅官方教程的基础概念概览那一篇才有了思路,通过将数据存放在dataset
中,然后两个图分别从这里取数据即可。
通过这一个简单的入门小例子对 ECharts 的基础概念有了一定的了解,同时也深刻明白了官方文档的重要性,以后一定要仔细阅读文档。
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts Pie and Bar</title>
<!-- 引入 echarts.min.js -->
<script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 1200px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '商品销量',
left: "center",
textStyle: {
fontSize: 30,
color: "rgba(116, 10, 10, 1)",
fontWeight: "bolder"
}
},
tooltip: {},
legend: {
left: '8%',
top: '10%'
},
//右上角的功能小按钮
toolbox: {
show: true,
feature: {
dataView: { readOnly: false },
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
name: '商品',
nameTextStyle: {
fontSize: 15
}
},
yAxis: {
type: 'value',
name: '销量',
nameTextStyle: {
fontSize: 15
}
},
grid: {
left: '50%',
top: '15%'
},
//系列数据从 dataset 中取
dataset: {
source: [
['衬衫', 5],
['羊毛衫', 20],
['雪纺衫', 36],
['裤子', 10],
['高跟鞋', 10],
['袜子', 20]
]
},
series: [{
type: 'pie',
center: ['25%', '50%'],
radius: '50%',
// 数据从 dataset 中取,encode 中的数值是 dataset.source 的维度 index (即第几列)
encode: { itemName: 0, value: 1 }
},
{
type: 'bar',
encode: { x: 0, y: 1 }
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
直接将代码复制到文本编辑器中,保存为以.html
结尾的文件即可通过浏览器打开查看效果。
注:想要查看效果需要联网,因为echarts.min.js
文件是通过 CDN 在线引入的。