vue-作图

实训背景：
随着互联网行业的快速发展，网络购物、网上支付、移动电子商户的数量急剧增加，商品爆仓成为了困扰物流企业的一大难题，加强物流仓储管理的智能化、自动化升级已经成为提高现代企业物流运转效率的重要手段。大数据在物流领域的应用主要包括：市场预测、优化配送线路、物流运送量分析、物流盈亏分析等

实训任务：
（1）掌握搭建Vue项目的步骤
（2）会使用HTML+CSS布局网页
（3）能够使用vue-router实现路由切换
（4）能够结合ECharts绘制可视化图表
（5）能够请求JSON数据渲染图表
（6）绘制收费站收费量簇状柱形图
（7）绘制不同运输方式的货流量折线图
（8）绘制2022年月度客运量累计占比饼图
（9）绘制本月较上月发生的交通事故雷达图
（10）绘制每年公共交通出行次数占比玫瑰图
（11）绘制各分公司的运输成本与毛利柱折混合图
（12）绘制不同运输方式的运送量柱形图
（13）绘制各类型商品运输数量占比玫瑰图
（14）绘制全国便利店数量TOP10分布条形图
（15）绘制不同签单类型的数量玫瑰图

实训环境：
开发工具：VSCode
运行环境：node 18.16.0
管理工具：npm 9.5.1

实训要求：
基于Vue+ECharts相关知识点实现交通运输物流行业数据可视化，要求使用Vue搭建项目，使用HTML+CSS布局网页，使用vue-router实现路由切换，使用ECharts绘制可视化图表，请求JSON数据渲染图表，本项目最终包含2个页面（交通可视化页面和物流可视化页面），2个页面一共包含10个图表，每个页面效果如下图示：

交通可视化页面

物流可视化页面

本项目要求结合ECharts实现可视化图表，那么什么是ECharts？下面详细介绍

ECharts是什么？

商业级数据图表，它是一个纯JavaScript的图表库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

Echarts支持的图表有折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表。

很容易在vue.js中使用ECharts绘制各种可视化图表。

在vue.js中使用ECharts绘图

安装echarts包
首先需要在项目中安装echarts依赖包。这可以使用npm来安装：

npm install echarts

然后在你vue项目的js文件中使用import导入它：

import * as echarts from 'echarts';

简单示例
Vue.js+ vue-router可以很简单的实现单页应用
router-link是一个组件，该组件用于设置一个导航链接，切换不同HTML内容。 to属性为目标地址，即要显示的内容。
以下实例中我们将vue-router加进来，然后配置组件和路由映射，再告诉vue-router在哪里渲染它们。代码如下所示：

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
 
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

router-link
请注意，我们没有使用常规的a标签，而是使用一个自定义组件router-link来创建链接。这使得 vue router可以在不重新加载页面的情况下更改URL，处理URL的生成以及编码

router-view
router-view将显示与url对应的组件。你可以把它放在任何地方，以适应你的布局

// 1. 定义路由组件.
// 也可以从其他文件导入
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
 
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]
 
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})
 
// 5. 创建并挂载根实例
const app = Vue.createApp({})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)
 
app.mount('#app')
 
// 现在，应用已经启动了！

由于需要依赖jQuery来请求JSON数据，所以如果想在普通的HTML页面引入jQuer库的话，直接使用script标签引入即可。但是如果要在Vue组件中使用jQuery库的话，使用这样的方式就不行了，那么怎样在Vue中使用jQuery呢？下面给大家介绍一下。

如何在Vue中使用jQuery

安装jQuery依赖
在使用jQuery之前，我们首先要通过以下命令来安装jQuery依赖：

npm install jquery

在组件中引入jquery
我们想在哪个组件中使用jQuery库，要使用import引入jquery，然后就可以正常使用了：

import $ from 'jquery';

在绘制图表之前，需要我们基于Vue来创建Vue项目，具体步骤如下：
（1）在桌面中创建一个名为“vue-demo”的vue项目；
注意：项目名不能有大写字母，中文和特殊符号
（2）创建完成后，进入项目目录，并启动应用；
（3）打开浏览器，访问localhost地址，打开应用程序的界面，如下图示：

