行业可视化簇状柱形图饼图玫瑰图折线图玫瑰图雷达图

lulu001128

已于 2023-10-26 18:24:15 修改

阅读量176

点赞数

分类专栏：比赛文章标签： 1024程序员节

于 2023-10-25 12:54:48 首次发布

本文链接：https://blog.csdn.net/lulu001128/article/details/134009805

版权

比赛专栏收录该内容

15 篇文章 1 订阅

订阅专栏

创建Vue项目

上一章已经学过相应内容，在此处不再赘述

安装ECharts、vue-router和jQuery

安装echarts依赖包命令

npm install echarts（需要安装谁后面就填谁）

搭建页面结构并配置路由

打开app.vue将默认的全部删除，然后再加上一些内容，形成下面的页面

（111只是加上为了测试而已）

将默认界面删除命令 *{padding：0;margin:0}

第一步设置背景图，找到资料中的bg文件，放到vue-demo/src/assets的目录下

注意：背景图片存放在“/home/qingjiao/vue-info/bg/”文件夹中，请从此目录获取背景图片，获取到后，将图片存放在“/home/qingjiao/vue-demo/src/assets/”文件夹中。

然后对app.vue进行代码编写，使背景图平铺于整个页面上

为整个页面设置宽度和高度，并添加背景图片

width:100%;

height:770px;

background:url(./assets/bg.webp)no-repeat;

background-size:contain;

创建h2标题标签，并设置高度和行高为60像素，文本居中显示

<h2>交通运输物流行业数据可视化</h2>

h2{

color:#fff;

line-height:60px;

}

创建列表，使用router-link组件进行导航，通过传递to来指定链接，

在交通可视化和物流可视化中加<a>和</a>

<ul>



<li><a><rounter-link to="/traffic">交通可视化</router-link></a></li>

<li><a><rounter-link to="/logistics">物流可视化</rounter-link></a></li>

</ul>

并为导航添加样式，以及鼠标滑过时的效果

ul li{
float:left;
list-style:none;
margin-left:44px;
width:100px;
height:28px;
line-height:28px;
text-align:center;
/*字符之间的空间*/
letter-spacing:1px;
}
ul li a{
text-decoration:none;
color:#ddd;
font-size:12px;
cursor:pointer;
}
ul li a:hover{
color:#FF0000;
text-decoration:underline;
}

创建一个盒子，命名为pages，路由匹配到的组件将渲染在这里

<div class="pages" >



<router-view></router-view>

</div>

创建交通可视化和物流可视化的页面

2个页面分别为：（注意：需要在“/home/qingjiao/Desktop/vue-demo/src/”目录下新建一个“views”的目录，并将这2个文件存放在其中）
（1）Traffic.vue，用于展示交通可视化的相关图表
（2）Logistics.vue，用于展示物流可视化的相关图表

在vue-demo/src中新建views文件夹

代码需在实训文件夹src中找到并复制到上述新建的文件夹中

该删的删掉，不需要的注释掉

搭建结构样式

前提已经安装了vue-router

import TrafficPage from "./views/Traffic.vue"
import LogisticsPage from "./views/Logistics.vue"
const routes = [
{ path:'/',component: TrafficPage },
{ path:'/traffic',component:TrafficPage },
{ parh:'/logistics',component:LogisticsPage }
]
const router = createRouter({
history: crearteWebHashHistory(),
routes: routes,
})
const app = createApp(App)
app.use(router)
app.mount('#app')

所有文件全部代码

APP.vue

<template>
  <h2>交通运输物流行业数据可视化</h2>
  <ul>
    <!--使用 router-link 组件进行导航 -->
    <li><router-link to="/traffic">交通可视化</router-link></li>
    <li><router-link to="/logistics">物流可视化</router-link></li> 
  </ul>
  <div class="pages">
    <!-- 渲染在这里 -->
    <router-view></router-view>
  </div> 
</template>
<script>

export default {
  name: 'App'
}
</script>

<style>
*{
  padding:0;
  margin:0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width:100%;
  height:770px;
  background:url(./assets/bg.webp) no-repeat;
  background-size: contain;
}
h2{
  color:#fff;
  line-height:60px;
}
ul{
  margin-left :508px;
}
ul li{
  float:left;
  list-style:none;
  margin-left:44px;
  width:100px;
  height:28px;
  line-height:28px;
  text-align:center;
  /*字符之间的空间*/
  letter-spacing:1px;
}
ul li a{
  text-decoration:none;
  color:#ddd;
  font-size:12px;
  cursor:pointer;
}
ul li a:hover{
  color:#FF0000;
  text-decoration:underline;
}
</style>

Traffic.vue

