vue-代码
Traffic代码：
<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>
import * as echarts from 'echarts'
import $ from "jquery";
export default {
name: 'App',
mounted () {
// 根据准备好的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);
//2
// 根据准备好的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);
//3
// 根据准备好的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);
//4
// 根据准备好的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);
}
}
</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>
import * as echarts from 'echarts'
//import $ from 'jquery';
export default {
name: 'App',
mounted () {
// 根据准备好的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);
//1
// 根据准备好的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);
//3
// 根据准备好的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);
//3
// 根据准备好的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);
//4
// 根据准备好的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);
}
}
</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>
浙公网安备 33010602011771号