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

在当前信息爆炸的时代，汽车行业的数据量庞大且复杂。为了从大量数据中提取有价值的信息，需要高效的数据抓取和分析工具。本次实训的目的是利用Python的XPath技术抓取汽车数据，实现对多种车型信息的自动化收集和解析。通过此项目，提升数据处理和分析能力，并为后续的市场分析和决策提供支持。

任务目标

前端技术储备需求

     本次实战目标需要用到Echarts上的折线图和柱状图，网址（https://echarts.apache.org/examples），如下图所示：

操作实战

1.项目左下的前端代码

代码位置：BottomLeft.vue,参考代码如下所示：

<template>
  <div>
    <!-- <Chart :cdata="cdata" /> -->
    <div ref="chart" style="width: 100%;height: 480px;" v-bind:key="cdata.lineData"></div>
  </div>
</template>

<script>
// import Chart from './chart.vue'
export default {
  data () {
    return {
      cdata: {
        category: [
          "市区",
          "万州",
          "江北",
          "南岸",
          "北碚",
          "綦南",
          "长寿",
          "永川",
          "璧山",
          "江津",
          "城口",
          "大足",
          "垫江",
          "丰都",
          "奉节",
          "合川",
          "江津区",
          "开州",
          "南川",
          "彭水",
          "黔江",
          "石柱",
          "铜梁",
          "潼南",
          "巫山",
          "巫溪",
          "武隆",
          "秀山",
          "酉阳",
          "云阳",
          "忠县",
          "川东",
          "检修"
        ],
        lineData: [
          18092,
          20728,
          24045,
          28348,
          32808,
          36097,
          39867,
          44715,
          48444,
          50415,
          56061,
          62677,
          59521,
          67560,
          18092,
          20728,
          24045,
          28348,
          32808,
          36097,
          39867,
          44715,
          48444,
          50415,
          36097,
          39867,
          44715,
          48444,
          50415,
          50061,
          32677,
          49521,
          32808
        ],
        barData: [
          4600,
          5000,
          5500,
          6500,
          7500,
          8500,
          9900,
          12500,
          14000,
          21500,
          23200,
          24450,
          25250,
          33300,
          4600,
          5000,
          5500,
          6500,
          7500,
          8500,
          9900,
          22500,
          14000,
          21500,
          8500,
          9900,
          12500,
          14000,
          21500,
          23200,
          24450,
          25250,
          7500
        ],
        rateData: []
      }
    };
  },
  components: {
    // Chart,
  },
  async mounted () {
    const res=await this.$http.get('myApp/bottomLeft')
    console.log(res)
    this.$set(this.cdata,'category',res.data.brandList)
    this.$set(this.cdata,'lineData',res.data.priceList)
    this.$set(this.cdata,'barData',res.data.volumeList)
    // this.setData();
    //初始化
    this.initChart()
  },updated(){
    this.initChart()
  },
  methods: {
    // 根据自己的业务情况修改
    // setData () {
    //   for (let i = 0; i < this.cdata.barData.length -1; i++) {
    //     let rate = this.cdata.barData[i] / this.cdata.lineData[i];
    //     this.cdata.rateData.push(rate.toFixed(2));
    //   }
    // },
    initChart(){
      this.myChart=this.$echarts.init(this.$refs.chart);
      const option={
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(255,255,255,0.1)",
            axisPointer: {
              type: "shadow",
              label: {
                show: true,
                backgroundColor: "#7B7DDC"
              }
            }
          },
          legend: {
            data: ["已贯通", "计划贯通", "贯通率"],
            textStyle: {
              color: "#B4B4B4"
            },
            top: "0%"
          },
          grid: {
            x: "8%",
            width: "88%",
            y: "4%"
          },
          xAxis: {
            // 修改一下
            data: this.cdata.category,
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },
            axisLabel:{show:true,interval:0},
            axisTick: {
              show: false
            }
          },
          yAxis: [
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },

              axisLabel: {
                formatter: "{value} "
              }
            },
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },
              axisLabel: {
                formatter: "{value} "
              }
            }
          ],
          series: [
            {
              name: "贯通率",
              type: "line",
              smooth: true,
              showAllSymbol: true,
              symbol: "emptyCircle",
              symbolSize: 8,
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: "#F02FC2"
                }
              },
              // 修改一下
              data: this.cdata.lineData
            },
            {
              name: "已贯通",
              type: "bar",
              barWidth: 10,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#956FD4" },
                    { offset: 1, color: "#3EACE5" }
                  ])
                }
              },
              // 修改一下
              data: this.cdata.barData
            },
          ]
        }
        this.myChart.setOption(option)
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

2.修改项目myapp应用下的urls.py文件，增加bottomLeft的url地址

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

3.修改项目myapp下的utils下的getBottomLeft文件

#获取左侧 下部分信息代码
import json
import re
import time
from .getPublicData import *

def getSquareData():
    cars=list(getAllCars())
    carsVolume={}
    for car in cars:
        if carsVolume.get(car.carName,-1) ==-1:
            carsVolume[car.carName]=int(car.saleVolume)
        else:
            carsVolume[car.carName]+=int(car.saleVolume)

    carSortVolume=sorted(carsVolume.items(),key=lambda x:x[1],reverse=True)[:12]
    # print(carSortVolume)

    brandList=[]
    volumeList=[]
    priceList=[]

    for car in carSortVolume:
        brandList.append(car[0])
        volumeList.append(car[1])
    # 对比
    for car in cars[:12]:
        car.price=re.findall('\d+\.',car.price)
        car.price=(float(car.price[0])+float(car.price[1]))/2
        priceList.append(car.price)

    # print(brandList)
    # print(volumeList)
    # print(priceList)
    return brandList,volumeList,priceList

4.修改views.py文件，增加函数bottomLeft()

#增加左下的函数
def bottomLeft(request):
    if request.method == "GET":
        brandList,volumeList,priceList=getBottemLeftData.getSquareData()
        return JsonResponse({
            'brandList':brandList,
            'volumeList':volumeList,
            'priceList':priceList
        })

5.测试调用