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

任务目标

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

操作实践步骤

       1.前端代码

左下前端代码\big-screen-vue-datav-master\src\components\echart\centerLeft\centerLeft1Chart

<template>
  <div>
    <!-- <Chart :cdata="cdata" /> -->
     <!-- 增加的代码，直接嵌入echarts代码 -->
      <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进行通信，确保系统内的数据流顺畅。此外，采用持续集成的方式，自动化测试和部署，提高开发效率和系统稳定性。