ECharts实训咖啡店订单绘制

木可子x

已于 2024-04-22 10:59:46 修改

阅读量309

点赞数 9

文章标签： echarts 前端 javascript

于 2024-04-22 10:49:39 首次发布

本文链接：https://blog.csdn.net/2301_81685623/article/details/138066620

版权

本文介绍了如何在VSCode中使用echarts.js库，创建一个包含饼图和折线图的联动图表，对咖啡店各年的订单数据进行分析。详细步骤包括引入库、创建HTML文件、设置图表选项和实现图表联动功能。

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

1. 需求说明
基于“咖啡店年订单json”数据，绘制饼图与折线图的多图表联动，对咖啡店各年的订单数据进行分析。

数据

{
"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年"}
],
"product":["2012年", "2013年", "2014年", "2015年", "2016年", "2017年"],
"values1":[56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
"values2":[51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
"values3":[40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
"values4":[25.2, 37.1, 41.2, 18, 33.9, 49.1],
"names1":"Milk Tea",
"names2":"Matcha Latte",
"names3":"Cheese Cocoa",
"names4":"Walnut Brownie"
}

2.实现思路及步骤
(1)在VS Code中创建PieLineChartL inkage.html文件。
(2) 绘制饼图与折线图联动图表。首先，在PieLineChartLinkage.html文件中引入echartsjs库文件。其次，准备一一个具备大小(weight与height)的div容器，并使用initn方法初始化容器。最后设置饼图与折线图的图表样式后，获取数据、填入数据并显示图表

3.代码案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/echarts.js"></script>
</head>
<body>
    <div id="main1" style="width: 600px; height: 400px;"></div>
    <div id="main2" style="width: 600px; height: 400px;"></div>
    <script type="text/javascript">
        var myChart1=echarts.init(document.getElementById("main1"));
        var waterMarkText = 'xxxxywwwww'; // 设置水印的字符
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		canvas.width = canvas.height = 100;
		ctx.textAlign = 'center';
		ctx.textBaseline = 'middle';
		ctx.globalAlpha = 5;
		ctx.font = '8px Microsoft Yahei'; // 设置水印文字的字体
		ctx.translate(70, 70); // 设置水印文字的偏转值
		ctx.rotate(-Math.PI / 4); // 设置水印旋转的角度
		ctx.fillText(waterMarkText, 0, 0); // 设置填充水印
        var option1={
            backgroundColor: {type:'patten',image:canvas,repeat:'repeat'},
            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,
        series: [
            {
            name: '订单量',
            type: 'pie',
            radius:'66%',
            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年"}
            ]
            }
        ]
        };
    var myChart2=echarts.init(document.getElementById("main2"))
    var waterMarkText = 'xxxywwwww'; // 设置水印的字符
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = canvas.height = 100;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.globalAlpha = 10;
    ctx.font = '8px Microsoft Yahei'; // 设置水印文字的字体
    ctx.translate(60, 60); // 设置水印文字的偏转值
    ctx.rotate(-Math.PI / 4); // 设置水印旋转的角度
    ctx.fillText(waterMarkText, 0, 0); // 设置填充水印
    var option2={
            backgroundColor: {type:'patten',image:canvas,repeat:'repeat'},
            title: {
                text: '咖啡店年订单数据分析',
            },
            // backgroundColor: 'rgba(204,204,204,0.7)',
            tooltip: {
                trigger: 'axis',
            },
            legend:{
                data:['Milk Tea','Matcha Latte','Cheese Cocoa','Walnut Brownie',],
                left:422,
                color:'blue',
                top:8
            },
            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]
            },
        ]
    };
    myChart1.setOption(option1);// 为myChart1对象加载数据
    myChart2.setOption(option2);// 为myChart2对象加载数据
    // 多图表联动配置方法1：分别设置每个echarts对象的group值
    myChart1.group='group1';
    myChart2.group='group1';
    echarts.connect('group1');
    // 多图表联动配置方法2：直接传入需要联动的echarts对象myChart1，myChart2
	echarts.connect([myChart1,myChart2]);
    </script>
</body>
</html>

4.实训实现