Echarts实训-咖啡店热门订单分析

最新推荐文章于 2024-05-22 10:05:28 发布

昭昭a

最新推荐文章于 2024-05-22 10:05:28 发布

阅读量531

点赞数 19

文章标签： echarts

本文链接：https://blog.csdn.net/l15972865175/article/details/137881506

版权

一、实训题目

二、完整代码

三、代码实现

一、实训题目

1.训练要点
(1)掌握 ECharts 多图表联动图形的绘制。

(2)掌握 ECharts 加载异步数据。

2、需求说明基于“咖啡店年订单json”数据，绘制饼图与折线图的多图表联动，对咖啡店各年
的订单数据进行分析。
3、实现思路及步骤
(1)在VS Code中创建PieLineChartLinkage.html文件。
(2)绘制饼图与折线图联动图表。首先，在PeLinehartLinkage.html 文件中引入 echarts js 库文件。其次，准备一个具备大小(weight与 height)的 div容器，并使用init()方法初始化容器。最后设置饼图与折线图的图表样式后，获取数据、填入数据并显示图表。

二、完整代码

注释：

1、多表联动需要配置两个壳子

<div id="main1" style="width: 900px; height: 600px"></div>
<div id="main2" style="width: 900px; height: 600px"></div>

2、代码中间不要忘记是option1和option2，不是option

3、两个表联动代码

myChart2.setOption(option1);                 
myChart2.setOption(option2); 
myChart1.group='group1';
myChart2.group='group1';
echarts.connect('group1');

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main1" style="width: 900px; height: 600px"></div>
    <div id="main2" style="width: 900px; height: 600px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        //var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据 
        var myChart1=echarts.init(document.getElementById('main1'));
        var option1 = {
            title: {  //配置标题组件
                text: '咖啡店年订单',  //设置主标题
                
                left: 'center'  //设置主次标题都左右居中
            },
            tooltip: {  //配置提示框组件
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {  //配置图例组件
                orient: 'vertical',  //设置垂直排列
                left: 62,  //设置图例左边距
                top: 22,  //设置图例顶边距
                data: ["2012年", "2013年", "2014年", "2015年", "2016年", "2017年"]
            },
            toolbox: {  //配置工具箱组件
                show: true,  //设置工具箱组件是否显示
                left: 444,  //设置工具箱左边距
                top: 28,  //设置工具箱顶边距
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            color:['#C1EBDD','#FF9393','#CCCCFF','#FFFFCC','#99CCFF','#CCFF99'],
            series: [  //配置数据系列组件
                {
                    name: '咖啡店订单',
                    type: 'pie',
                    radius : '66%',  //设置半径
                    //radius: ['45%', '75%'],
                    center: ['58%', '55%'],  //设置圆心
                    clockWise: true,
                    data: [  //设置数据的具体值
                    {"value":172.9, "name":"2012年"},
                    {"value":232.8, "name":"2013年"},
                    {"value":254.5, "name":"2014年"},
                    {"value":177.8, "name":"2015年"},
                    {"value":206.3, "name":"2016年"},
                    {"value":235.4, "name":"2017年"}
                    ]
                }
            ]
        };
        myChart1.setOption(option1);

        var myChart2=echarts.init(document.getElementById('main2'));
        var option2 = {
            tooltip: {  //配置提示框组件
                trigger: 'axis',
            },
            legend: {  //配置图例组件
                data: ["2012年", "2013年", "2014年", "2015年", "2016年", "2017年"]
            },
                grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                saveAsImage: {}
                }
            },
            color:['#C1EBDD','#FF9393','#CCCCFF','#99CCFF'],
            xAxis: {
                type: 'category',
                data: ["2012年", "2013年", "2014年", "2015年", "2016年", "2017年"]
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                name: 'Milk Tea',
                type: 'line',
                
                data: [56.5, 82.1, 88.7, 70.1, 53.4, 85.1]
                },
                {
                name: 'Matcha Latte',
                type: 'line',
                
                data: [51.1, 51.4, 55.1, 53.3, 73.8, 68.7]
                },
                {
                name: 'Cheese Cocoa',
                type: 'line',
                
                data: [40.1, 62.2, 69.5, 36.4, 45.2, 32.5]
                },
                {
                name: 'Walnut Brownie',
                type: 'line',
                
                data: [25.2, 37.1, 41.2, 18, 33.9, 49.1]
                },
                
            ]
            };
                myChart2.setOption(option2); 
                myChart1.group='group1';
                myChart2.group='group1';
                echarts.connect('group1');
        </script>
</body>
 
</html>