<template>
  <div class="container1"> 
    <!-- echarts图表绘制在这里 -->
    <div id="canvas1" style="width: 650px;height:350px;"></div>    
    <div id="canvas2" style="width: 650px;height:350px;"></div>     
  </div> 
  <div class="container2">
    <div id="canvas3" style="width: 420px;height:350px;"></div>    
    <div id="canvas4" style="width: 420px;height:350px;"></div>
    <div id="canvas5" style="width: 420px;height:350px;"></div> 
  </div>
</template>

<script>
export default {
  name: 'App',
      mounted () {

      }
}
</script>

<style>
.container1{
  height:340px;
}
#canvas1{
  float:left;
}
#canvas2{
  float:right;
}
.container2{
  height:360px;
}
#canvas3{
  float:left;
}
#canvas4{
  float:left;
  margin-left:40px;
}
#canvas5{
  float:right;
}
</style>

Logistics.vue

<template>
  <div class="container1"> 
    <!-- echarts图表绘制在这里 -->
    <div id="canvas1" style="width: 650px;height:350px;"></div>    
    <div id="canvas2" style="width: 650px;height:350px;"></div>     
  </div> 
  <div class="container2">
    <div id="canvas3" style="width: 415px;height:350px;"></div>    
    <div id="canvas4" style="width: 440px;height:350px;"></div>
    <div id="canvas5" style="width: 415px;height:350px;"></div> 
  </div>
</template>

<script>
export default {
  name: 'App',
      mounted () {

      }
}
</script>

<style>
.container1{
  height:340px;
}
#canvas1{
  float:left;
}
#canvas2{
  float:right;
}
.container2{
  height:360px;
}
#canvas3{
  float:left;
}
#canvas4{
  float:left;
  margin-left:60px;
}
#canvas5{
  float:right;
}
</style>

main.js

import { createApp } from 'vue'
import App from './App.vue'

// 导入 vue router
import { createRouter, createWebHashHistory } from 'vue-router'

// 1. 定义路由组件.  
import TrafficPage from "./views/Traffic.vue"
import LogisticsPage from "./views/Logistics.vue"

// 2. 定义一些路由映射
const routes = [
    { path: '/', component: TrafficPage },
    { path: '/traffic', component: TrafficPage },
    { path: '/logistics', component: LogisticsPage }
]

// 3. 创建路由实例并传递 `routes` 配置
const router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes: routes, // `routes: routes` 的缩写
})

// 5. 创建并挂载根实例
// createApp(App).mount('#app')     
const app = createApp(App)

// 确保 _use_ 路由实例使整个应用支持路由。
app.use(router)

 // 把App挂载到#app节点上
app.mount('#app')

绘制收费站收费量簇状柱形图-有动态请求数据

第一步导入依赖包

第二步，将数据文件移放到相应位置

请求数据

给中型车设平均值

将X轴，Y轴改颜色文字颜色都为白色

此代码为共性代码，后续只要出现X轴Y轴时都有可能会用到

设置图表标题title，图例legend，提示信息tooltip

// 根据准备好的dom初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('canvas1'));
        var option1={
          title:{
            text:'收费站收费量',
            textStyle:{
              color:'#EDEDED',
              fontSize:14
            }
          },
          tooltip: {},
          legend: {
            data: ['小型车','中型车','大型车'],    // 要和series.name一致
            x:'center',
            y:'35px',
            textStyle: {
              fontSize: 12,
              color: '#EDEDED',
            },              
          },
          xAxis: {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#EDEDED',
              },
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#EDEDED',
              },
            },
          },
          series: [
            {
              name: '小型车',
              type: 'bar',
              data: []
            },
            {
              name: '中型车',
              type: 'bar',
              data: [],
              markLine:{
              data:[
                  {type:"average",name:"平均值"}
                ]
              }
            },
            {
              name: '大型车',
              type: 'bar',
              data: []
            }
          ]
        }
        myChart1.setOption(option1);

        //请求数据
        $.get('/bar.json').done(function (data) {
          // 填入数据
          myChart1.setOption({
            yAxis: {
                data: data.month
            },
            series: [
              {
                name: '小型车',
                data: data.small
              },
              {
                name: '中型车',
                data: data.middle
              },
              {
                name: '大型车',
                data: data.big
              }
            ]
          });
        });

绘制不同运输方式的货流量折线图

