Echarts咖啡店热门订单分析

2242

已于 2024-04-22 11:01:23 修改

阅读量302

点赞数 7

文章标签： echarts 前端 javascript

于 2024-04-22 10:56:34 首次发布

本文链接：https://blog.csdn.net/xsp123456789_/article/details/138067103

版权

本文介绍了如何使用ECharts库在HTML中创建交互式的饼图和折线图，展示咖啡店各年份订单量的变化情况，以及如何实现多个图表之间的联动效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main1" style="width: 700px; height: 400px"></div>
    <div id="main2" style="width: 700px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart1 = echarts.init(document.getElementById("main1"));
        var option1 = {
            title: {  //配置标题组件
                text: '咖啡店各年订单',  //设置主标题
                left: 'center'  ,//设置主次标题都左右居中
                textStyle:{
                  color:'pink',
                  fontSize:'20',
                },
            },
            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:['#45C2E0', '#C1EBDD','red', '#FFC851','#FF9393',"pink"],
            series: [  //配置数据系列组件
                {
                    name:"订单量",
                    type: 'pie',
                    radius : '66%',  //设置半径
                    //radius: ['45%', '75%'],
                    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年"}
                    ]
                }
            ]
        };
 
        var myChart2 = echarts.init(document.getElementById("main2"));
                option2 = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ["2012年", "2013年", "2014年", "2015年", "2016年", "2017年"]
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLine:{lineStyle:{color:'#9999FF'}},
                    data: ["2012年", "2013年", "2014年", "2015年", "2016年", "2017年"]
                },
                yAxis: {
                    type: 'value',
                    axisLine:{lineStyle:{color:'#9999FF'}},
                },
                color:['#45C2E0', '#C1EBDD',"pink", '#FFC851'],
                series: [
                    {
                    name: 'Milk Tea',
                    type: 'line',
                    stack: 'Total',
                    data: [156.5, 82.1, 88.7, 70.1, 53.4, 85.1]
                    },
                    {
                    name: 'Matcha Latte',
                    type: 'line',
                    stack: 'Total',
                    data: [51.1, 51.4, 55.1, 53.3, 73.8, 68.7]
                    },
                    {
                    name: 'Cheese Cocoa',
                    type: 'line',
                    stack: 'Total',
                    data: [40.1, 62.2, 69.5, 36.4, 45.2, 32.5]
                    },
                    {
                    name: 'Walnut Brownie',
                    type: 'line',
                    stack: 'Total',
                    data: [25.2, 37.1, 41.2, 18, 33.9, 49.1]
                    },
                  
                ]
                };
 
 
 
        myChart1.setOption(option1);   //为mychart1对象加载数据
        myChart2.setOption(option2);   //为mychart2对象加载数据
        //多图表联动配置方法1：分别设置每个ECharts对象的group值
        myChart1.group = 'group1';
        myChart2.group = 'group1';
        echarts.connect('group1');
          //使用刚指定的配置项和数据显示图表
     myChart.setOption(option);
    </script>
</body>
 
</html>

运行结果