智能考核，检测通过即完成

考核条件如下：

1. 目录考核

条件得分：

10/10

操作环境：

ubuntu-web可视化-vue

已通过恭喜您完成本任务！

查看任务解析

已公布

首先在桌面中创建一个名为“vue-demo”的vue项目，执行如下命令：

vue create vue-demo

创建完成后，进入项目目录，命令如下：

cd vue-demo

启动应用，命令如下：

npm run serve

打开浏览器，访问localhost地址，打开应用程序的界面，如下图示：

安装ECharts
创建好Vue项目之后，基于该项目还需要结合ECharts实现可视化图表，因此需要在项目中安装ECharts依赖包，具体实现步骤如下：
（1）在项目中安装echarts依赖包；
（2）安装好以后，绘图时需要在vue项目的js文件中使用import导入；

安装vue-router
如果还没有安装vue-router，那么需要使用npm包管理器安装它，命令如下：

npm install vue-router

安装jQuery
如果要在Vue组件中使用jQuery库的话，需要安装jQuery依赖，具体实现步骤如下：
（1）在项目中安装jquery依赖包；
（2）在哪个组件中使用jQuery库，使用使用import引入jquery即可。

注意：可以先在项目中安装echarts、vue-router和jquery依赖包，然后需要使用依赖包时再到相应的页面中导入依赖包，否则会报错。

本任务为学习任务，练习后请标记完成

查看任务解析

已公布

安装ECharts
（1）在项目中安装echarts依赖包；

npm install echarts

（2）安装好以后，绘图时需要在vue项目的js文件中使用import导入；

import * as echarts from 'echarts'

安装vue-router
如果还没有安装vue-router，那么需要使用npm包管理器安装它，命令如下：

npm install vue-router

安装jQuery
（1）在使用jQuery之前，首先要通过以下命令来安装jQuery依赖：

npm install jquery

（2）我们想在哪个组件中使用jQuery库，首先要使用如下命令引入jquery，然后就可以正常使用了：

import $ from 'jquery';

项目分析
通过效果图展示，可以看出页面分为交通可视化和物流可视化，其中，交通可视化页面包含5个图表，分别是簇状柱形图、折线图、饼图、雷达图和玫瑰图；物流可视化页面包含5个图表，分别是柱折混合图、柱形图、玫瑰图、条形图和玫瑰图。
所以根据分析，需要在APP.vue中使用router-link组件进行导航的制作，另外需要再创建2个页面，用于分别展示交通可视化以及物流可视化的相关图表。

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

最后，还需要在main.js中配置路由。

实现步骤
编写APP.vue中的代码，需求如下：
（1）为整个页面设置宽度和高度，并添加背景图片；
注意：背景图片存放在“/home/qingjiao/vue-info/bg/”文件夹中，请从此目录获取背景图片，获取到后，将图片存放在“/home/qingjiao/vue-demo/src/assets/”文件夹中。
（2）创建h2标题标签，并设置高度和行高为60像素，文本居中显示；
（3）创建列表，使用router-link组件进行导航，通过传递to来指定链接，并为导航添加样式，以及鼠标滑过时的效果；
（4）创建一个盒子，命名为pages，路由匹配到的组件将渲染在这里；
此部分默认效果：

鼠标滑过导航时的效果：

分别编写Traffic.vue、Logistics.vue中的代码，需求如下：
注意：这里主要搭建结构，后面的步骤再介绍如何绘制图表
（1）由于交通可视化和物流可视化页面的5个图表均分为上下结构，所以两个页面均需要创建2个div盒子，盒子1用于展示上面的两个图表，盒子2用于展示下面的三个图表；
（2）结构搭建好后，再为盒子添加设置宽度、高度、浮动、间距等样式即可；

编写main.js中的代码，需求如下：
（1）使用import导入vue router；
（2）定义路由组件和路由映射；
（3）创建路由实例并传递 routes配置；
（4）创建并挂载根实例；