// 根据准备好的dom初始化echarts实例
        var myChart2 = echarts.init(document.getElementById('canvas2'));
        var option2={
          title: {
              text: '不同运输方式的货流量',
              textStyle:{
                color:'#EDEDED',
                fontSize:14
              }
            },
            tooltip: {
              trigger: 'axis',
            },
            legend: {
              data: ['公路运输','铁路运输','水运','空运'],    // 要和series.name一致
              x:'center',
              y:'35px',
              textStyle: {
                fontSize: 12,
                color: '#EDEDED',
              },              
            },
            xAxis: {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
              axisLine: {
                lineStyle: {
                  color: '#EDEDED',
                },
              },
            },
            yAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#EDEDED',
                },
              },
            },
            series: [
              {
                name: '公路运输',
                type: 'line',
                data: [834,760,943,865,872,968,976,920,935,960,980,950],
                markPoint: { 
                    data: [ 
                        { type: 'min', name: '最小值' } 
                    ] 
                },
              },
              {
                name: '铁路运输',
                type: 'line',
                data: [116,160,143,165,172,168,376,420,635,720,680,750],
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    fontSize: 12
                  }
                }
              },
              {
                name: '水运',
                type: 'line',
                data: [55,59,60,65,72,68,76,90,95,100,110,130],
                markPoint: { 
                    data: [ 
                        { type: 'max', name: '最大值' } 
                    ] 
                },
              },
              {
                name: '空运',
                type: 'line',
                data: [547,602,798,321,635,524,776,650,585,465,612,573]
              },
            ]
        }
        myChart2.setOption(option2);

绘制2022年月度客运量累计占比饼图

// 根据准备好的dom初始化echarts实例
        var myChart3 = echarts.init(document.getElementById('canvas3'));
        var option3={
          title: {
            text: '2022年月度客运量累计占比',
            textStyle:{
              color:'#EDEDED',
              fontSize:14
            }
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          series:[{
            type: 'pie',
            radius: '50%',
            name: '客运量（亿人次）',
            data: [
              { value: 18.7, name: '4月' },
              { value: 22.4, name: '5月' },
              { value: 27.6, name: '6月' },
              { value: 33.8, name: '7月' },
              { value: 39.9, name: '8月' }
            ],
            emphasis: {
              itemStyle: {
                  shadowBlur: 20,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                show: true,
                formatter: '{b} : {d}%', // 格式化数值百分比输出
              },
            },
            // 修改字体颜色的代码begin
            itemStyle: {
              normal: {
                label: {
                  textStyle: {
                    color:'#EDEDED',
                    fontSize: 12
                  }
                }
              }
            }
          }]
        }
        myChart3.setOption(option3);

绘制本月较上月发生的交通事故雷达图

// 根据准备好的dom初始化echarts实例
        var myChart4 = echarts.init(document.getElementById('canvas4'));
        var option4={
          title: {
              text: '本月较上月发生的交通事故',
              textStyle:{
                color:'#EDEDED',
                fontSize:14
              }
            },
            tooltip: {},
            legend: {
              data: ['上月', '本月'],
              x:'right',
              y:'35px',
              textStyle: {
                fontSize: 12,
                color: '#EDEDED'
              }
            },
            radar: {
              indicator: [
                { name: '闯红灯', max: 30 },
                { name: '逆行', max: 10 },
                { name: '违停', max: 30 },
                { name: '闯禁行', max: 5 },
                { name: '超速', max: 20 },
                { name: '超载', max: 20 }
              ],
              radius: 100,
              center: ['50%', '50%'],
              name:{ //修改indicator文字的颜色
                textStyle:{
                    color:"#EDEDED"
                }
              }
            },
            series: [
            {
              type: 'radar',
              data: [
                {
                  value: [15, 3, 22, 1, 12, 18],
                  name: '上月'
                },
                {
                  value: [13, 5, 14, 4, 10, 9],
                  name: '本月'
                }
              ]
            }
          ]
        }
        myChart4.setOption(option4);

绘制每年公共交通出行次数占比玫瑰图

// 根据准备好的dom初始化echarts实例
        var myChart5 = echarts.init(document.getElementById('canvas5'));
        var option5={
           title : {
            text: '每年公共交通出行次数占比',       // 主标题名称
            textStyle:{
              color:'#fff',
              fontSize:14
            }
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          series : [{
            name:'出行次数',                    // 图表名称
            type:'pie',                         // 图表类型
            radius : [20, 100],                 // 图表内外半径大小
            center : ['50%', '45%'],            // 图表位置
            roseType : 'area',
            // 修改字体颜色的代码begin
            itemStyle: {
              normal: {
                label: {
                  textStyle: {
                    color:'#EDEDED',
                    fontSize: 12
                  }
                }
              }
            },
            data:[
                {value:1181, name:'2015年'},           // 变量对应的具体数据
                {value:1543, name:'2016年'},
                {value:1905, name:'2017年'},
                {value:2264, name:'2018年'},
                {value:2556, name:'2019年'},
                {value:2716, name:'2020年'},
                {value:3050, name:'2021年'}
            ]
          }]
        }
        myChart5.setOption(option5);

物流可视化

柱折混合图

// 根据准备好的dom初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('canvas1'));
        var option1={
          title:{
            text:'各分公司的运输成本与毛利',
            textStyle:{
              color:'#EDEDED',
              fontSize:14
            }
          },
          tooltip: {
            trigger: 'axis',
          },
          legend: {
              data:['成本','毛利'],
              x:'center',
              textStyle: {
                fontSize: 12,
                color: '#EDEDED',
              },        
          },
          xAxis: {
            data: ['上海', '北京', '浙江', '广东', '福建', '湖北', '安徽', '黑龙江', '山东', '吉林'],
            axisLine: {
              lineStyle: {
                color: '#EDEDED',
              },
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#EDEDED',
              },
            },
          },
          series: [{
              name: '成本',
              type: 'bar',
              barWidth : '50%',
              data: [4604.36, 4068.21, 3715.08, 3256.47, 2942.26, 3679.01, 5014.98, 3331.69, 4762.54, 2489.16]
          },{
              name: '毛利',
              type: 'line',
              smooth:true,
              data: [4043.05, 3521.98, 2915.73, 3007.15, 2801.07, 2936.32, 4610.01, 3054.89, 4456.81, 2223.97] 
          }]
        }
        myChart1.setOption(option1);

柱形图

// 根据准备好的dom初始化echarts实例
        var myChart2 = echarts.init(document.getElementById('canvas2'));
        var option2={
          title:{
            text:'不同运输方式的运送量',
            textStyle:{
              color:'#EDEDED',
              fontSize:14
            }
          },
          tooltip: {},
          xAxis: {
            type: 'category',
            data: ['国内空运', '城际专线', '城际快线', '新邦专线', '新邦快线','汽运专线', '汽运偏线'],
            axisLine: {
              lineStyle: {
                color: '#EDEDED',
              },
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#EDEDED',
              },
            },
          },
          series: [
            {
              name: '门店数量（万户）',
              type: 'bar',
              data: [17732, 39243, 21479, 32357, 34960, 15966, 36376],
              itemStyle: {
                  // 条形图颜色
                  color: 'orange'
              },
              barWidth:'40%',
              markLine:{
              data:[
                  {type:"average",name:"平均值"}
                ]
              }
            }
          ]
        }
        myChart2.setOption(option2);

