ygs
4 months ago
40 changed files with 7747 additions and 9149 deletions
File diff suppressed because it is too large
@ -0,0 +1,24 @@ |
|||
import * as echarts from "echarts"; |
|||
|
|||
/** 获取echart实例 */ |
|||
export const getEchartInstance = (domId)=>{ |
|||
const dom = document.getElementById(domId); // 绘制图表 // setOption方法设置图表实例的配置项 以及数据 所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。
|
|||
let myChart = echarts.getInstanceByDom(dom); |
|||
if (myChart == null) { |
|||
myChart = echarts.init(dom); |
|||
}else { |
|||
myChart.clear() |
|||
} |
|||
return myChart |
|||
} |
|||
|
|||
export const getCommonData = (reqBusiFlagId,paramsObj) => { |
|||
return jwtServerInstance.request({ |
|||
url:'/system/sql/common', |
|||
method:'post', |
|||
data:{ |
|||
reqBusiFlagId, |
|||
paramsObj |
|||
} |
|||
}) |
|||
} |
|||
|
After Width: | Height: | Size: 10 MiB |
|
After Width: | Height: | Size: 85 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 128 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 55 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 38 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 2.0 MiB |
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 10 MiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 111 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 130 KiB |
@ -0,0 +1,781 @@ |
|||
<template> |
|||
<div class="all"> |
|||
<!--左侧--> |
|||
<div class="left-all"> |
|||
<div class="left-all-wai"><!--外层--> |
|||
<div class="left-title"></div> |
|||
<div class="left-conent"><!--内容--> |
|||
<div class="left-title-gjzc"> |
|||
<!-- 国家政策 --> |
|||
<div style="width: 100%; height: 10%; float:left; margin:3% 0 3% 0"> |
|||
<div style="Position: fixed;" class="left-guoJzc"></div> |
|||
<div style="margin-top: -3%;" class="ckgd"></div> |
|||
</div> |
|||
<div v-for="(item,index) in left1Data" style="width: 100%;top:50px;"> |
|||
<div style="width: 50%; float:left;"> |
|||
<div style="font-size: 10px; font-weight:bold; text-align: center; letter-spacing: 0.04em;"> |
|||
{{ item.name }} |
|||
</div> |
|||
<div style="font-size: 8px; font-weight: normal; letter-spacing: 0.04em;">{{ item.time }}</div> |
|||
<div class="left-content-detail"> |
|||
{{ item.content != null ? item.content : "" }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="left-title-gjzc"> |
|||
<!-- 省级政策 --> |
|||
<div style="width: 100%; height: 10%; float:left; margin:3% 0 3% 0"> |
|||
<div style="Position: fixed;" class="left-sJzc"></div> |
|||
<div style="margin-top: -3%;" class="ckgd"></div> |
|||
</div> |
|||
<div v-for="(item,index) in left2Data" style="width: 100%;top:50px;"> |
|||
<div style="width: 50%; float:left;"> |
|||
<div style="font-size: 10px; font-weight:bold; text-align: center; letter-spacing: 0.04em;"> |
|||
{{ item.name }} |
|||
</div> |
|||
<div style="font-size: 8px; font-weight: normal; letter-spacing: 0.04em;">{{ item.time }}</div> |
|||
<div class="left-content-detail"> |
|||
{{ item.content != null ? item.content : "" }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="left-title-gjzc"> |
|||
<!-- 本厅政策 --> |
|||
<div style="width: 100%; height: 10%; float:left; margin:3% 0 3% 0"> |
|||
<div style="Position: fixed;" class="left-benTzd"></div> |
|||
<div style="margin-top: -3%;" class="ckgd"></div> |
|||
</div> |
|||
<div v-for="(item,index) in left3Data" style="width: 100%;top:50px;"> |
|||
<div style="width: 50%; float:left;"> |
|||
<div style="font-size: 10px; font-weight:bold; text-align: center; letter-spacing: 0.04em;"> |
|||
{{ item.name }} |
|||
</div> |
|||
<div style="font-size: 8px; font-weight: normal; letter-spacing: 0.04em;">{{ item.time }}</div> |
|||
<div class="left-content-detail"> |
|||
{{ item.content != null ? item.content : "" }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!--中间--> |
|||
<div class=" " style="width: 30%; height: 100%; float:left; margin-left: 2%; margin-right:2%;"> |
|||
<div style="width: 100%; height: 100%; float:left;"> |
|||
<div class="center-content"></div> |
|||
|
|||
<div id="conterChart" style="width: 100%; height: 50%;"></div> |
|||
|
|||
<div |
|||
style="width: 100%; height: 35%;background: linear-gradient(0deg, rgba(32, 49, 65, 0.7) 0%, rgba(32, 49, 65, 0) 100%);box-sizing: border-box;border: 1px solid;border-image: linear-gradient(0deg, #52A5E7 0%, rgba(82, 165, 231, 0) 100%) 2;"> |
|||
<div style="width: 100%; height: 10%; float:left; margin:3% 0 3% 0"> |
|||
<div class="left-yeWzy"></div> |
|||
<div style="margin-top: -4%;" class="ckgd"></div> |
|||
</div> |
|||
<div style="width: 100%; height: 80%;"> |
|||
<div> |
|||
<div class=" "> |
|||
<span class=" ">省政府</span> |
|||
<span class=" ">市场监督管理局</span> |
|||
<span class=" ">省公安厅</span> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
<div class="z-file"> |
|||
<div class="z-file-t"> |
|||
<div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/cxlwt.png"></div> |
|||
<div style="float: left;width: 100%;height: 20%; font-size: 8px;">畅行瞭望台</div> |
|||
</div> |
|||
<div class="z-file-t"> |
|||
<div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/ssjh.png"></div> |
|||
<div style="float: left;width: 100%;height: 20%; font-size: 8px;">三省交辉</div> |
|||
</div> |
|||
<div class="z-file-t"> |
|||
<div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/stlj.png"></div> |
|||
<div style="float: left;width: 100%;height: 20%; font-size: 8px;">省途亮绩</div> |
|||
</div> |
|||
<div class="z-file-t"> |
|||
<div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/jczh.png"></div> |
|||
<div style="float: left;width: 100%;height: 20%; font-size: 8px;">交畅智汇</div> |
|||
</div> |
|||
<div class="z-file-t"> |
|||
<div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/yjlh.png"></div> |
|||
<div style="float: left;width: 100%;height: 20%; font-size: 8px;">应急领航</div> |
|||
</div> |
|||
<div class="z-file-t"> |
|||
<div class="z-file-ts"><img style="width: 100%;height: 100%" src="../../assets/img/jwjd.png"></div> |
|||
<div style="float: left;width: 100%;height: 20%; font-size: 8px;">吉问吉答</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!--右侧--> |
|||
<div style="width: 32%; height: 100%; float:left; margin-right: 1%"> |
|||
<div style="width: 100%; height: 100%; float:left;"> |
|||
<div class="right-content"></div> |
|||
|
|||
<div class="right-echarts"> |
|||
<div class="right-echarts-child"> |
|||
<div style="width:100%; height: 10%; margin-top:5%;"><img style="width:100%;" src="../../assets/img/rx.png"></div> |
|||
<div id="right1Chart" style="width:100%; height: 75%"></div> |
|||
<div style="width:100%; height: 10%"><img style="width:100%;" src="../../assets/img/right-bottom.png"></div> |
|||
</div> |
|||
<div class="right-echarts-child"> |
|||
<div style="width:100%; height: 10%; margin-top:5%;"><img style="width:100%;" src="../../assets/img/rxs.png"></div> |
|||
<div id="right2Chart" style="width:100%; height: 75%"></div> |
|||
<div style="width:100%; height: 10%"><img style="width:100%;" src="../../assets/img/right-bottom.png"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="right-echarts"> |
|||
<div class="right-echarts-child"> |
|||
<div style="width:100%; height: 10%; margin-top:5%;"><img style="width:100%;" src="../../assets/img/tjzxx.png"></div> |
|||
<div id="right3Chart" style="width:100%; height: 75%"></div> |
|||
<div style="width:100%; height: 10%"><img style="width:100%;" src="../../assets/img/right-bottom.png"></div> |
|||
</div> |
|||
<div class="right-echarts-child"> |
|||
<div style="width:100%; height: 10%; margin-top:5%;"><img style="width:100%;" src="../../assets/img/wlyq.png"></div> |
|||
<div id="right4Chart" style="width:100%; height: 75%"></div> |
|||
<div style="width:100%; height: 10%"><img style="width:100%;" src="../../assets/img/right-bottom.png"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import {getEchartInstance} from "@/api/jczh"; |
|||
|
|||
export default { |
|||
name: "drain", |
|||
components: {getEchartInstance}, |
|||
data() { |
|||
return { |
|||
left1Data: [ |
|||
{ |
|||
name: '四好农村路', |
|||
time: '2024-06-20', |
|||
content: ' 一是全力以赴保通保畅，服务经济社会发展大局。二是努力扩大有效投资，加快建设现代化交通基础设施体系。三是积极推动交通物流降本提质增效，大力发展现代运输服务业。四是进一步全面深化交通运输改革，加强法治建设，优化营商环境。五是加大科技创新力度，推进交通运输智慧绿色发展。六是服务大局、服务基层、服务人民，有力保障城乡融合和区域协调发展。七是积极服务共建“一带一路”高质量发展，持续推动全球交通合作。八是点面结合加强试点，做好加快建设交通强国各项具体工作。九是全力抓好交通运输安全生产工作，牢牢守住安全生产底线。十是加强党的全面领导，加强党的建设，深化党风廉政建设和反腐败斗争。' |
|||
}, |
|||
{ |
|||
name: '2024年交通运输工作重点', |
|||
time: '2023-12-21', |
|||
content: ' 一是全力以赴保通保畅，服务经济社会发展大局。二是努力扩大有效投资，加快建设现代化交通基础设施体系。三是积极推动交通物流降本提质增效，大力发展现代运输服务业。四是进一步全面深化交通运输改革，加强法治建设，优化营商环境。五是加大科技创新力度，推进交通运输智慧绿色发展。六是服务大局、服务基层、服务人民，有力保障城乡融合和区域协调发展。七是积极服务共建“一带一路”高质量发展，持续推动全球交通合作。八是点面结合加强试点，做好加快建设交通强国各项具体工作。九是全力抓好交通运输安全生产工作，牢牢守住安全生产底线。十是加强党的全面领导，加强党的建设，深化党风廉政建设和反腐败斗争。' |
|||
}, |
|||
], |
|||
left2Data: [ |
|||
{ |
|||
name: '省交通运输厅省财政厅省发展和改革委员会关于对氢能车辆行驶吉林省高速公路实施优惠的通知', |
|||
time: '2024-08-12', |
|||
content: ' 2024年9月1日0时至2026年8月31日24时，安装ETC套装设备的吉林省籍氢能车辆，在吉林省各高速公路收费站间点对点免费通行，相应的高速公路通行费由省财政统一支付。' |
|||
}, |
|||
{ |
|||
name: '省交通运输厅与辽宁省交通运输厅签订《国家区域性公路交通应急管理协同联动战略合作框架协议》', |
|||
time: '2024-06-28', |
|||
content: ' 为响应《东北“三省一区”协同推进交通运输高质量发展行动倡议》，近日，省交通运输厅与辽宁省交通运输厅签订了《国家区域性公路交通应急管理协同联动战略合作框架协议》，旨在切实加强吉林、辽宁交通运输应急处置联动协作，实现互联互通，进一步提高跨区域应急救援协同处置能力，推动交通运输高质量发展。' |
|||
}, |
|||
], |
|||
left3Data: [ |
|||
{ |
|||
name: '平安交通', |
|||
time: '2024-08-19', |
|||
content: ' 根据《交通运输部关于印发交通运输系统“平安交通”创建活动实施方案的通知》（交安监发〔2013〕116号）部署，交通运输系统开展了为期5年的“平安交通”创建活动。目前，“平安交通”建设已进入关键阶段，各部门、各单位要结合安全生产责任体系、隐患排查治理、风险管理、安全诚信、企业标准化等工作，坚持问题导向、目标导向，聚焦重点领域，全面推进“平安交通”建设。\n' |
|||
}, |
|||
{ |
|||
name: '交通运输惠企政策', |
|||
time: '2024-04-23', |
|||
content: ' 根据《交通运输部关于印发交通运输系统“平安交通”创建活动实施方案的通知》（交安监发〔2013〕116号）部署，交通运输系统开展了为期5年的“平安交通”创建活动。目前，“平安交通”建设已进入关键阶段，各部门、各单位要结合安全生产责任体系、隐患排查治理、风险管理、安全诚信、企业标准化等工作，坚持问题导向、目标导向，聚焦重点领域，全面推进“平安交通”建设。\n' |
|||
}, |
|||
], |
|||
right1Chart: [ |
|||
{value: 1048, name: '已处理'}, |
|||
{value: 735, name: '未处理'}, |
|||
], |
|||
right2Chart: [ |
|||
{value: 1048, name: '已处理'}, |
|||
{value: 735, name: '未处理'}, |
|||
], |
|||
right3Chart: [ |
|||
{value: 1048, name: '已处理回复'}, |
|||
{value: 735, name: '未处理'}, |
|||
], |
|||
right4Chart: [ |
|||
{value: 1048, name: '已处理回复'}, |
|||
{value: 735, name: '未处理'}, |
|||
], |
|||
} |
|||
}, |
|||
created() { |
|||
//初始化 |
|||
}, |
|||
mounted() { |
|||
//加载 |
|||
this.initData(); |
|||
}, |
|||
methods: { |
|||
//初始化数据方法 |
|||
initData() { |
|||
this.conterChart(); |
|||
this.rightOneChart(); |
|||
this.rightTwoChart(); |
|||
this.rightThreeChart(); |
|||
this.rightFourChart(); |
|||
}, |
|||
conterChart() { |
|||
let myChart = getEchartInstance("conterChart"); |
|||
let option = { |
|||
title: { |
|||
text: '件', |
|||
textStyle:{ |
|||
// color:'#ccc',//'red'，字体颜色 |
|||
// fontStyle:'normal',//'italic'(倾斜) | 'oblique'(倾斜体) ，字体风格 |
|||
// fontWeight:'normal',//'bold'(粗体) | 'bolder'(粗体) | 'lighter'(正常粗细) ，字体粗细 |
|||
fontSize:14,//字体大小 |
|||
lineHeight:18,//字体行高 |
|||
}, |
|||
textAlign:'auto',//整体（包括 text 和 subtext）的水平对齐 |
|||
textVerticalAlign:'auto',//整体（包括 text 和 subtext）的垂直对齐 |
|||
padding:0,//[5,10] | [ 5,6, 7, 8] ,标题内边距 |
|||
left:'auto',//'5' | '5%'，title 组件离容器左侧的距离 |
|||
right:'auto',//'title 组件离容器右侧的距离 |
|||
top:'auto',//title 组件离容器上侧的距离 |
|||
bottom:'auto',//title 组件离容器下侧的距离 |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis' |
|||
}, |
|||
legend: { |
|||
data: ['省政府', '市场监督管理局', '省公安厅'] |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
// saveAsImage: {} |
|||
} |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] |
|||
}, |
|||
yAxis: { |
|||
splitLine:{ |
|||
show:true, |
|||
lineStyle:{ |
|||
type:'dashed'//Y轴坐标虚线 |
|||
} |
|||
}, |
|||
type: 'value' |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '省政府', |
|||
type: 'line', |
|||
// stack: 'Total', |
|||
data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410] |
|||
}, |
|||
{ |
|||
name: '市场监督管理局', |
|||
type: 'line', |
|||
// stack: 'Total', |
|||
data: [320, 332, 301, 334, 390, 330, 320, 201, 154, 190, 330, 210] |
|||
}, |
|||
{ |
|||
name: '省公安厅', |
|||
type: 'line', |
|||
// stack: 'Total', |
|||
data: [120, 132, 101, 134, 190, 130, 130, 101, 154, 190, 130, 140] |
|||
} |
|||
] |
|||
}; |
|||
option && myChart.setOption(option); |
|||
}, |
|||
rightOneChart() { |
|||
let myChart = getEchartInstance("right1Chart"); |
|||
let data = [ |
|||
{ |
|||
name: "已处理", |
|||
value: 156 |
|||
}, |
|||
{ |
|||
name: "未处理", |
|||
value: 231 |
|||
}, |
|||
]; |
|||
let option = { |
|||
//环形图中间文字 |
|||
// title: { |
|||
// text: "已处理回复", |
|||
// textStyle: { |
|||
// fontSize: 12, |
|||
// color: "rgba(0,0,0,0.65)", |
|||
// fontWeight: 400 |
|||
// }, |
|||
// subtextStyle: { |
|||
// fontSize: 20, |
|||
// color: "#000000", |
|||
// fontWeight: 500 |
|||
// }, |
|||
// textAlign: "center", //图例文字居中显示 |
|||
// x: "45%", //距离左边的距离 |
|||
// y: "40%" //距离上边的距离 |
|||
// }, |
|||
//数据的颜色设置 |
|||
color: ["#2BCB95", "#F6BD16"], |
|||
//鼠标移入显示的文字 |
|||
tooltip: { |
|||
trigger: 'item' |
|||
}, |
|||
//图例设置 |
|||
legend: { |
|||
// orient: "vertical", //竖直展示，如果横着的话，这个可以直接去掉 |
|||
// right: "10%", |
|||
// align: "left", |
|||
// itemGap: 20, //数据上下的距离 |
|||
// icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示 |
|||
itemWidth: 15, // 设置宽度 |
|||
// data: data, |
|||
// top:'5%', |
|||
bottom: '0%', |
|||
left: 'center' |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '12345热线', |
|||
type: 'pie', |
|||
radius: ['50%', '70%'], |
|||
avoidLabelOverlap: false, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
fontSize: 20, |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
data: data |
|||
} |
|||
] |
|||
}; |
|||
option && myChart.setOption(option); |
|||
}, |
|||
rightTwoChart() { |
|||
let myChart = getEchartInstance("right2Chart"); |
|||
let data = [ |
|||
{ |
|||
name: "已处理", |
|||
value: 456 |
|||
}, |
|||
{ |
|||
name: "未处理", |
|||
value: 231 |
|||
}, |
|||
]; |
|||
let option = { |
|||
//环形图中间文字 |
|||
// title: { |
|||
// text: "已处理回复", |
|||
// textStyle: { |
|||
// fontSize: 12, |
|||
// color: "rgba(0,0,0,0.65)", |
|||
// fontWeight: 400 |
|||
// }, |
|||
// subtextStyle: { |
|||
// fontSize: 20, |
|||
// color: "#000000", |
|||
// fontWeight: 500 |
|||
// }, |
|||
// textAlign: "center", //图例文字居中显示 |
|||
// x: "45%", //距离左边的距离 |
|||
// y: "40%" //距离上边的距离 |
|||
// }, |
|||
//数据的颜色设置 |
|||
color: ["#F6BD16", "#FF3B30"], |
|||
//鼠标移入显示的文字 |
|||
tooltip: { |
|||
trigger: 'item', |
|||
// formatter: "{b}<br/> {c}人 ({d}%)" |
|||
}, |
|||
//图例设置 |
|||
legend: { |
|||
// orient: "vertical", //竖直展示，如果横着的话，这个可以直接去掉 |
|||
// right: "10%", |
|||
// align: "left", |
|||
// itemGap: 20, //数据上下的距离 |
|||
// icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示 |
|||
itemWidth: 15, // 设置宽度 |
|||
// data: data, |
|||
// top:'5%', |
|||
bottom: '0%', |
|||
left: 'center' |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '12328热线', |
|||
radius: ["50%", "70%"], //第一个是中间圆的大小，第二个是外边圆的大小 |
|||
// center: ["40%", "50%"], //左边的距离，上边的距离 |
|||
type: 'pie', |
|||
avoidLabelOverlap: false, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
fontSize: 20, |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
data: data |
|||
} |
|||
] |
|||
}; |
|||
option && myChart.setOption(option); |
|||
}, |
|||
rightThreeChart() { |
|||
let myChart = getEchartInstance("right3Chart"); |
|||
let data = [ |
|||
{ |
|||
name: "已处理回复", |
|||
value: 456 |
|||
}, |
|||
{ |
|||
name: "未处理", |
|||
value: 231 |
|||
}, |
|||
]; |
|||
let option = { |
|||
//环形图中间文字 |
|||
// title: { |
|||
// text: "已处理回复", |
|||
// textStyle: { |
|||
// fontSize: 12, |
|||
// color: "rgba(0,0,0,0.65)", |
|||
// fontWeight: 400 |
|||
// }, |
|||
// subtextStyle: { |
|||
// fontSize: 20, |
|||
// color: "#000000", |
|||
// fontWeight: 500 |
|||
// }, |
|||
// textAlign: "center", //图例文字居中显示 |
|||
// x: "45%", //距离左边的距离 |
|||
// y: "40%" //距离上边的距离 |
|||
// }, |
|||
//数据的颜色设置 |
|||
color: ["#365ADF", "#F6BD16"], |
|||
tooltip: { |
|||
trigger: 'item' |
|||
}, |
|||
//图例设置 |
|||
legend: { |
|||
// orient: "vertical", //竖直展示，如果横着的话，这个可以直接去掉 |
|||
// right: "10%", |
|||
// align: "left", |
|||
// itemGap: 20, //数据上下的距离 |
|||
// icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示 |
|||
itemWidth: 15, // 设置宽度 |
|||
// data: data, |
|||
// top:'5%', |
|||
bottom: '0%', |
|||
left: 'center' |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '局厅长信箱', |
|||
type: 'pie', |
|||
radius: ['50%', '70%'], |
|||
avoidLabelOverlap: false, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
fontSize: 20, |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
data: data |
|||
} |
|||
] |
|||
}; |
|||
option && myChart.setOption(option); |
|||
}, |
|||
rightFourChart() { |
|||
let myChart = getEchartInstance("right4Chart"); |
|||
let data = [ |
|||
{ |
|||
name: "已处理回复", |
|||
value: 456 |
|||
}, |
|||
{ |
|||
name: "未处理", |
|||
value: 231 |
|||
}, |
|||
]; |
|||
let option = { |
|||
//环形图中间文字 |
|||
// title: { |
|||
// text: "已处理回复", |
|||
// textStyle: { |
|||
// fontSize: 12, |
|||
// color: "rgba(0,0,0,0.65)", |
|||
// fontWeight: 400 |
|||
// }, |
|||
// subtextStyle: { |
|||
// fontSize: 20, |
|||
// color: "#000000", |
|||
// fontWeight: 500 |
|||
// }, |
|||
// textAlign: "center", //图例文字居中显示 |
|||
// x: "45%", //距离左边的距离 |
|||
// y: "40%" //距离上边的距离 |
|||
// }, |
|||
//数据的颜色设置 |
|||
color: ["#FD3F3F","#365ADF"], |
|||
tooltip: { |
|||
trigger: 'item' |
|||
}, |
|||
//图例设置 |
|||
legend: { |
|||
// orient: "vertical", //竖直展示，如果横着的话，这个可以直接去掉 |
|||
// right: "10%", |
|||
// align: "left", |
|||
// itemGap: 20, //数据上下的距离 |
|||
// icon: "circle", //圆形小点展示，默认为方形，去掉就是方形展示 |
|||
itemWidth: 15, // 设置宽度 |
|||
// data: data, |
|||
// top:'5%', |
|||
bottom: '0%', |
|||
left: 'center' |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '网络舆情', |
|||
type: 'pie', |
|||
radius: ['50%', '70%'], |
|||
avoidLabelOverlap: false, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
fontSize: 20, |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
data: data |
|||
} |
|||
] |
|||
}; |
|||
option && myChart.setOption(option); |
|||
}, |
|||
//大屏跳转 |
|||
toBigScreen(url) { |
|||
if (!url) { |
|||
return; |
|||
} |
|||
this.$router.push(`/bigScreen/${url}`) |
|||
}, |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.all { |
|||
width: 100%; |
|||
height: calc(100vh - 80px); |
|||
color: #FFFFFF; |
|||
background-image: url('../../assets/img/bj.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
padding-top: 5%; |
|||
} |
|||
|
|||
.left-all { |
|||
width: 32%; |
|||
height: 100%; |
|||
float: left; |
|||
margin-left: 1%; |
|||
} |
|||
|
|||
.left-all-wai { |
|||
width: 100%; |
|||
height: 100%; |
|||
float: left; |
|||
} |
|||
|
|||
.left-title { |
|||
width: 100%; |
|||
height: 5%; |
|||
background-image: url('../../assets/img/zcdc.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.left-conent { |
|||
width: 100%; |
|||
height: 95%; |
|||
float: left; |
|||
} |
|||
|
|||
.left-title-gjzc { |
|||
width: 100%; |
|||
height: 33%; |
|||
float: left; |
|||
background: linear-gradient(0deg, rgba(32, 49, 65, 0.7) 0%, rgba(32, 49, 65, 0) 100%); |
|||
box-sizing: border-box; |
|||
border: 1px solid; |
|||
border-image: linear-gradient(0deg, #52A5E7 0%, rgba(82, 165, 231, 0) 100%) 2; |
|||
} |
|||
|
|||
.left-guoJzc { |
|||
width: 100%; |
|||
height: 100%; |
|||
margin-left: 30%; |
|||
background-image: url('../../assets/img/gjzc.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 40% 100%; |
|||
} |
|||
|
|||
.left-sJzc { |
|||
width: 100%; |
|||
height: 100%; |
|||
margin-left: 30%; |
|||
background-image: url('../../assets/img/sjzc.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 40% 100%; |
|||
} |
|||
|
|||
.left-benTzd { |
|||
width: 100%; |
|||
height: 100%; |
|||
margin-left: 30%; |
|||
background-image: url('../../assets/img/btzd.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 40% 100%; |
|||
} |
|||
|
|||
.left-yeWzy { |
|||
width: 100%; |
|||
height: 100%; |
|||
background-image: url('../../assets/img/ywzy.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 20% 80%; |
|||
} |
|||
|
|||
.left-content-detail { |
|||
margin-left: 2%; |
|||
font-size: 8px; |
|||
color: #84ACE8; |
|||
letter-spacing: 0em; |
|||
text-overflow: -o-ellipsis-lastline; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
//-webkit-line-clamp: 4; //line-clamp: 12; -webkit-box-orient: vertical; |
|||
} |
|||
|
|||
.ckgd { |
|||
width: 10%; |
|||
height: 50%; |
|||
float: right; |
|||
margin-right: 2%; |
|||
background-image: url('../../assets/img/ckgd.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 80%; |
|||
} |
|||
|
|||
.center-content { |
|||
width: 100%; |
|||
height: 5%; |
|||
background-image: url('../../assets/img/hyxt.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
font-size: 18px; |
|||
} |
|||
|
|||
.right-content { |
|||
width: 100%; |
|||
height: 5%; |
|||
background-image: url('../../assets/img/bxjy.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
font-size: 18px; |
|||
} |
|||
|
|||
.right-echarts { |
|||
float: left; |
|||
width: 100%; |
|||
height: 47%; |
|||
} |
|||
|
|||
.right-echarts-child { |
|||
width: 46%; |
|||
height: 100%; |
|||
margin-left: 2%; |
|||
float: left; |
|||
} |
|||
|
|||
.z-file { |
|||
width: 100%; |
|||
height: 10%; |
|||
margin-bottom: 0px; |
|||
} |
|||
|
|||
.z-file-t { |
|||
float: left; |
|||
width: 16%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.z-file-ts { |
|||
float: left; |
|||
width: 100%; |
|||
height: 70%; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,51 @@ |
|||
<template> |
|||
<div id="main" class="echart-style"> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import * as echarts from 'echarts'; |
|||
import { onMounted, ref } from 'vue'; |
|||
let myChart = ref() |
|||
let option = ref({}) |
|||
// let data = ref<any>([ |
|||
// [15, 0], |
|||
// [-50, 10], |
|||
// [-56.5, 20], |
|||
// [-46.5, 30], |
|||
// [-22.1, 40] |
|||
// ]) |
|||
onMounted(() => { |
|||
init() |
|||
}) |
|||
const init = () => { |
|||
// 基于准备好的dom，初始化echarts实例 |
|||
myChart.value = echarts.init(document.getElementById('main')); |
|||
option.value = { |
|||
|
|||
legend: {}, |
|||
tooltip: {}, |
|||
dataset: { |
|||
source: [ |
|||
// ['product', '2015', '2016', '2017'], |
|||
['Matcha Latte', 43.3, 85.8, 93.7], |
|||
['Milk Tea', 83.1, 73.4, 55.1], |
|||
['Cheese Cocoa', 86.4, 65.2, 82.5], |
|||
['Walnut Brownie', 72.4, 53.9, 39.1] |
|||
] |
|||
}, |
|||
xAxis: { type: 'category' }, |
|||
yAxis: {}, |
|||
series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }] |
|||
}; |
|||
myChart.value.setOption(option.value) |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.echart-style { |
|||
width: 350px; |
|||
height: 200px; |
|||
left: 10px; |
|||
background: none; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,290 @@ |
|||
<template> |
|||
<div class="app"> |
|||
<div class="time"> |
|||
<!-- <img :src="timeImage" alt="Local Image" class="time2"> --> |
|||
<h6 style="color: white;">{{ datetimeStr }}</h6> |
|||
</div> |
|||
<div class="image-container"> |
|||
<img :src="titleImage" alt="First Image" class="background-image"> |
|||
<img :src="jrsjImage" alt="Second Image" class="overlay-image"> |
|||
</div> |
|||
<div class="container left1"> |
|||
<div class="leftwenzi">交通运输{{ transportationEvents }}</div> |
|||
<div class="rightwenzi">行政许可审批{{ approvalEvents }}</div> |
|||
<div class="leftwenzi">交通执法{{ lawEnforcementEvents }}</div> |
|||
<div class="rightwenzi">交通科技{{ trafficTechEvents }}</div> |
|||
</div> |
|||
<img :src="jtysImage" alt="Local Image" class="jtys"> |
|||
<div class="left2" > |
|||
<p style="font-size: xx-small;left: 0px;text-align: left;"><span style="color: white;">公路客运 </span>公路货运 水路运输 城市交通</p> |
|||
<!-- <div style="font-size: x-small;" v-for="(tab, index) in tabs" :key="index" :class="{ 'active': activeIndex === index }" @click="activeIndex = index"> --> |
|||
<!-- {{ tab.title }} --> |
|||
<!-- </div> --> |
|||
<!-- <div v-for="(tabContent, index) in tabContents" :key="index" v-show="activeIndex === index"> --> |
|||
<!-- {{ tabContent }} --> |
|||
<bar-chart :data="chartData" /> |
|||
<!-- </div> --> |
|||
</div> |
|||
<img :src="xzspxkImage" alt="Local Image" class="xzspxk"> |
|||
<div class="left3" style="color: white;"> |
|||
<PieChart /> |
|||
</div> |
|||
<img :src="dituImage" alt="Local Image" class="ditu"> |
|||
<img :src="jtzfImage" alt="Local Image" class="jtzf"> |
|||
<img :src="zfajslImage" alt="Local Image" class="zfajsl"> |
|||
<img :src="jtkjImage" alt="Local Image" class="jtkj"> |
|||
<div class="right1" style="color: white;"> |
|||
<div style="height: 210px;text-align: center;"> |
|||
<LineChart /> |
|||
</div> |
|||
<div style="height: 210px;"> |
|||
<LineChart2 /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import BarChart from './BarChart.vue'; |
|||
import PieChart from './PieChart.vue'; |
|||
import LineChart from './LineChart.vue'; |
|||
import LineChart2 from './LineChart2.vue'; |
|||
export default { |
|||
components: { |
|||
BarChart, |
|||
PieChart, |
|||
LineChart, |
|||
LineChart2 |
|||
}, |
|||
data() { |
|||
return { |
|||
jtysImage: require('/src/assets/liaowangtai/交通运输.png'), |
|||
jrsjImage: require('/src/assets/liaowangtai/今日事件@1x.png'), |
|||
titleImage: require('/src/assets/liaowangtai/title@1x.png'), |
|||
xzspxkImage: require('/src/assets/liaowangtai/行政许可审批.png'), |
|||
dituImage: require('/src/assets/liaowangtai/ditu@1x.png'), |
|||
jtzfImage: require('/src/assets/liaowangtai/交通执法.png'), |
|||
jtkjImage: require('/src/assets/liaowangtai/交通科技.png'), |
|||
zfajslImage: require('/src/assets/liaowangtai/执法案件数量.png'), |
|||
transportationEvents: 1563, |
|||
approvalEvents: 535, |
|||
lawEnforcementEvents: 565, |
|||
trafficTechEvents: 265, |
|||
activeIndex: 0, |
|||
tabs: [ |
|||
{ title: '公路客运' }, |
|||
{ title: '公路货运' }, |
|||
{ title: '水路运输' }, |
|||
{ title: '城市交通' } |
|||
], |
|||
tabContents: [ |
|||
'<bar-chart :data="chartData" />', |
|||
'Content for Tab 2', |
|||
'Content for Tab 3' |
|||
] |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.updateDateTime(); |
|||
this.formatDate = setInterval(() => { |
|||
this.updateDateTime(); |
|||
}, 1000); |
|||
}, |
|||
unmounted() { // 在Vue实例销毁前，清除时间定时器 |
|||
if (this.formatDate) { |
|||
clearInterval(this.formatDate); |
|||
} |
|||
}, |
|||
methods: { |
|||
updateDateTime() { // 格式化需要展示的时间格式 |
|||
const now = new Date(); |
|||
const year = now.getFullYear(); |
|||
let month = now.getMonth() + 1; |
|||
let day = now.getDate(); |
|||
const weekday = now.getDay(); |
|||
let hours = now.getHours(); |
|||
let minutes = now.getMinutes(); |
|||
let seconds = now.getSeconds(); |
|||
|
|||
// 将月份和日期补零 |
|||
month = month < 10 ? '0' + month : month; |
|||
day = day < 10 ? '0' + day : day; |
|||
hours = hours < 10 ? '0' + hours : hours; |
|||
minutes = minutes < 10 ? '0' + minutes : minutes; |
|||
seconds = seconds < 10 ? '0' + seconds : seconds; |
|||
|
|||
// 星期数组 |
|||
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; |
|||
|
|||
// 格式化日期时间 |
|||
this.datetimeStr = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds; |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style> |
|||
.active { |
|||
font-weight: bold; |
|||
} |
|||
.title1 { |
|||
position: absolute; |
|||
left: 40px; |
|||
top: 70px; |
|||
width: 30%; |
|||
opacity: 1; |
|||
} |
|||
.jtys { |
|||
position: absolute; |
|||
left: 40px; |
|||
top: 200px; |
|||
width: 30%; |
|||
opacity: 1; |
|||
} |
|||
.ditu { |
|||
position: relative; |
|||
left: 0; |
|||
top: -200px; |
|||
width: 90%; |
|||
opacity: 1; |
|||
padding-top: 5%; |
|||
} |
|||
.xzspxk { |
|||
position: absolute; |
|||
left: 40px; |
|||
top: 440px; |
|||
width: 30%; |
|||
opacity: 1; |
|||
} |
|||
.tab-item { |
|||
padding: 10px 20px; |
|||
cursor: pointer; |
|||
user-select: none; /* 禁止用户选择文本 */ |
|||
text-align: center; |
|||
border-bottom: 2px solid transparent; |
|||
transition: border-color 0.3s, background-color 0.3s; |
|||
} |
|||
.jtzf { |
|||
position: absolute; |
|||
right: 0px; |
|||
top: 60px; |
|||
width: 30%; |
|||
opacity: 1; |
|||
} |
|||
.zfajsl { |
|||
position: absolute; |
|||
right: 0px; |
|||
top: 90px; |
|||
width: 10%; |
|||
opacity: 1; |
|||
} |
|||
.jtkj { |
|||
position: absolute; |
|||
right: 0px; |
|||
top: 470px; |
|||
width: 30%; |
|||
opacity: 1; |
|||
} |
|||
.right1 { |
|||
position: absolute; |
|||
right: 0px; |
|||
top: 8%; |
|||
width: 30%; |
|||
height: 15%; |
|||
opacity: 1; |
|||
} |
|||
.left1 { |
|||
position: absolute; |
|||
left: 40px; |
|||
top: 110px; |
|||
width: 30%; |
|||
height: 12%; |
|||
opacity: 1; |
|||
} |
|||
.left2 { |
|||
position: absolute; |
|||
left: 40px; |
|||
top: 240px; |
|||
width: 30%; |
|||
height: 30%; |
|||
opacity: 1; |
|||
} |
|||
.left3 { |
|||
position: absolute; |
|||
left: 40px; |
|||
top: 480px; |
|||
width: 30%; |
|||
height: 30%; |
|||
opacity: 1; |
|||
} |
|||
.image-container { |
|||
position: relative; |
|||
left: 40px; |
|||
top: -30px; |
|||
width: 30%; |
|||
} |
|||
|
|||
.background-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: block; |
|||
} |
|||
|
|||
.overlay-image { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 55px; |
|||
width: 27%; /* 可以根据需要调整 */ |
|||
height: 100%; /* 可以根据需要调整 */ |
|||
pointer-events: none; /* 防止覆盖层干扰点击事件 */ |
|||
} |
|||
.app { |
|||
background-image: url('../../assets/img/bj.png'); /* 假设背景图在 src/assets 目录下 */ |
|||
width: 100%; |
|||
height: calc(100vh - 80px); |
|||
color: #FFFFFF; |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
padding-top: 5%; |
|||
} |
|||
.time { |
|||
position: absolute; |
|||
left: 1338px; |
|||
top: 16px; |
|||
width: 130px; |
|||
height: 40px; |
|||
opacity: 1; |
|||
|
|||
/* 自动布局 */ |
|||
display: flex; |
|||
flex-direction: row; |
|||
padding: 0px; |
|||
gap: 48px; |
|||
} |
|||
.time2 { |
|||
position: static; |
|||
left: 0px; |
|||
top: 12px; |
|||
width: 15.73%; |
|||
height: 63.64%; |
|||
opacity: 1; |
|||
|
|||
/* background: #F4F4F4; */ |
|||
|
|||
box-shadow: 0px 0px 24px 0px #637AAA; |
|||
|
|||
z-index: 0; |
|||
} |
|||
.echart-style { |
|||
width: 1000px; |
|||
height: 900px; |
|||
background: skyblue; |
|||
} |
|||
.container { |
|||
display: grid; |
|||
grid-template-columns: auto 1fr; /* 左侧自动宽度，右侧占据剩余空间 */ |
|||
align-items: center; /* 垂直居中（可选） */ |
|||
} |
|||
|
|||
.lefwenzi, .rightwenzi { |
|||
/* 你可以根据需要添加额外的样式 */ |
|||
} |
|||
</style> |
|||
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<div> |
|||
<!-- ECharts 容器 --> |
|||
<div ref="chart" style="width: 350px; height: 200px;"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from 'echarts'; |
|||
|
|||
export default { |
|||
name: 'LineChart', |
|||
data() { |
|||
return { |
|||
chartInstance: null, // ECharts 实例 |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.initChart(); |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
// 获取容器 DOM |
|||
const chartDom = this.$refs.chart; |
|||
// 初始化 ECharts 实例 |
|||
this.chartInstance = echarts.init(chartDom); |
|||
// 设置图表配置和数据 |
|||
this.chartInstance.setOption({ |
|||
title: { |
|||
text: '执法案件数量', // 图表标题 |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', // 触发类型，'axis'为坐标轴触发 |
|||
}, |
|||
xAxis: { |
|||
type: 'category', // 坐标轴类型，'category'为类目轴 |
|||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // 类目数据 |
|||
}, |
|||
yAxis: { |
|||
type: 'value', // 坐标轴类型，'value'为数值轴 |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '销量', // 系列名称，用于tooltip的显示，legend的图例筛选 |
|||
type: 'line', // 系列类型 |
|||
data: [120, 200, 150, 80, 70, 110, 130], // 系列中的数据内容数组 |
|||
}, |
|||
], |
|||
}); |
|||
}, |
|||
}, |
|||
beforeDestroy() { |
|||
// 销毁 ECharts 实例，防止内存泄漏 |
|||
if (this.chartInstance) { |
|||
this.chartInstance.dispose(); |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 样式可以根据需要自定义 */ |
|||
</style> |
|||
@ -0,0 +1,131 @@ |
|||
<template> |
|||
<div ref="chart" style="width: 350px; height: 200px;"></div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from 'echarts'; |
|||
|
|||
export default { |
|||
name: 'SalesChart', |
|||
data() { |
|||
return { |
|||
chart: null, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.initChart(); |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
// 基于准备好的dom，初始化echarts实例 |
|||
this.chart = echarts.init(this.$refs.chart); |
|||
|
|||
// 指定图表的配置项和数据 |
|||
const option = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
crossStyle: { |
|||
color: '#999' |
|||
} |
|||
} |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
dataView: { show: true, readOnly: false }, |
|||
magicType: { show: true, type: ['line', 'bar'] }, |
|||
restore: { show: true }, |
|||
saveAsImage: { show: true } |
|||
} |
|||
}, |
|||
legend: { |
|||
data: ['Evaporation', 'Temperature'] |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value', |
|||
name: 'Precipitation', |
|||
min: 0, |
|||
max: 250, |
|||
interval: 50, |
|||
axisLabel: { |
|||
formatter: '{value} ml' |
|||
} |
|||
}, |
|||
{ |
|||
type: 'value', |
|||
name: 'Temperature', |
|||
min: 0, |
|||
max: 25, |
|||
interval: 5, |
|||
axisLabel: { |
|||
formatter: '{value} °C' |
|||
} |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
name: 'Evaporation', |
|||
type: 'bar', |
|||
tooltip: { |
|||
valueFormatter: function (value) { |
|||
return value + ' ml'; |
|||
} |
|||
}, |
|||
data: [ |
|||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 |
|||
] |
|||
}, |
|||
// { |
|||
// name: 'Precipitation', |
|||
// type: 'bar', |
|||
// tooltip: { |
|||
// valueFormatter: function (value) { |
|||
// return value + ' ml'; |
|||
// } |
|||
// }, |
|||
// data: [ |
|||
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 |
|||
// ] |
|||
// }, |
|||
{ |
|||
name: 'Temperature', |
|||
type: 'line', |
|||
yAxisIndex: 1, |
|||
tooltip: { |
|||
valueFormatter: function (value) { |
|||
return value + ' °C'; |
|||
} |
|||
}, |
|||
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] |
|||
} |
|||
] |
|||
}; |
|||
|
|||
|
|||
// 使用刚指定的配置项和数据显示图表。 |
|||
this.chart.setOption(option); |
|||
}, |
|||
}, |
|||
beforeDestroy() { |
|||
if (this.chart) { |
|||
// 销毁图表实例 |
|||
this.chart.dispose(); |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 根据需要添加样式 */ |
|||
</style> |
|||
@ -0,0 +1,64 @@ |
|||
<template> |
|||
<div ref="chart" style="width: 350px; height: 400px;"></div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from 'echarts'; |
|||
|
|||
export default { |
|||
name: 'PieChart', |
|||
data() { |
|||
return { |
|||
chart: null, |
|||
options: { |
|||
title: { |
|||
text: '许可证类型分布', |
|||
left: 'center' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item' |
|||
}, |
|||
legend: { |
|||
orient: 'vertical', |
|||
left: 'left' |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '许可证数量', |
|||
type: 'pie', |
|||
radius: '50%', |
|||
data: [ |
|||
{ value: 1764, name: '公路建设项目施工许可' }, |
|||
{ value: 200, name: '公路超限运输许可' }, // 假设数据 |
|||
{ value: 120, name: '公路水运工程建设项目设计文件审批' }, // 假设数据 |
|||
{ value: 80, name: '水上水下活动许可' }, // 假设数据 |
|||
{ value: 60, name: '通航水域岸线安全使用许可' }, // 假设数据 |
|||
{ value: 41, name: '公路养护作业单位资质审批' } // 剩余数量，通过总数减去已知数量得到或直接给出 |
|||
], |
|||
emphasis: { |
|||
itemStyle: { |
|||
shadowBlur: 10, |
|||
shadowOffsetX: 0, |
|||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
} |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.chart = echarts.init(this.$refs.chart); |
|||
this.chart.setOption(this.options); |
|||
}, |
|||
beforeDestroy() { |
|||
if (this.chart) { |
|||
this.chart.dispose(); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 你可以在这里添加一些样式来调整图表的外观 */ |
|||
</style> |
|||
@ -0,0 +1,105 @@ |
|||
<template> |
|||
<div ref="chart" style="width: 350px; height: 200px;"></div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from 'echarts'; |
|||
|
|||
export default { |
|||
name: 'PieChart', |
|||
data() { |
|||
return { |
|||
chart: null, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.initChart(); |
|||
}, |
|||
methods: { |
|||
initChart() { |
|||
// 基于准备好的dom，初始化echarts实例 |
|||
this.chart = echarts.init(this.$refs.chart); |
|||
|
|||
// 指定图表的配置项和数据 |
|||
const option = { |
|||
tooltip: { |
|||
trigger: 'item' |
|||
}, |
|||
legend: { |
|||
top: '5%', |
|||
left: 'center' |
|||
}, |
|||
series: [ |
|||
// { |
|||
// name: '许可证数量', |
|||
// type: 'pie', |
|||
// radius: '50%', |
|||
// data: [ |
|||
// { value: 1764, name: '公路建设项目施工许可' }, |
|||
// { value: 200, name: '公路超限运输许可' }, // 假设数据 |
|||
// { value: 120, name: '公路水运工程建设项目设计文件审批' }, // 假设数据 |
|||
// { value: 80, name: '水上水下活动许可' }, // 假设数据 |
|||
// { value: 60, name: '通航水域岸线安全使用许可' }, // 假设数据 |
|||
// { value: 41, name: '公路养护作业单位资质审批' } // 剩余数量，通过总数减去已知数量得到或直接给出 |
|||
// ], |
|||
// emphasis: { |
|||
// itemStyle: { |
|||
// shadowBlur: 10, |
|||
// shadowOffsetX: 0, |
|||
// shadowColor: 'rgba(0, 0, 0, 0.5)' |
|||
// } |
|||
// } |
|||
// } |
|||
{ |
|||
name: '公路建设项目施工许可', |
|||
type: 'pie', |
|||
radius: ['40%', '70%'], |
|||
avoidLabelOverlap: false, |
|||
itemStyle: { |
|||
borderRadius: 10, |
|||
borderColor: '#fff', |
|||
borderWidth: 2 |
|||
}, |
|||
label: { |
|||
show: false, |
|||
position: 'center' |
|||
}, |
|||
emphasis: { |
|||
label: { |
|||
show: true, |
|||
fontSize: 40, |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
data: [ |
|||
{ value: 1764, name: '公路建设项目施工许可' }, |
|||
{ value: 200, name: '公路超限运输许可' }, // 假设数据 |
|||
{ value: 120, name: '公路水运工程建设项目设计文件审批' }, // 假设数据 |
|||
{ value: 80, name: '水上水下活动许可' }, // 假设数据 |
|||
{ value: 60, name: '通航水域岸线安全使用许可' }, // 假设数据 |
|||
{ value: 41, name: '公路养护作业单位资质审批' } // 剩余数量，通过总数减去已知数量得到或直接给出 |
|||
] |
|||
} |
|||
] |
|||
}; |
|||
|
|||
|
|||
// 使用刚指定的配置项和数据显示图表。 |
|||
this.chart.setOption(option); |
|||
}, |
|||
}, |
|||
beforeDestroy() { |
|||
if (this.chart) { |
|||
// 销毁图表实例 |
|||
this.chart.dispose(); |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 根据需要添加样式 */ |
|||
</style> |
|||
Loading…
Reference in new issue