智能考核，检测通过即完成

考核条件如下：

1. App.vue关键代码考核

条件得分：

10/10

操作环境：

ubuntu-web可视化-vue

已通过恭喜您完成本任务！

2. Traffic.vue关键代码考核

条件得分：

10/10

操作环境：

ubuntu-web可视化-vue

已通过恭喜您完成本任务！

3. Logistics.vue关键代码考核

条件得分：

10/10

操作环境：

ubuntu-web可视化-vue

已通过恭喜您完成本任务！

4. main.js关键代码考核

条件得分：

10/10

操作环境：

ubuntu-web可视化-vue

已通过恭喜您完成本任务！

查看任务解析

已公布

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')

绘图前须知：
（1）页面结构布局好以后，就可以使用ECharts绘制图表了，所以需要先在Traffic.vue页面中导入echarts依赖包，导入后，先来绘制第一个图表，即簇状柱形图；
（2）图表需要请求json数据，所以需要导入jquery依赖包；
注意：项目json数据存放在“/home/qingjiao/vue-info/json-data/2.5 traffic-data/”文件夹中，请从此目录获取数据，获取到数据后，将数据存放在“/home/qingjiao/vue-demo/public/”文件夹中。
导入依赖包是做对应操作前必须要做的事情，后面不再强调，请大家自行导入！

绘制簇状柱形图的实现步骤如下：
（1）根据准备好的盒子，初始化echarts实例，并命名为myChart1；
（2）设置图表类型为柱形图，并请求json数据，动态渲染出X轴数据和Y轴数据；
（3）设置“中型车”柱子显示出平均值；
（4）改变X轴及Y轴的轴线和文字颜色为#EDEDED；
（5）设置图表标题为“收费站收费量”，并修改字体颜色为#EDEDED，字体大小为14像素；
（6）为图表添加图例，并设置其居中显示，距上方35像素，同时改变字体颜色为#EDEDED，字体大小为12像素；
（7）为图表添加提示信息。
默认效果如下图示：

鼠标滑过的提示信息效果如下图示：

智能考核，检测通过即完成

考核条件如下：

1. 簇状柱形图关键代码考核

条件得分：

10/10

操作环境：

ubuntu-web可视化-vue

已通过恭喜您完成本任务！

查看任务解析

已公布

实现代码：

// 根据准备好的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
              }
            ]
          });
        });

vnc

绘制折线图的数据如下：
月份：1月、2月、3月、4月、5月、6月、7月、8月、9月、10月、11月、12月
公路运输：834、760、943、865、872、968、976、920、935、960、980、950
铁路运输：116、160、143、165、172、168、376、420、635、720、680、750
水运：55、59、60、65、72、68、76、90、95、100、110、130
空运：547、602、798、321、635、524、776、650、585、465、612、573

绘制折线图的实现步骤如下：
（1）根据准备好的盒子，初始化echarts实例，并命名为myChart2；
（2）设置图表类型为折线图，并设置X轴数据项为“1月、2月、3月、4月、5月、6月、7月、8月、9月、10月、11月、12月”，公路运输数据值为“834、760、943、865、872、968、976、920、935、960、980、950”，铁路运输数据值为“116、160、143、165、172、168、376、420、635、720、680、750”，水运数据值为“55、59、60、65、72、68、76、90、95、100、110、130”，空运数据值为“547、602、798、321、635、524、776、650、585、465、612、573”；
（3）分别设置公路运输折线显示出最小值，铁路运输折线数据标签显示在上方，其字体大小为12像素，水运折线显示出最大值；
（4）改变X轴及Y轴的轴线和文字颜色为#EDEDED；
（5）设置图表标题为“不同运输方式的货流量”，并修改字体颜色为#EDEDED，字体大小为14像素；
（6）添加图例，并使其居中显示，距上方35像素，同时设置字体大小为12像素，字体颜色为#EDEDED；
（7）为图表添加提示信息。
默认效果如下图示：

