#echarts#折线图#饼图

python 复制代码
<!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>

饼图:

python 复制代码
<!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>
相关推荐
掘金安东尼22 分钟前
⏰前端周刊第424期(2025年7月21日–7月27日)
前端·javascript·面试
江城开朗的豌豆34 分钟前
Vue和React的数据流之争:双向绑定 vs 单向数据流,谁更适合你?
前端·javascript·vue.js
芜青36 分钟前
JavaScript手录09-内置对象【String对象】
开发语言·javascript·ecmascript
OpenTiny社区38 分钟前
前端可智能识别的搜索组件 SearchBox 使用详解!
前端·vue.js·ui·开源·opentiny
世伟爱吗喽39 分钟前
最新面试题总结
前端·javascript·vue.js
江城开朗的豌豆1 小时前
前端权限控制实战:手把手教你玩转角色权限分配
前端·javascript·vue.js
超浪的晨1 小时前
JavaWeb 入门:HTML 基础与实战详解(Java 开发者视角)
java·开发语言·前端·后端·html·个人开发
CCF_NOI.3 小时前
谷歌浏览器深入用法全解析:解锁高效网络之旅
大数据·运维·服务器·前端·计算机·谷歌
paopaokaka_luck6 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app