首页分享新能源汽车可视化大屏数据展示系列之十二的汽车品牌销量玫瑰图实战

新能源汽车可视化大屏数据展示系列之十二的汽车品牌销量玫瑰图实战

来源：花匠小妙招时间：2025-05-13 18:22

新能源汽车大屏可视化实训技术通过集成Django、Vue和ECharts、DataV等技术，实现了对新能源汽车数据的全面展示与分析。系统利用爬虫技术获取各大品牌的销售数据，存储于MySQL数据库中，并通过ECharts进行多维度的可视化展示，包括车系销量排名、投诉信息、降价排行等。该技术不仅提升了数据的直观性和可操作性，还为市场研究、企业决策提供了重要支持，推动了新能源汽车行业的智能化发展。

任务目标

实现汽车数据的饼图渲染效果

操作实践步骤

1.前端代码

左下前端代码big-screen-vue-datav-mastersrccomponentsechartcenterLeftcenterLeft1Chart

<template> <div>   <div ref="chart" style="width: 300px;height: 340px;" v-bind:key="cdata.seriesData[0][0]"></div> </div> </template> <script> // import Chart from './chart.vue'; export default { data () { return { currentIndex:0, cdata: { xData: ["data1", "data2", "data3", "data4", "data5", "data6"], seriesData: [ { value: 10, name: "data1" }, { value: 5, name: "data2" }, { value: 15, name: "data3" }, { value: 25, name: "data4" }, { value: 20, name: "data5" }, { value: 35, name: "data6" } ] } } }, components: { // Chart, }, async mounted () { //第一次代码，第二次的时候，注释 // this.initChart() //第二次代码 const res=await this.$http.get('myApp/centerLeft') this.$set(this.cdata,'seriesData',res.data.lastCakeList) console.log(res) }, updated(){ this.initChart() this.loopAnimation() }, methods: { initChart(){ this.myChart=this.$echarts.init(this.$refs.chart) const option={ color: [ "#37a2da", "#32c5e9", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e7bcf3", "#8378ea" ], tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)" }, toolbox: { show: true }, calculable: true, legend: { orient: "horizontal", icon: "circle", bottom: 0, x: "center", data: this.cdata.seriesData.map(item=>item.name), textStyle: { color: "#fff" } }, series: [ { name: "销量总占比", type: "pie", radius: [20, 80], roseType: "area", center: ["50%", "40%"], data: this.cdata.seriesData, emphasis:{ itemStyle:{ shadowBlur:10, shadowOffsetX:0, label:{ show:true } } } } ] }; this.myChart.setOption(option); }, loopAnimation(){ setInterval(() => { this.myChart.dispatchAction({ type:'downplay', seriesIndex:0, dataIndex:this.currentIndex }); this.currentIndex=(this.currentIndex+1)%this.cdata.seriesData.length; this.myChart.dispatchAction({ type:'highlight', seriesIndex:0, dataIndex:this.currentIndex }) },2000) } } } </script> <style lang="scss" scoped> </style>

2.pycharm下，继续修改myapp下的urls.py

from myApp import views urlpatterns=[ path("center/",views.center,name='center'), path("centerLeft/",views.centerLeft,name='centerLeft'), path("bottomLeft/",views.bottomLeft,name='bottomLeft'), ]

3.在pycharm下，在utils下的新建getCenterLeftData.py

#获取中左数据的文件函数 import json import time from .getPublicData import * #定义一个中左的函数 def getCakeBrandData(): cars=list(getAllCars()) carsVolume={} for car in cars: if carsVolume.get(car.brand,-1)==-1: carsVolume[car.brand]=int(car.saleVolume) else: carsVolume[car.brand]+=int(car.saleVolume) carsVolume=sorted(carsVolume.items(),key=lambda x:x[1],reverse=True) # carsVolume=sorted(zip(carsVolume.values(),carsVolume.keys()),reverse=True) # print(carsVolume) #转换为{}格式 sortDict={car[0]:car[1] for car in carsVolume} lastCakeList=[] for k,v in sortDict.items(): lastCakeList.append({ 'name':k, 'value':v }) # print(lastCakeList) return lastCakeList[:10]

打印测试如下图

4.在pycharm修改views.py下的代码

#增加左侧函数代码如下所示： def centerLeft(request): if request.method == "GET": lastCakeList=getCenterLeftData.getCakeBrandData() return JsonResponse({ 'lastCakeList':lastCakeList })

5.效果测试

前端辅助技术

Echarts的基础南丁格尔玫瑰图

参考代码下：

option = { legend: { top: 'bottom' }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true } } }, series: [ { name: 'Nightingale Chart', type: 'pie', radius: [50, 250], center: ['50%', '50%'], roseType: 'area', itemStyle: { borderRadius: 8 }, data: [ { value: 40, name: 'rose 1' }, { value: 38, name: 'rose 2' }, { value: 32, name: 'rose 3' }, { value: 30, name: 'rose 4' }, { value: 28, name: 'rose 5' }, { value: 26, name: 'rose 6' }, { value: 22, name: 'rose 7' }, { value: 18, name: 'rose 8' } ] } ] };

可以通过控制上述代码的option、legend、toolbox等来控制图形或提示框是否显示：

总结：

1 前后端分离架构

项目采用前后端分离的架构设计，前端负责页面呈现和用户交互，后端则处理数据存储和业务逻辑。前后端通过API进行通信，这种架构提高了系统的模块化程度，便于开发和维护，页面渲染端使用了企业级流行的Echarts大屏技术，利于数据效率提升和美观。

2 数据处理流程

数据处理流程包括数据采集、数据清洗、数据传输和数据可视化四个主要步骤。首先，通过各种传感器和外部接口采集新能源汽车的数据。然后，对采集到的数据进行清洗和预处理，以确保数据的完整性和准确性。接下来，清洗后的数据通过API传输到前端。最后，前端使用Echarts将数据绘制成各类图表，实现数据的可视化展示。

3 系统集成策略

系统集成策略主要包括模块划分、接口设计和持续集成。项目被划分为多个模块，每个模块负责特定功能，如数据采集模块、数据处理模块和前端展示模块。各模块之间通过API进行通信，确保系统内的数据流顺畅。此外，采用持续集成的方式，自动化测试和部署，提高开发效率和系统稳定性。

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com