玫瑰图 折线图玫瑰图 雷达图"/>
行业可视化 簇状柱形图 饼图 玫瑰图 折线图玫瑰图 雷达图
-
创建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>
<!--使用 rounter-link 组件进行导航 -->
<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}%', // 格式化数值百分比输出},},// 修改字体颜色的代码beginitemStyle: {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',// 修改字体颜色的代码beginitemStyle: {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',// 修改字体颜色的代码beginitemStyle: {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);
更多推荐
行业可视化 簇状柱形图 饼图 玫瑰图 折线图玫瑰图 雷达图
发布评论