鼠标滑过的提示信息效果如下图示：

智能考核，检测通过即完成

考核条件如下：

1. 折线图关键代码考核

条件得分：

0/10

操作环境：

ubuntu-web可视化-vue

查看任务解析

已公布

实现代码：

// 根据准备好的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);

绘制饼图的数据如下：
月份：4月、5月、6月、7月、8月
数据：18.7、22.4、27.6、33.8、39.9

绘制饼图的实现步骤如下：
（1）根据准备好的盒子，初始化echarts实例，并命名为myChart3；
（2）设置图表类型为饼图，图表半径为50%；
（3）设置数据项名称分别为“4月、5月、6月、7月、8月”，数据项值分别为“18.7、22.4、27.6、33.8、39.9”；
（4）给图表添加灰色阴影，模糊距离为20的高亮样式；
（5）为图表添加标签，并显示百分比；
（6）修改图表字体颜色为#EDEDED，字体大小为12像素；
（7）设置图表标题为“2022年月度客运量累计占比”，并修改字体颜色为#EDEDED，字体大小为14像素；
（8）设置图表提示信息显示为占比。
默认效果如下图示：

鼠标滑过的提示信息效果如下图示：

智能考核，检测通过即完成

考核条件如下：

1. 饼图关键代码考核

条件得分：

0/10

操作环境：

ubuntu-web可视化-vue

查看任务解析

已公布

实现代码：

// 根据准备好的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);

绘制雷达图的数据如下：
交通事故：闯红灯、逆行、违停、闯禁行、超速、超载
上月：15, 3, 22, 1, 12, 18
本月：13, 5, 14, 4, 10, 9

绘制雷达图的实现步骤如下：
（1）根据准备好的盒子，初始化echarts实例，并命名为myChart4；
（2）设置雷达图的指示器，用来指定雷达图中的多个变量（维度），其包含：闯红灯（最大值30）、逆行（最大值10）、违停（最大值30）、闯禁行（最大值5）、超速（最大值20）、超载（最大值20）；
（3）设置图表类型为雷达图，数据项名称分别为“上月”和“本月”，其数据值分别为“15, 3, 22, 1, 12, 18”和“13, 5, 14, 4, 10, 9”；
（4）设置雷达图的半径为100，位置为50%和50%，文字颜色为#EDEDED；
（5）设置图表标题为“本月较上月发生的交通事故”，并修改字体颜色为#EDEDED，字体大小为14像素；
（6）为图表添加图例，并设置其在左边显示，距上方35像素，同时改变字体颜色为#EDEDED，字体大小为12像素；
（7）为图表添加提示信息。
默认效果如下图示：

鼠标滑过的提示信息效果如下图示：

智能考核，检测通过即完成

考核条件如下：

1. 雷达图关键代码考核

条件得分：

0/10

操作环境：

ubuntu-web可视化-vue

查看任务解析

已公布

实现代码：

// 根据准备好的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);

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

绘制玫瑰图的数据如下：
年份：2015年、2016年、2017年、2018年、2019年、2020年、2021年
数据：1181、1543、1905、2264、2556、2716、3050

绘制玫瑰图的实现步骤如下：
（1）根据准备好的盒子，初始化echarts实例，并命名为myChart5；
（2）设置图表类型为玫瑰图，图表内外半径大小为20和100，图表位置为50%和45%；
（3）设置数据项名称分别为“2015年、2016年、2017年、2018年、2019年、2020年、2021年”，数据项值分别为“1181、1543、1905、2264、2556、2716、3050”；
（4）修改图表的字体颜色为#EDEDED，字体大小为12像素；
（5）设置图表标题为“每年公共交通出行次数占比”，并修改字体颜色为#EDEDED，字体大小为14像素；
（6）设置图表提示信息显示为占比。
默认效果如下图示：

鼠标滑过的提示信息效果如下图示：

智能考核，检测通过即完成

考核条件如下：

1. 玫瑰图关键代码考核

条件得分：

0/10

操作环境：

