VUE大屏的开辟过程（纯前端）
写在前面，博主是个在北京打拼的码农，工作多年做过各类项目，最近心血来潮在这儿写点东西，欢迎各人多多指教。
[*]对于文章中出现的任何错误请各人批评指出，一定实时修改。
[*]有任何想要讨论和学习的题目可接洽我：13287946835@139.com。
[*]发布文章的风格因专栏而异，均自成体系，不敷之处请各人指正。
目次
一、准备工作
二、echarts使用
1、调解echarts折线图图大小
2、vue插件体现省份舆图
终极效果：
全部代码：
3、vue开辟多重圆弧进度条、vue开辟类似圆角玉珏图
代码如下
终极效果
4、实现环形饼图
全部代码
5、开辟三角形柱状图
全部代码如下
终极效果：
三、页面整体终极效果
https://img-blog.csdnimg.cn/direct/f1acfeff7bed48a2aeee65920e26a082.png
一、准备工作
1.随便找一个脚手架下载一个vue项目，准备使用媒体查询加百分比结构实现页面的欣赏器自适应，包管在缩放页面情况下页面的正常体现。
2.忘掉第一条，因为这个新项目是由我和另一位前端共同完成，我希望我在开辟我的页面的时候对别人不造成任何影响，所以就不接纳第一条了，第一条肯定会因为使用媒体查询和百分比结构在公共区域写很多代码。偶然候独立开辟很爽。
3.继续沿用我在（从零到一大屏开辟过程记录_前端大屏开辟-CSDN博客）与（大屏大概是怎么个开辟法（前端）_前端大屏开辟-CSDN博客）里的写法。
4.如果别人要影响我们怎么办
我们大概想到（vue怎样通过当前页面设置样式改变body和#app的值）
那么我们可以在初始页面app.vue里加上对于路由路径的判断，如果不是我们的页面才引用相关样式文件，制止‘自相残杀’；
UI:
https://img-blog.csdnimg.cn/direct/a49a77bb2c764915afca2b0147b7bda3.png
二、echarts使用
使用echarts图经常须要去官网看各种属性的用法，随用随查（Documentation - Apache ECharts）
当我们在使用舆图，就直接去看范例为map相关的属性相关就行了
我们在使用时经常发现默认的画布很小，所以须要调解echarts折线图图大小
1、调解echarts折线图图大小
grid: { top: "85%", left: "100%", right: "100%", bottom: "100%" }, //top设置太高横坐标文字展示会出问题 核心点是修改option里的grid的值，调解距离边框的比例
https://img-blog.csdnimg.cn/direct/d6b21a865f4a4d6aabce4ae93ebfd5db.png
修改前：
https://img-blog.csdnimg.cn/direct/cf9d2344ab49496cbff05826236cd360.png
修改后：
https://img-blog.csdnimg.cn/direct/4cddf0fa9ca3427ea79494d942b5a864.png
2、vue插件体现省份舆图
使用echarts设置省份舆图
原型：
https://img-blog.csdnimg.cn/direct/74b75650a05d43e087817d8d85ff77ad.png
echarts 舆图西藏区域JSON数据
须要使用（DataV.GeoAtlas地理小工具系列）获取具体省份的数据 https://img-blog.csdnimg.cn/direct/885756f74d7940f9bba99f0c332a568c.png
只渲染单个省份，须要隐蔽默认的标注等（Echarts 舆图隐蔽右下角 “南海诸岛” 的方法_前端eacharts中国舆图不体现海南诸岛-CSDN博客）
设置舆图的大小和位置、调解echarts舆图大小，可以通过下面的属性设置
option:{
layoutCenter: ["58%", "40%"],
// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
layoutSize: "430%", //缩放比例
geo:{
zoom: 0.7, //视角缩放比例
aspectScale: 1,
}
series:[{zoom:1}]
}
https://img-blog.csdnimg.cn/direct/4e9288cd79fe4a8b927a6de8edaaecc5.png
https://img-blog.csdnimg.cn/direct/d1ed76baaaf14fd896480b7a5d6770d5.png echart设置舆图颜色https://img-blog.csdnimg.cn/direct/503b7826132b4b94b749d21082bdc1ad.png
js西藏省全部市构成的数组
{ name: "拉萨市", value: "250" ,checked:true},
{ name: "日喀则市", value: "250" },
{ name: "山南市", value: "250" },
{ name: "林芝市", value: "250" },
{ name: "阿里地域", value: "250" },
{ name: "那曲市", value: "250" },
{ name: "昌都市", value: "250" },
终极效果：
https://img-blog.csdnimg.cn/direct/07591c90bbd94a599f42f13e175dfdec.png
全部代码：
我没放resetTheme.js文件，这只是个修改主题的，这个页面没用到，各位可以解释掉相关代码
json文件
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"adcode":540100,"name":"拉萨市","center":,"centroid":,"childrenNum":8,"level":"city","parent":{"adcode":540000},"subFeatureIndex":0,"acroutes":},"geometry":{"type":"MultiPolygon","coordinates":[[[,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,]]]}},{"type":"Feature","properties":{"adcode":540200,"name":"日喀则市","center":,"centroid":,"childrenNum":18,"level":"city","parent":{"adcode":540000},"subFeatureIndex":1,"acroutes":},"geometry":{"type":"MultiPolygon","coordinates":[[[,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,]],[[,,,,,,,,,,,,,,,,,,,]]]}},{"type":"Feature","properties":{"adcode":540300,"name":"昌都市","center":,"centroid":,"childrenNum":11,"level":"city","parent":{"adcode":540000},"subFeatureIndex":2,"acroutes":},"geometry":{"type":"MultiPolygon","coordinates":[[[,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,]]]}},{"type":"Feature","properties":{"adcode":540400,"name":"林芝市","center":,"centroid":,"childrenNum":7,"level":"city","parent":{"adcode":540000},"subFeatureIndex":3,"acroutes":},"geometry":{"type":"MultiPolygon","coordinates":[[[,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,]]]}},{"type":"Feature","properties":{"adcode":540500,"name":"山南市","center":,"centroid":,"childrenNum":12,"level":"city","parent":{"adcode":540000},"subFeatureIndex":4,"acroutes":},"geometry":{"type":"MultiPolygon","coordinates":[[[,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,]]]}},{"type":"Feature","properties":{"adcode":540600,"name":"那曲市","center":,"centroid":,"childrenNum":11,"level":"city","parent":{"adcode":540000},"subFeatureIndex":5,"acroutes":},"geometry":{"type":"MultiPolygon","coordinates":[[[,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,]],[[,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,]]]}},{"type":"Feature","properties":{"adcode":542500,"name":"阿里地区","center":,"centroid":,"childrenNum":7,"level":"city","parent":{"adcode":540000},"subFeatureIndex":6,"acroutes":},"geometry":{"type":"MultiPolygon","coordinates":[[[,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,]]]}}]} vue文件：
<template>
<div class="child3">
<div class="top">
<div class="item">
<div class="main">
<div class="text1">有效回流数</div>
<div class="text2">环比+16.8%</div>
</div>
<div class="numPart">
<span>4</span><span>3</span><span>1</span><span>7</span><span>2</span>
</div>
</div>
<div class="item">
<div class="main">
<div class="text1 color2">系统调用次数</div>
<div class="text2">环比+16.0%</div>
</div>
<div class="numPart color2">
<span>4</span><span>4</span><span>8</span><span>2</span><span>4</span>
</div>
</div>
<div class="item">
<div class="main">
<div class="text1 color3">系统用户数</div>
<div class="text2">环比+26.8%</div>
</div>
<div class="numPart color3">
<span>5</span><span>4</span><span>0</span><span>2</span><span>9</span>
</div>
</div>
</div>
<div class="center">
<div style="width: 950px; height: 500px">
<div id="myEchart3" style="width: 950px; height: 100%"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import resetTheme from "./resetTheme.js";
import geoJson from "./xizang.json";
echarts.registerMap("china", geoJson);
export default {
props: {},
data() {
return {
chart1DataTableStatus: false,
chart1Data: "",
tableData1: [],
tableData2: [],
chart2Data: "",
chart2DataTableStatus: false,
};
},
created() {
this.reloadPage();
},
mounted() {
echarts.registerTheme("guoshou", resetTheme);
},
methods: {
enableChart1() {
var myChart = echarts.init(document.getElementById("myEchart3"));
let option = {
center: , //中心点，一般设置省会坐标
layoutCenter: ["58%", "40%"],
// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
layoutSize: "430%", //缩放比例
tooltip: {
// params.seriesName+'<br />'+
formatter: function (params, ticket, callback) {
return params.name + "：" + params.value;
}, //数据格式化
},
legend: {
orient: "vertical",
left: "left",
show: false,
},
visualMap: {
min: 0,
max: 250, //总量
left: "left",
top: "bottom",
text: ["高", "低"], //取值范围的文字
inRange: {
color: ["#70E3FE", "#0081D6"], //取值范围的颜色
},
show: false, //图注
},
geo: {
map: "china",
roam: false, //不开启缩放和平移
zoom: 0.7, //视角缩放比例
aspectScale: 1,
label: {
normal: {
show: false, //省份内市文字
fontSize: "10",
color: "rgba(0,0,0,0.7)",
},
},
itemStyle: {
normal: {
areaColor: "#0081D6", //常态地图颜色
borderColor: "#A8DDFF",
},
emphasis: {
areaColor: "#2389FF", //鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
// 这里是重点！！！
regions: [
{
name: "南海诸岛",
itemStyle: {
// 隐藏地图
normal: {
opacity: 0, // 为 0 时不绘制该图形
},
},
label: {
show: false, // 隐藏文字
},
},
],
},
series: [
{
// grid: { top: "85%", left: "100%", right: "100%", bottom: "100%" }, //top设置太高横坐标文字展示会出问题
// center: , //中心点，一般设置省会坐标
//layoutCenter: ["60%", "45%"],
// // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
// layoutSize: "350%", //缩放比例
name: "地域舆情",
type: "map",
zoom: 1,
mapType: "china",
map: "西藏",
geoIndex: 0,
label: {
normal: {
show: true,
},
emphasis: {
show: true,
},
},
data: [
{ name: "拉萨市", value: "250" },
{ name: "日喀则市", value: "250" },
{ name: "山南市", value: "0" },
{ name: "林芝市", value: "250" },
{ name: "阿里地区", value: "250" },
{ name: "那曲市", value: "250" },
{ name: "昌都市", value: "250" },
],
},
],
};
myChart.setOption(option);
myChart.resize();
},
setAllChart() {
this.$nextTick(function () {
this.enableChart1();
});
},
reloadPage() {
try {
this.setAllChart();
} catch (error) {
} finally {
}
},
},
};
</script>
<style lang="scss" scoped>
.child3 {
padding-top: 110px;
width: 100%;
height: 500px;
// display: flex;
// justify-content: space-between;
// background: url(../largeScreen1/centerBg.png) no-repeat bottom center;
// background-size: 100% 40%;
}
.top {
width: 100%;
height: 150px;
margin-top: 20px;
display: flex;
justify-content: space-around;
.item {
width: 25%;
height: 100%;
.main {
width: 100%;
height: 30%;
display: flex;
justify-content: space-between;
align-items: center;
.text1 {
font-family: SourceHanSansSC, SourceHanSansSC;
font-weight: 400;
font-size: 18px;
color: #4eaffe;
// line-height: 50px;
font-style: normal;
text-transform: none;
}
.text2 {
font-family: SourceHanSansSC, SourceHanSansSC;
font-weight: 400;
font-size: 14px;
color: #ffffff;
font-style: normal;
text-transform: none;
}
}
.numPart {
height: 70%;
width: 100%;
span {
display: inline-block;
padding: 5px;
background: url(../images/border1.png) no-repeat;
background-size: 100% 100%;
font-family: Impact;
font-size: 48px;
color: #4eaffe;
line-height: 50px;
text-align: center;
font-style: normal;
text-transform: none;
margin: 4px;
}
}
}
}
.color2 {
color: #7bfbff !important;
span {
background: url(../images/border2.png) no-repeat !important;
background-size: 100% 100% !important;
color: #7bfbff !important;
}
}
.color3 {
color: #fbe34d !important;
span {
background: url(../images/border3.png) no-repeat !important;
background-size: 100% 100% !important;
color: #fbe34d !important;
}
}
.center {
width: 100%;
height: 350px;
.title {
height: 30px;
line-height: 30px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 18px;
color: #ffffff;
width: 100%;
text-align: center;
font-style: normal;
text-transform: none;
background: url(../largeScreen1/center.png) no-repeat center center;
background-size: 100% 30%;
}
}
.right {
width: 18%;
height: 395px;
background: url(../largeScreen1/right.png);
background-size: 100% 100%;
p {
padding: 10px;
width: 100%;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #ffffff;
line-height: 24px;
text-align: left;
font-style: normal;
text-transform: none;
span {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
}
}
}
.part1 {
width: 100%;
height: 23%;
margin-bottom: 8px;
background: url(../largeScreen1/part1.png);
background-size: 100% 100%;
p:first-child {
height: 30%;
line-height: 50px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 18px;
color: #ffffff;
width: 100%;
text-align: center;
font-style: normal;
text-transform: none;
}
p:last-of-type {
height: 70%;
line-height: 100px;
font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
font-weight: bold;
font-size: 36px;
color: #28d4ff;
text-align: center;
font-style: normal;
text-transform: none;
}
}
</style>
3、vue开辟多重圆弧进度条、vue开辟类似圆角玉珏图
场馆运行--资源状态分析 - category-work,grid直角坐标,legend,series-pie饼图,tooltip提示框 - makeapie echarts社区图表可视化案例
https://img-blog.csdnimg.cn/direct/6deea23e7c434813968d9b47ffca7a1e.png
查到antV有个类似的（G2）但不是进度条情势
https://img-blog.csdnimg.cn/direct/4e98060777074e06aee2bbb26a3a9f7e.png
官方示例就那几种，很多实际开辟的图在上面根本找不到，最后还得看网友老哥根据属性啥的爆改，完全变了个样，像Chart.js（Chart.js | 开源的 HTML5 图表工具）这种库里根本找不到，本身开辟肯定时间成本很高
代码如下
<template>
<div class="child2">
<div style="width: 410px; height: 300px" id="chart5"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
littleTabIndex: 0,
};
},
mounted() {
this.setCharts();
},
methods: {
setCharts() {
var myChart = echarts.init(document.getElementById("chart5"));
let data = [
{
name: "使用中资源量",
value: 754,
},
{
name: "维修中资源量",
value: 611,
},
{
name: "保养中资源量",
value: 400,
},
{
name: "已损坏资源量",
value: 200,
},
],
arrName = getArrayValue(data, "name"),
arrValue = getArrayValue(data, "value"),
sumValue = eval(arrValue.join("+")),
objData = array2obj(data, "name"),
optionData = getData(data);
function getArrayValue(array, key) {
var key = key || "value";
var res = [];
if (array) {
array.forEach(function (t) {
res.push(t);
});
}
return res;
}
function array2obj(array, key) {
var resObj = {};
for (var i = 0; i < array.length; i++) {
resObj] = array;
}
return resObj;
}
function getData(data) {
var res = {
series: [],
yAxis: [],
};
for (let i = 0; i < data.length; i++) {
// console.log();
res.series.push({
name: "",
type: "pie",
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: ,
center: ["30%", "55%"],
label: {
show: false,
},
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false,
},
borderWidth: 5,
},
data: [
{
value: data.value,
name: data.name,
},
{
value: sumValue - data.value,
name: "",
itemStyle: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
},
tooltip: {
show: false,
},
hoverAnimation: false,
},
],
});
res.series.push({
name: "",
type: "pie",
silent: true,
z: 1,
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: ,
center: ["30%", "55%"],
label: {
show: false,
},
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false,
},
borderWidth: 5,
},
data: [
{
value: 7.5,
itemStyle: {
color: "rgb(3, 31, 62)",
borderWidth: 0,
},
tooltip: {
show: false,
},
hoverAnimation: false,
},
{
value: 2.5,
name: "",
itemStyle: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
},
tooltip: {
show: false,
},
hoverAnimation: false,
},
],
});
res.yAxis.push(((data.value / sumValue) * 100).toFixed(2) + "%");
}
return res;
}
let option = {
// backgroundColor: "#000",
legend: {
show: true,
icon: "circle",
top: "center",
left: "70%",
data: arrName,
width: 50,
padding: ,
itemGap: 25,
formatter: function (name) {
return (
"{title|" +
name +
"}\n{value|" +
objData.value +
"}{title|项}"
);
},
textStyle: {
rich: {
title: {
fontSize: 16,
lineHeight: 15,
color: "rgb(0, 178, 246)",
},
value: {
fontSize: 18,
lineHeight: 20,
color: "#fff",
},
},
},
},
tooltip: {
show: true,
trigger: "item",
formatter: "{a}<br>{b}:{c}({d}%)",
},
color: [
"rgb(24, 183, 142)",
"rgb(1, 179, 238)",
"rgb(22, 75, 205)",
"rgb(52, 52, 176)",
],
grid: {
top: "16%",
bottom: "53%",
left: "30%",
containLabel: false,
},
yAxis: [
{
type: "category",
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
inside: true,
textStyle: {
color: "#fff",
fontSize: 16,
},
show: true,
},
data: optionData.yAxis,
},
],
xAxis: [
{
show: false,
},
],
series: optionData.series,
};
myChart.setOption(option);
myChart.resize();
},
},
};
</script>
<style lang="less" scoped>
.textBox {
line-height: 20px;
padding-bottom: 8px;
p {
font-family: SourceHanSansSC, SourceHanSansSC;
font-weight: 500;
font-style: normal;
text-transform: none;
}
.p1 {
font-size: 24px;
color: #ffffff;
}
.p2 {
font-family: Impact;
font-size: 50px;
color: #4eaffe;
background: url(../images/textBg.png) no-repeat center bottom;
padding-bottom: 25px;
}
.yellow {
color: #fbe34d;
}
.p3 {
line-height: 0;
font-family: SourceHanSansSC, SourceHanSansSC;
font-weight: 400;
font-size: 18px;
color: #aaaaaa;
span {
font-family: Impact;
font-size: 24px;
color: #ffffff;
}
}
}
</style>
终极效果
https://img-blog.csdnimg.cn/direct/64d68324ac4a4c8da13627539c415561.png
4、实现环形饼图
https://img-blog.csdnimg.cn/direct/d0483ea4a39a412a989843cff4ac473d.png 相关文章（圆环图自定义legend、设置默认选中 - category-work,legend,series-pie饼图,title标题 - makeapie echarts社区图表可视化案例）
怎样正确使用网站的代码呢，直接在网站上调试好样式等
把代码拷贝在下方如许的空壳子里就能运行了
<template>
<div class="child2">
<div style="width: 410px; height: 260px" id="chart6"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
};
},
mounted() {
this.setCharts();
},
methods: {
setCharts() {
var myChart = echarts.init(document.getElementById("chart6"));
//全部代码拷贝在这然后稍加改动
myChart.setOption(option);
myChart.resize();
},
},
};
</script>
<style lang="less" scoped>
</style>
全部代码
<template>
<div class="child2">
<div style="width: 410px; height: 260px" id="chart6"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
};
},
mounted() {
this.setCharts();
},
methods: {
setCharts() {
var myChart = echarts.init(document.getElementById("chart6"));
var color = [
'#26a4f8',
'#17c78b',
'#f97b00',
'#ffe404',
];
var title = '';
var legend = [
'App',
'网页',
'一体机',
'对外接口',
];
var seriesData = [
{ "name": "App", "value": 56.8 },
{ "name": "网页", "value": 25.8 },
{ "name": "一体机", "value": 16.8 },
{ "name": "对外接口", "value": 13.8 },
]
var option = {
backgroundColor:'#050e31',
color: color,
title: {
show:false,
top: 20,
text: title,
textStyle: {
fontSize: 20,
color: '#DDEEFF',
},
},
grid: {
top: '100%',
left: '100%',
right: '100%',
bottom: 5,
containLabel: true,
},
legend: {
orient: 'vertical',
top: 'center',
right: 0,
textStyle: {
align: 'left',
verticalAlign: 'middle',
rich: {
name: {
color: 'rgba(255,255,255,0.5)',
fontSize: 16,
},
value: {
color: 'rgba(255,255,255,0.5)',
fontSize: 16,
},
rate: {
color: 'rgba(255,255,255,0.9)',
fontSize: 16,
},
},
},
data: legend,
formatter: (name) => {
if (seriesData.length) {
const item = seriesData.filter((item) => item.name === name);
return `{name|${name}：} {rate| ${item.value}%}`;
}
},
},
series: [{
name: '需求类型占比',
type: 'pie',
center: ['25%', '50%'],
radius: ['45%', '65%'],
itemStyle: {
normal: {
borderWidth: 6,
borderColor: "#182037",
}
},
label: {
normal: {
show: false,
position: 'center',
formatter: '{value|{c}%}\n数据展示',
rich: {
value: {
padding: 5,
align: 'center',
verticalAlign: 'middle',
fontSize: 32,
},
label: {
align: 'center',
verticalAlign: 'middle',
fontSize: 16,
},
},
},
emphasis: {
show: true,
textStyle: {
fontSize: '12',
},
},
},
labelLine: {
show: false,
length: 0,
length2: 0,
},
data: seriesData,
}],
};
// myChart.setOption(option);
getDefaultSelected(myChart)
function getDefaultSelected(myChart) {
let index = 0;
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: 0,
});
myChart.on('mouseover', (e) => {
if (e.dataIndex !== index) {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: index,
});
}
});
myChart.on('mouseout', (e) => {
index = e.dataIndex;
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: e.dataIndex,
});
});
}
myChart.setOption(option);
myChart.resize();
},
},
};
</script>
<style lang="less" scoped>
</style>
实现环形图的默认选中效果
相关文章（echrts环形图默认选中，且不会消失_echarts 双圈饼状图,默认选中一个-CSDN博客）
https://img-blog.csdnimg.cn/direct/a6a3bfecb63143939181d637b89b577f.png
5、开辟三角形柱状图
相关文章（三角形动态数据 - category-work,grid直角坐标,series-pictorialBar,tooltip提示框 - makeapie echarts社区图表可视化案例）
原型：
https://img-blog.csdnimg.cn/direct/6c169c7b0ea54047a80d75139e5265a0.png
全部代码如下
<template>
<div class="child2">
<div style="width: 410px; height: 260px" id="chart7"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {};
},
mounted() {
this.setCharts();
},
methods: {
setCharts() {
var myChart = echarts.init(document.getElementById("chart7"));
// 颜色
var lightBlue = {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(0, 192, 255, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(0, 192, 255, 0.1)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
};
var darkBlue = {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(41, 121, 255, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(41, 121, 255, 0.1)", // 100% 处的颜色
},
],
globalCoord: false, // 缺省为 false
};
function randomData() {
let value = Math.random() * 45;
return {
value: Math.round(value),
};
}
// 时间设置
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function timeSet() {
var newTime = new Date();
var m = newTime.getMinutes();
var s = newTime.getSeconds();
m = checkTime(m);
s = checkTime(s);
return .join(":");
}
var data = [];
var timeData = ["1月", "2月", "3月", "4月", "5月", "6月"];
for (var i = 0; i < 6; i++) {
// timeData.unshift(timeSet());
data.unshift(randomData());
}
// 指定图表的配置项和数据
var option = {
tooltip: {
show: false,
},
grid: {
top: "90%",
left: "100%",
right: "100%",
bottom: "95%",
// containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
// boundaryGap: 100,
min: -1,
max: 6,
axisLine: {
lineStyle: {
color: "#4bbbf8",
shadowColor: "rgba(75, 211, 255, 0.5)",
shadowBlur: 5,
},
},
axisTick: {
// inside: true, // 刻度标签是否朝内，默认朝外
interval: (index) => {
if (index === -1 || index === 6) {
return false;
} else {
return true;
}
},
},
axisLabel: {
color: "#4bbbf8",
fontSize: 12,
rotate: 25,
},
splitLine: {
show: false,
},
data: timeData,
},
yAxis: [
{
show: false,
max: 50,
min: 0,
axisLine: {
lineStyle: {
color: "#4bbbf8",
shadowColor: "rgba(75, 211, 255, 0.5)",
shadowBlur: 5,
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
splitLine: {
lineStyle: {
color: "rgba(75, 211, 255, 0.2)",
type: "dashed",
},
},
},
],
series: [
{
name: "数量",
type: "pictorialBar",
barCategoryGap: "-60%",
symbol: 'path://d="M150 0 L75 200 L225 200 Z"',
label: {
show: true,
position: "top",
color: "#fff",
fontSize: 14,
},
itemStyle: {
color: function (params) {
return params.dataIndex % 2 ? darkBlue : lightBlue;
},
},
data: data,
},
],
// backgroundColor: "#190c12",
};
// myChart.setOption(option);
var key = 0;
setInterval(function () {
// timeData.shift();
timeData =
key === 1
? ["1月", "2月", "3月", "4月", "5月", "6月"]
: ["7月", "8月", "9月", "10月", "11月", "12月"];
data.shift();
data.push(randomData());
// 颜色控制
key = key === 1 ? 0 : 1;
myChart.setOption({
xAxis: {
data: timeData,
},
series: [
{
itemStyle: {
normal: {
color: function (params) {
return (params.dataIndex + key) % 2 ? darkBlue : lightBlue;
},
},
},
data: data,
},
],
});
}, 5000);
myChart.setOption(option);
myChart.resize();
},
},
};
</script>
<style lang="less" scoped></style>
终极效果：
https://img-blog.csdnimg.cn/direct/e1f5d44f5c7a4375a1c50b85c634d3e2.png
关于eacharts的x坐标轴有的笔墨不体现题目的办理
https://img-blog.csdnimg.cn/direct/1d5f26afd790410aa5daaf2dd3d91ae7.png
三、页面整体终极效果
https://img-blog.csdnimg.cn/direct/683bc6da8ba1436289081148117d938f.jpeg
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]