当前位置：首页 > news >正文

#echarts#折线图#饼图

news 来源：原创 2025/4/30 20:51:23

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>折线图</title>
</head>
<body>
    <div id="app" style="width:100%;height:100%;">
        <div id="chart-container" style="width:1000px;height:800px;"></div>
    </div>
    <script src="./vue.js"></script>
    <script src="./echarts.js"></script>
    <script src="./sales.js"></script>
    <script>
        Vue.createApp({
            data(){
                return{
                    salesData:salesData,
                    salesCount:[]
                }
            },
            created(){
                this.salesData.forEach(data => {
                    let item = this.salesCount.find(ele => ele.name==data.storeName)
                    if(item){
                        item.count++
                    } else {
                        this.salesCount.push({
                            name:data.storeName,
                            count:1
                        })
                    }
                });
                console.log(this.salesCount)
            },
            mounted(){
                var chartDom = document.getElementById("chart-container");
                var myChart = echarts.init(chartDom);
                var option = {
                    title:{
                        text : "门店数量",
                        left : "center"
                    },
                    tooltip:{
                        trigger:"item"
                    },
                    xAxis:[{
                        type:"category",
                        data:this.salesCount.map(data => data.name),
                    }],
                    yAxis:[{
                        type:"value"
                    }],
                    series:[{
                        name:"hah",
                        type:"line",
                        data:this.salesCount.map(data => data.count)
                    }]
                };
                option && myChart.setOption(option)
            },
            methods:{}
        }).mount('#app');
    </script>
</body>
</html>

饼图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>饼图</title>
</head>
<body>
    <div id="app" style="width:100%; height:100%;">
        <div id="chart-container" style="width:500px; height:400px;"></div>
    </div>
    <script src="./vue.js"></script>
    <script src="./echarts.js"></script>
    <script src="./sales.js"></script>
    <script>
        Vue.createApp({
            data() {
                return {
                    salesData:salesData,
                    salesCount: []
                }
            },
            created() {
                this.salesData.forEach(data => {
                    if (data.productType == "家具产品") {
                        let item = this.salesCount.find(ele => ele.name == data.storeName)
                        if(item) {
                            item.value++
                        } else {
                            this.salesCount.push({
                                name:data.storeName,
                                value:1
                            });
                        }
                    }
                })
                console.log(this.salesCount);
            },
            mounted() {
                var chartDom = document.getElementById("chart-container");
                var myChart = echarts.init(chartDom);
                var option = {
                    title:{
                        text:"家具产品门店数",
                        subtext:'',
                        left:"center"
                    },
                    tooltip:{
                        trigger:"item",
                        formatter:'{a} <br/> {b}:{c}({d}%)'
                    },
                    legend:{
                        orient:"vertical",
                        right:"right",
                        top:"middle"
                    },
                    series:[{
                        name:"direct",
                        type:"pie",
                        data:this.salesCount,
                    }]
                };
                option && myChart.setOption(option);
            },
            methods: {}
        }).mount('#app');


    </script>

</body>
</html>