ubuntu-web可视化-vue

查看任务解析

已公布

实现代码：

// 根据准备好的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);

任务9：绘制各分公司的运输成本与毛利柱折混合图

绘图前须知：
交通可视化图表完成后，再实现物流可视化的图表，需要先在Logistics.vue页面中导入echarts依赖包，导入后，先来绘制第一个图表，即柱折混合图；

绘制柱折混合图的数据如下：
地区：上海、北京、浙江、广东、福建、湖北、安徽、黑龙江、山东、吉林
成本：4604.36、4068.21、3715.08、3256.47、2942.26、3679.01、5014.98、3331.69、4762.54、2489.16
毛利：4043.05, 3521.98, 2915.73, 3007.15, 2801.07, 2936.32, 4610.01, 3054.89, 4456.81, 2223.97

绘制柱折混合图的实现步骤如下：
（1）根据准备好的盒子，初始化echarts实例，并命名为myChart1；
（2）设置X轴数据为“上海、北京、浙江、广东、福建、湖北、安徽、黑龙江、山东、吉林”；
（3）设置图表类型分别为柱形图、折线图，其中柱形图为“成本”，柱子宽度为50%，数据为“4604.36、4068.21、3715.08、3256.47、2942.26、3679.01、5014.98、3331.69、4762.54、2489.16”；再设置**折线图为“毛利”，线条为平滑线，数据为“4043.05, 3521.98, 2915.73, 3007.15, 2801.07, 2936.32, 4610.01, 3054.89, 4456.81, 2223.97”；
（4）改变X轴及Y轴的轴线和文字颜色为#EDEDED；
（5）设置图表标题为“各分公司的运输成本与毛利”，并修改字体颜色为#EDEDED，字体大小为14像素；
（6）为图表添加图例，并设置其居中显示，同时改变字体颜色为#EDEDED，字体大小为12像素；
（7）为图表添加提示信息。
默认效果如下图示：

鼠标滑过的提示信息效果如下图示：

智能考核，检测通过即完成

考核条件如下：

1. 柱折混合图关键代码考核

条件得分：

0/10

操作环境：

ubuntu-web可视化-vue

查看任务解析

已公布

实现代码：

// 根据准备好的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);

任务10：绘制不同运输方式的运送量柱形图

绘制柱形图的数据如下：
运输方式：国内空运、城际专线、城际快线、新邦专线、新邦快线、汽运专线、汽运偏线
数据：17732、39243、21479、32357、34960、15966、36376

绘制柱形图的实现步骤如下：
（1）根据准备好的盒子，初始化echarts实例，并命名为myChart2；
（2）设置图表类型为柱形图，并设置X轴数据项为“国内空运、城际专线、城际快线、新邦专线、新邦快线、汽运专线、汽运偏线”，Y轴数据值为“17732、39243、21479、32357、34960、15966、36376”；
（3）改变图表柱子颜色为橙色（orange），再设置柱子宽度为40%；
（4）为图表添加平均值；
（5）改变X轴及Y轴的轴线和文字颜色为#EDEDED；
（6）设置图表标题为“不同运输方式的运送量”，并修改字体颜色为#EDEDED，字体大小为14像素；
（7）为图表添加提示信息。
默认效果如下图示：

鼠标滑过的提示信息效果如下图示：

智能考核，检测通过即完成

考核条件如下：

1. 柱形图关键代码考核

条件得分：

0/10

操作环境：

ubuntu-web可视化-vue

查看任务解析

已公布

实现代码：

// 根据准备好的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);

任务11：绘制各类型商品运输数量占比玫瑰图

绘制玫瑰图的数据如下：
类型：冷链化工危险品、冷链化工品、冷链普货、常温化工危险品、常温化工品、常温普货
数据：174、178、181、106、201、371