玫瑰图

// 根据准备好的dom初始化echarts实例
        var myChart3 = echarts.init(document.getElementById('canvas3'));
        var option3={
           title : {
            text: '各类型商品运输数量占比',       // 主标题名称
            textStyle:{
              color:'#EDEDED',
              fontSize:14
            }
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          series : [{
            name:'出行次数',                    // 图表名称
            type:'pie',                         // 图表类型
            radius : [20, 100],                 // 图表内外半径大小
            center : ['50%', '45%'],            // 图表位置
            roseType : 'area',
            // 修改字体颜色的代码begin
            itemStyle: {
              normal: {
                label: {
                  textStyle: {
                    color:'#EDEDED',
                    fontSize: 12
                  }
                }
              }
            },
            data:[
                {value:174, name:'冷链化工危险品'},           // 变量对应的具体数据
                {value:178, name:'冷链化工品'},
                {value:181, name:'冷链普货'},
                {value:106, name:'常温化工危险品'},
                {value:201, name:'常温化工品'},
                {value:371, name:'常温普货'}
            ]
          }]
        }
        myChart3.setOption(option3);

条形图

// 根据准备好的dom初始化echarts实例
        var myChart4 = echarts.init(document.getElementById('canvas4'));
        var option4={
          title: {
              text: '全国便利店数量TOP10分布',
              textStyle:{
                color:'#EDEDED',
                fontSize:14
              }
            },
            tooltip: {},
            xAxis: {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#EDEDED',
                },
              },
            },
            yAxis: {
              type: 'category',
              data: ['盐城市', '阜阳市', '丽水市', '上海市', '安庆市', '包头市', '石家庄市', '杭州市', '焦作市', '北京市'],
              axisLine: {
                lineStyle: {
                  color: '#EDEDED',
                },
              },
            },
            series: [
              {
                name: '数量（万家）',
                type: 'bar',
                data: [2032, 2954, 3055, 3250, 3987, 4021, 5070, 6377, 7410, 8361],
                itemStyle: {
                    // 条形图颜色
                    color: '#8DD35F'
                },
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(220, 220, 220, 0.3)'
                }
              }
            ]
        }
        myChart4.setOption(option4);