【ECharts】数据可视化：饼图与柱状图的绘制

最新推荐文章于 2024-05-22 09:57:12 发布

sylwair

最新推荐文章于 2024-05-22 09:57:12 发布

阅读量3.4k

点赞数 1

文章标签：数据可视化可视化 echarts javascript

本文链接：https://blog.youkuaiyun.com/weixin_45320846/article/details/107172973

版权

通过对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>