绘制玫瑰图的实现步骤如下：
（1）根据准备好的盒子，初始化echarts实例，并命名为myChart3；
（2）设置图表类型为玫瑰图，图表内外半径大小为20和100，图表位置为50%和45%；
（3）设置数据项名称分别为“冷链化工危险品、冷链化工品、冷链普货、常温化工危险品、常温化工品、常温普货”，数据项值分别为“174、178、181、106、201、371”；
（4）修改图表的字体颜色为#EDEDED，字体大小为12像素；
（5）设置图表标题为“各类型商品运输数量占比”，并修改字体颜色为#EDEDED，字体大小为14像素；
（6）设置图表提示信息显示为占比。
默认效果如下图示：

鼠标滑过的提示信息效果如下图示：

智能考核，检测通过即完成

考核条件如下：

1. 玫瑰图关键代码考核

条件得分：

0/10

操作环境：

ubuntu-web可视化-vue

查看任务解析

已公布

实现代码：

// 根据准备好的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);

任务12：绘制全国便利店数量TOP10分布条形图

绘制条形图的数据如下：
城市：盐城市、阜阳市、丽水市、上海市、安庆市、包头市、石家庄市、杭州市、焦作市、北京市
数据：2032、2954、3055、3250、3987、4021、5070、6377、7410、8361

绘制条形图的实现步骤如下：
（1）根据准备好的盒子，初始化echarts实例，并命名为myChart4；
（2）设置图表类型为条形图，并设置X轴数据值为“2032、2954、3055、3250、3987、4021、5070、6377、7410、8361”，Y轴数据项为“盐城市、阜阳市、丽水市、上海市、安庆市、包头市、石家庄市、杭州市、焦作市、北京市”；
（3）为条形图添加灰色背景，并设置条形图柱子颜色为#8DD35F；
（4）改变X轴及Y轴的轴线和文字颜色为#EDEDED；
（5）设置图表标题为“全国便利店数量TOP10分布”，并修改字体颜色为#EDEDED，字体大小为14像素；
（6）为图表添加提示信息。
默认效果如下图示：

鼠标滑过的提示信息效果如下图示：

智能考核，检测通过即完成

考核条件如下：

1. 条形图关键代码考核

条件得分：

0/10

操作环境：

ubuntu-web可视化-vue

查看任务解析

已公布

实现代码：

// 根据准备好的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);

任务13：绘制不同签单类型的数量玫瑰图

绘制玫瑰图的数据如下：
类型：原件签收、网点签收、本人签收、他人代收、放置指定位置、门卫代收、其他
数据：76843、66783、60258、33025、20101、9258、5641

绘制玫瑰图的实现步骤如下：
（1）根据准备好的盒子，初始化echarts实例，并命名为myChart5；
（2）设置图表类型为玫瑰图，图表内外半径大小为20和100，图表位置为50%和45%；
（3）设置数据项名称分别为“原件签收、网点签收、本人签收、他人代收、放置指定位置、门卫代收、其他”，数据项值分别为“76843、66783、60258、33025、20101、9258、5641”；
（4）修改图表的字体颜色为#EDEDED，字体大小为12像素；
（5）设置图表标题为“不同签单类型的数量”，并修改字体颜色为#EDEDED，字体大小为14像素；
（6）设置图表提示信息显示为占比。
默认效果如下图示：

鼠标滑过的提示信息效果如下图示：

智能考核，检测通过即完成

考核条件如下：

1. 玫瑰图关键代码考核

条件得分：

0/10

操作环境：

ubuntu-web可视化-vue

查看任务解析

已公布

实现代码：

// 根据准备好的dom初始化echarts实例
        var myChart5 = echarts.init(document.getElementById('canvas5'));
        var option5={
           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:76843, name:'原件签收'},           // 变量对应的具体数据
              {value:66783, name:'网点签收'},
              {value:60258, name:'本人签收'},
              {value:33025, name:'他人代收'},
              {value:20101, name:'放置指定位置'},
              {value:9258, name:'门卫代收'},
              {value:5641, name:'其他'}
            ]
          }]
        }
        myChart5.setOption(option5);

posted @ 2023-10-27 07:33 Cuckoo~ 阅读(277) 评论(0) 收藏举报

刷新页面返回顶部