Echarts图--关于写在vue页面上的

1柱图：

柱图添加分割线，添加自定义tooltip样式

<template><divclass="chart"v-loading="loading"element-loading-background="rgba(24, 41, 88, 0)"><div id="Development" class="chartView" v-if="!noData"></div><div class="noData" v-if="noData"><div class="emptyChart">暂无数据</div></div></div>
</template><script>
import { 接口} from "@/api/接口";
export default {data() {return {chart: null,loading: false,noData: false,params: {linkCode: null}};},// created() {//   this.getLoad();// },computed: {industryCode() {return this.$store.getters.list;}// this.getLoad();},watch: {industryCode: function(newVal) {if (this.params.linkCode !== newVal.code) {this.params.linkCode = newVal.code;this.getLoad();}}},mounted() {let _this = this;this.chart = this.$echarts.init(document.getElementById("Development"));window.addEventListener("resize", function() {_this.chartResize();});let code = this.$route.query.code;this.params.linkCode = code;// this.params.area = "320213";// this.params.areaType = "1";if (code) {this.getLoad();}},methods: {async getLoad() {this.loading = true;let { data } = await 接口(this.params);this.loading = false;this.lineview(data);},lineview(data) {let _this = this;let option = {tooltip: {trigger: "axis",className: "tooltipClass",borderColor: "#F2F6FF",position: function(point) {return [point[0] - 70, "10%"]; //返回x、y（横向、纵向）两个点的位置},formatter: function(p) {// console.log(p);if (p) {let dataCon = p;let txtCon = `<div class='blocks'><div class= "blocksContent"><span>年份：</span><div class='blocksvalue'"> ${dataCon[2].axisValue ? dataCon[2].axisValue : ""}</div></br><span>专利数量：</span><div class='blocksvalue' style="color:rgba(255, 182, 74, 1);"> ${dataCon[0].value ? dataCon[0].value : 0}（项）</div></br><span>增速：</span><div class='blocksvalue' "> ${dataCon[1].value ? dataCon[1].value : 0}（%）</div></div></div>`;return txtCon;}}},textStyle: {fontSize: _this.$width > 3000 ? 28 : 14,color: "#fff"},grid: {left: 20,right: 0,top: 40,bottom: 10,containLabel: true},legend: {show: false,selectedMode: false,top: 30,itemWidth: _this.$width > 3000 ? 50 : 25,itemHeight: _this.$width > 3000 ? 28 : 14,textStyle: {color: "#fff",// width: 100,overflow: "break",lineHeight: 16},pageTextStyle: {// color: "#fff"}// pageIconColor: "#fff"},xAxis: {type: "category",data: data.x,axisLine: {show: true,lineStyle: { color: "#212948" }},splitLine: { show: false },axisLabel: {color: "#5f6e8d",formatter: "{value}年",textStyle: {fontSize: _this.$width > 3000 ? 28 : 12}},axisTick: { show: false }},yAxis: [{type: "value",// name: "单位：(户)",nameTextStyle: { align: "right", color: "rgba(124, 197, 247, 1)" },axisTick: {show: false},axisLine: {show: false,lineStyle: { color: "#fff" }},splitLine: {show: true,lineStyle: {color: "rgba(41, 92, 136, 0.5)",type: "dashed"}},axisLabel: {color: "#5f6e8d",textStyle: {fontSize: _this.$width > 3000 ? 28 : 12}}},{name: "增速",show: false,nameTextStyle: { align: "right", color: "#5c889f" },type: "value",axisLabel: {color: "#5f6e8d",formatter: "{value} %",textStyle: {fontSize: _this.$width > 3000 ? 28 : 14}},axisTick: {show: false},axisLine: {show: false,lineStyle: { color: "rgba(41, 92, 136, 1)" }},splitLine: {show: false}}],series: [{name: "企业数量",data: data.sl,barWidth: _this.$width > 3000 ? 20 : 14,type: "bar",itemStyle: {normal: {color: "#ffe654",// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [//   {//     offset: 0,//     color: "rgba(122, 160, 239, 1)"//   },//   {//     offset: 1,//     color: "rgba(27, 55, 160, 1)"//   }// ]),barBorderRadius: 0}},label: {show: true,position: "top",color: "#ffe654"}},{name: "",type: "line",yAxisIndex: 1,zlevel: 3,smooth: true,symbol: false,symbolSize: 0,lineStyle: {normal: {width: 2}},itemStyle: {normal: {color: "#ffe654",borderWidth: 0}},data: data.zs,label: {normal: {show: false}}},{// 值分隔-给每一列添加数据分割type: "pictorialBar",itemStyle: {normal: {color: "#011338"}},symbolRepeat: "fixed",symbolMargin: 3,symbol: "rect",symbolClip: true,symbolSize: [30, 3],symbolPosition: "start",symbolOffset: [0, -1],// symbolBoundingData: this.total,data: data.sl,width: _this.$width > 3000 ? 20 : 14,z: 0,zlevel: 1}]};this.chart.setOption(option, true);},/*** 图表 自适应*/chartResize() {if (this.chart) {this.chart.resize();}}}
};
</script><style lang="less" scoped>
.chart {width: 100%;height: 100%;z-index: 2;position: relative;
}
.chartView {width: 100%;height: 100%;
}
::v-deep .tooltipClass {padding-right: 20px !important;display: none;// width: 200px;height: 97px;background-size: 100% 100%;border: 0px solid rgba(22, 40, 77, 0) !important;// background: linear-gradient(-9deg, rgba(22, 40, 77, 0.65) 0%, #050d1f 98%);background: url("../../img/echartsToolTip.png");background-color: inherit !important;background-size: 100% 100%;.blocks {.blocksContent {margin-left: 13px;margin-top: 7px;height: 33px;font-size: 10px;font-family: Source Han Sans CN;font-weight: 400;color: rgba(255, 255, 255, 1);line-height: 18px;.blocksvalue {display: inline-block;}}}
}
.emptyChart {position: absolute;top: 50%;right: 40%;color: #909399;font-size: 18px;
}
</style>

2饼图

饼图右侧增加列表

<template><divclass="chart"v-loading="loading"element-loading-background="rgba(24, 41, 88, 0)"><div id="AttractCapital" class="chartView"></div><!-- <div class="pic"><img src="../../img/pic.png" alt="" /></div> --><div class="box" v-show="hyDataE[0]"><div class="text"><p>线下面的文字</p>//线上面的值<span>{{pieDataData[1] ? (100 - pieDataData[1].zb).toFixed(2) : ""}}%</span><div class="line"><div class="line2"></div></div></div><div class="list"><el-scrollbar class="page-component__scroll"><p v-for="(item, index) in hyDataE" :key="index">{{ item.NAME }}<span>{{ item.ZB }}%</span></p><p v-if="100 - sum">其它：<span>{{ (100 - sum).toFixed(2) }}%</span></p></el-scrollbar></div></div></div>
</template><script>
import { 接口} from "@/api/接口";
// import { ChinaMerchants } from "../chanye";
let widthN = document.body.clientWidth;export default {data() {return {chart: null,loading: false,chartObj: [],dataMain: "",idNow: "",hyData: [],hyDataE: [],pieDataData: [],sum: null,params: {linkCode: ""}};},props: ["area", "re"],computed: {industryCode() {return this.$store.getters.linkCode;},areaMy() {return this.$store.getters.area;}},watch: {industryCode: function(newVal) {if (!newVal) {return;}if (this.params.linkCode !== newVal) {this.params.linkCode = newVal;this.getLoad();}},areaMy: {handler: function(item) {if (!item.type) return;if (item.code == this.params.area) {return;}this.params.linkCode = this.$route.query.code;if (item.type == 2) {this.params.area = item.name;} else {this.params.area = item.code;}this.params.areaType = item.type;this.getLoad();},immediate: true}},mounted() {// this.chart = this.$echarts.init(document.getElementById("AttractCapital"));let _this = this;this.chart = this.$echarts.init(document.getElementById("AttractCapital"));window.addEventListener("resize", function() {_this.chartResize();});// this.getLoad();},methods: {async getLoad() {this.hyDataE = [];this.sum = 0;this.loading = true;let res = {linkCode: this.params.linkCode};let { data } = await 接口(res);this.loading = false;this.dataMain = data;let datas = [];data.pieData.forEach(ele => {datas.push({name: ele.NAME,value: ele.VALUE,zb: ele.ZB});});this.pieDataData = datas;this.hyData = data.hyData;this.hyData.forEach((ele, index) => {if (index < 5) {this.hyDataE.push(ele);}});if (!this.hyData[0]) {this.chart.setOption({title: {text: "暂无数据",x: "center",y: "center",textStyle: {color: "#909399",fontSize: 18,fontWeight: "normal"}},backgroundColor: "transparent"//rgba(42, 125, 235, 0.1)},true);return false;}let QT = [];this.hyDataE.forEach(item => {QT.push(item.ZB);});QT.forEach(ele => {this.sum += ele;});this.sum = this.sum.toFixed(2);// console.log(this.sum);datas = datas.reverse();this.graphView(datas);},graphView(val) {let color = ["rgba(1, 255, 255, 1)","rgba(17, 108, 253, 1)","rgba(178, 184, 186, 1)","rgba(97, 89, 255, 1)","rgba(71, 230, 254, 1)","rgba(150, 97, 188, 1)","rgba(0, 134, 133, 1)","rgba(240, 139, 180, 1)"];let option = {color: color,tooltip: {trigger: "item",textStyle: {fontSize: widthN > 6000 ? 24 : widthN > 3800 ? 18 : 12}},legend: {show: false,top: "5%",left: "center"},series: [{type: "pie",center: ["24.5%", "52%"],radius: ["42%", "70%"],// avoidLabelOverlap: false,label: {show: false,position: "center",formatter: params => {return `{name|${params.name}}`;},rich: {value: {padding: 5,align: "center",verticalAlign: "middle",fontSize: 18,fontWeight: "bold",color: "#fff"},name: {padding: 5,align: "center",verticalAlign: "middle",fontSize: 12,fontWeight: 500,color: "#fff"},label: {padding: 5,align: "center",verticalAlign: "middle",fontSize: 12,color: "rgba(255, 255, 255, 0.7)"}}},// itemStyle: {//   // 间隔//   borderWidth: 6,//   borderColor: "#0c1a3a"// },emphasis: {show: true,scaleSize: 9,label: {show: true}},itemStyle: {normal: {color: function(params) {return color[params.dataIndex];}}},labelLine: {show: false},data: val}]};// console.log(this.chart);this.chart.setOption(option, true);this.chart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: 0});this.chart.on("mouseover", params => {// 移入后取消默认第一项高亮变大效果if (params.seriesType === "pie") {// 如果鼠标移入的不是第一项，就取消第一项的高亮效果if (params.dataIndex !== 0) {this.chart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: 0});this.chart.dispatchAction({type: "downplay",seriesIndex: 1,dataIndex: 0});}// 开启内、外圈选中效果this.chart.dispatchAction({type: "highlight",seriesIndex: 1,dataIndex: params.dataIndex});this.chart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: params.dataIndex});}});this.chart.on("mouseout", params => {// 鼠标离开每一项后关闭内、外圈移入效果this.chart.dispatchAction({type: "downplay",seriesIndex: 1,dataIndex: params.dataIndex});this.chart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: params.dataIndex});// 鼠标离开每一项后继续默认第一项选中高亮效果this.chart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: 0});this.chart.dispatchAction({type: "highlight",seriesIndex: 1,dataIndex: 0});});},chartResize() {if (this.chart) {this.chart.resize();}}}
};
</script><style lang="less" scoped>
.chart {margin: 20px;margin-top: 40px;width: 90%;height: 81%;z-index: 2;display: flex;// padding-right: 20px;// padding-top: 20px;position: relative;
}
.chartView {width: 100%;height: 100%;flex: 1;// padding: 20px;padding-bottom: 0;position: relative;
}
.pic {width: 44%;height: 80%;position: absolute;left: 11px;top: 27px;z-index: -1;// background: black;img {width: 100%;height: 100%;display: block;margin: 0 auto;}
}
.box {// background: red;// flex: 0.5;// text-align: left;// position: relative;top: 20px;right: 20px;bottom: 20px;position: absolute;.list {width: 140px;height: 100%;background: #042146;border-radius: 3px;border: 1px solid rgba(1, 247, 254, 0.24);border-radius: 3px;padding: 18px;padding-right: 12px;color: rgba(233, 242, 255, 1);line-height: 25px;font-size: 12px;p {color: rgba(1, 247, 254, 1);span {margin-left: 29px;color: rgba(255, 255, 255, 1);}// padding: 0 10px 10px 10px;}}span {color: #fff;// margin-left: 20px;}.text {position: absolute;top: -9px;color: #e9f2ff;// font-size: 16px;left: -76px;p {position: absolute;display: block;bottom: -23px;right: 10px;font-size: 12px;font-family: Microsoft YaHei;font-weight: 400;color: #02ffff;line-height: 22px;}span {display: inline-block;margin-left: 25px;}.line {margin-top: 5px;width: 76px;height: 1px;background: #01f7fe;position: relative;}.line2 {height: 1px;background: #01f7fe;width: 31px;transform-origin: left center;transform: rotate(-45deg) translateX(-31px);}}
}
</style>

饼图中间加数据

<template><divclass="chart"v-loading="loading"element-loading-background="rgba(24, 41, 88, 0)"><div id="industry" class="chartView" v-if="!noData"></div><div class="noData" v-if="noData"><div class="emptyChart">暂无数据</div></div><!-- <div class="listA"><el-scrollbar class="page-component__scroll"><div class="listI"v-for="item of noData":key="item.name"><div class="icon"></div><span>{{ item.name }}</span><div class="num">{{ item.per }}%</div></div></el-scrollbar></div> --></div>
</template><script>
import { 接口} from "@/api/接口";
export default {data() {return {chart: null,noData: false,loading: false,params: {linkCode: null}};},computed: {industryCode() {return this.$store.getters.list;}},watch: {industryCode: function(newVal) {// this.getLoad();if (this.params.linkCode !== newVal.code) {this.params.linkCode = newVal.code;this.getLoad();}}},mounted() {let _this = this;window.addEventListener("resize", function() {_this.chartResize();});this.chart = this.$echarts.init(document.getElementById("industry"));let code = this.$route.query.code;this.params.linkCode = code;if (code) {this.getLoad();}},methods: {async getLoad() {this.loading = true;let { data } = await 接口(this.params);// console.log(data);this.loading = false;if (data.length > 0) {this.lineview(data);this.noData = false;} else {if (this.chart) this.chart.clear();this.noData = true;}},// eslint-disable-next-line no-unused-varslineview(data) {let _this = this;// if (this.chart) this.chart.clear();let option = {color: ["#06cff7","#177bef","#eab966","#6ccf69","#cddee1","#0096ff"],textStyle: {fontSize: _this.$width > 3000 ? 28 : 14},legend: {orient: "vertical",// x: 'left',// data: nameArray.slice(5, 10),right: "10%",top: "20%",bottom: "10%",// align: "left",textStyle: {color: "#fff",fontSize: 12},itemGap: 20,icon: "circle",type: "scroll",itemWidth: _this.$width > 3000 ? 50 : 25,itemHeight: _this.$width > 3000 ? 28 : 14,pageTextStyle: {color: "#fff",fontSize: _this.$width > 3000 ? 28 : 12},pageIconSize: _this.$width > 3000 ? 28 : 10,formatter: function(name) {let item = data.filter(item => item.name === name)[0];return item.name;},pageIconColor: "#fff"},tooltip: {trigger: "item",textStyle: {fontSize: _this.$width > 3000 ? 28 : 14},formatter: item => {return `${item.marker}${item.name}</br>行业占比：${item.percent}（%）</br>企业数量：${item.value}（户）`;}},series: [{name: "标签使用频率",type: "pie",center: ["35%", "50%"],radius: ["40%", "60%"],// label: { show: false, color: "#fff" },data: data.map(item => {return {...item,emphasis: {show: true,scaleSize: 9,label: {show: true}}};}),label: {show: false,position: "center",formatter: params => {return `{value|${params.percent}}{label|%}\n{name|${params.name}}`;},rich: {value: {padding: 5,align: "center",verticalAlign: "middle",fontSize: 18,fontWeight: "bold",color: "#fff"},name: {padding: 5,align: "center",verticalAlign: "middle",fontSize: 12,fontWeight: 500,color: "#fff"},label: {padding: 5,align: "center",verticalAlign: "middle",fontSize: 12,color: "rgba(255, 255, 255, 0.7)"}}},itemStyle: {// 间隔borderWidth: 0,borderColor: "#0c1a3a"}},{// 内圈name: "neiquan",// silent: true,type: "pie",radius: [120, 160],center: ["50%", "50%"],itemStyle: {color: "rgba(0, 0, 0, 0)" // 内圈默认透明色，不显示},label: {show: false},data: data}]};this.chart.setOption(option, true);this.chart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: 0});this.chart.on("mouseover", params => {// 移入后取消默认第一项高亮变大效果if (params.seriesType === "pie") {// 如果鼠标移入的不是第一项，就取消第一项的高亮效果if (params.dataIndex !== 0) {this.chart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: 0});this.chart.dispatchAction({type: "downplay",seriesIndex: 1,dataIndex: 0});}// 开启内、外圈选中效果this.chart.dispatchAction({type: "highlight",seriesIndex: 1,dataIndex: params.dataIndex});this.chart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: params.dataIndex});}});this.chart.on("mouseout", params => {// 鼠标离开每一项后关闭内、外圈移入效果this.chart.dispatchAction({type: "downplay",seriesIndex: 1,dataIndex: params.dataIndex});this.chart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: params.dataIndex});// 鼠标离开每一项后继续默认第一项选中高亮效果this.chart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: 0});this.chart.dispatchAction({type: "highlight",seriesIndex: 1,dataIndex: 0});});//       setTimeout(()=>{//   // 添加监听事件和默认选中效果//   ringGradientmMuseOut(this.chart)// },500)},/*** 图表 自适应*/chartResize() {if (this.chart) {this.chart.resize();}}}
};
</script><style lang="less" scoped>
.chart {width: 100%;height: 100%;z-index: 2;position: relative;
}
.chartView {width: 100%;height: 100%;
}
.emptyChart {position: absolute;top: 50%;right: 40%;color: #909399;font-size: 18px;// color: "#909399" !important;// font-size: "18px" !important;
}
</style>

3折线

多条折线的图

<template><divclass="chart"v-loading="loading"element-loading-background="rgba(24, 41, 88, 0)"><div id="LifeCycle" class="chartView" v-if="!noData"></div><div class="noData" v-if="noData"><div class="emptyChart">暂无数据</div></div></div>
</template><script>
import { 接口} from "@/api/接口";
export default {data() {return {chart: null,loading: false,noData: false,params: {linkCode: null},color: ["#f2393c","#ffc500","rgba(118, 167, 239, 1)","rgba(173, 233, 77, 1)","#ca58bd","#f2393c","#ffc500","rgba(118, 167, 239, 1)","rgba(173, 233, 77, 1)","#ca58bd","#f2393c","#ffc500","rgba(118, 167, 239, 1)","rgba(173, 233, 77, 1)","#ca58bd","#f2393c","#ffc500","rgba(118, 167, 239, 1)","rgba(173, 233, 77, 1)","#ca58bd"]};},// created() {//   this.getLoad();// },computed: {industryCode() {return this.$store.getters.list;}// this.getLoad();},watch: {industryCode: function(newVal) {// console.log(newVal);// this.getLoad();if (this.params.linkCode !== newVal.code) {this.params.linkCode = newVal.code;this.getLoad();}}},mounted() {let _this = this;this.chart = this.$echarts.init(document.getElementById("LifeCycle"));window.addEventListener("resize", function() {_this.chartResize();});let code = this.$route.query.code;this.params.linkCode = code;// this.getLoad();// this.params.area = "320213";// this.params.areaType = "1";if (code) {this.getLoad();}},methods: {async getLoad() {this.loading = true;let _this = this;let res = await 接口(this.params);// console.log(data)this.loading = false;if (res.data.x) {this.noData = false;let data = {},yData = [];if (res.data && res.data != "null" && res.data.x) {data.x = res.data.x;res.data.y.forEach((element, i) => {yData.push({name: element.name,type: "line",data: element.data,// smooth: true,color: this.color[i],// lineStyle: {//   color: this.color[i]// },// symbolSize: _this.$width > 3000 ? 10 : 8,showSymbol: false,symbol: "circle",smooth: true,itemStyle: {borderWidth: _this.$width > 3000 ? 2 : 1,borderColor: "#fff",color: this.color[i]},lineStyle: {color: this.color[i]},areaStyle: {color: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [// 渐变颜色{offset: 0,color: this.color[i]},{offset: 1,color: this.color[i]}],global: false},opacity: 0.6},label: {show: false,position: "top",textStyle: {color: "#fff"}}// itemStyle: { color: this.color[i] }});});data.y = yData;this.lineview(data);}} else {if (this.chart) this.chart.clear();this.noData = true;}// console.log(data);// var data = {//   date: ["2018", "2019", "2020", "2021", "2022", "2023"],//   speed: [27.35, 21.25, 4, 4.95, 0, -1.4],//   value: [433, 525, 546, 573, 573, 565]// };// this.loading = false;// this.lineview(data);// if (//   data.speed.some(item => item > 0) ||//   data.value.some(item => item > 0)// ) {//   this.lineview(data);//   this.noData = false;// } else {//   if (this.chart) this.chart.clear();//   this.noData = true;// }},lineview(data) {let _this = this;if (this.chart) this.chart.clear();let option = {tooltip: {trigger: "axis"// className: "tooltipClass",// borderColor: "#F2F6FF",// position: function(point) {//   return [point[0] - 70, "10%"]; //返回x、y（横向、纵向）两个点的位置// }// formatter: function(p) {//   // console.log(p);//   if (p) {//     let dataCon = p;//     let txtCon = `//    <div class='blocks'>//         <div class= "blocksContent">//           <span>年份：</span>//           <div class='blocksvalue'"> ${//             dataCon[2].axisValue ? dataCon[2].axisValue : ""//           }</div></br>//           <span>企业数量：</span>//           <div class='blocksvalue' style="color:rgba(255, 182, 74, 1);"> ${//             dataCon[0].value ? dataCon[0].value : 0//           }</div></br>//           <span>增速：</span>//           <div class='blocksvalue' "> ${//             dataCon[1].value ? dataCon[1].value : 0//           }%</div>//         </div>//   </div>//    `;//     return txtCon;//   }// }},textStyle: {fontSize: _this.$width > 3000 ? 28 : 14,color: "#fff"},grid: {left: "5%",right: "5%",top: "35%",bottom: 10,containLabel: true},legend: {show: true,top: 30,left: 10,right: 10,selectedMode: true,type: "scroll",itemGap: _this.$width > 3000 ? 50 : 25,itemWidth: _this.$width > 3000 ? 50 : 18,itemHeight: _this.$width > 3000 ? 28 : 10,textStyle: {color: "#fff",// width: _this.$width > 3000 ? 200 : 100,fontSize: 12,overflow: "break",lineHeight: _this.$width > 3000 ? 32 : 16},pageTextStyle: {color: "#fff",fontSize: _this.$width > 3000 ? 28 : 12},pageIconSize: _this.$width > 3000 ? 28 : 12,pageIconColor: "#fff"},xAxis: {type: "category",data: data.x || [],// axisLine: { show: true, lineStyle: { color: "#fff" } },splitLine: { show: false },axisLabel: {color: "#5f6e8d",textStyle: {fontSize: _this.$width > 3000 ? 28 : 12}},axisLine: {show: true,lineStyle: { color: "#212948" }},axisTick: { show: false }},yAxis: {type: "value",// name: "单位：(户)",// nameTextStyle: { align: "left", color: "#5c889f" },axisTick: {show: false},axisLine: {show: false,lineStyle: { color: "#fff" }},splitLine: {show: true,lineStyle: {color: "rgba(255,255,255,0.1)",type: "dashed"}},axisLabel: {color: "#5f6e8d",textStyle: {fontSize: _this.$width > 3000 ? 28 : 12}}},series: data.y};this.chart.setOption(option, true);},/*** 图表 自适应*/chartResize() {if (this.chart) {this.chart.resize();}}}
};
</script><style lang="less" scoped>
.chart {width: 100%;height: 100%;z-index: 2;position: relative;
}
.chartView {width: 100%;height: 100%;
}
::v-deep .tooltipClass {padding-right: 20px !important;display: none;// width: 200px;height: 97px;background-size: 100% 100%;border: 0px solid rgba(22, 40, 77, 0) !important;// background: linear-gradient(-9deg, rgba(22, 40, 77, 0.65) 0%, #050d1f 98%);background: url("../../img/echartsToolTip.png");background-color: inherit !important;background-size: 100% 100%;.blocks {// .blocksTitle {//   // padding: 16px 16px;//   margin: 13px 13px 5px 13px;//   height: 21px;//   font-size: 20px;//   font-family: Source Han Sans CN;//   font-weight: 500;//   color: #ffffff;//   line-height: 13px;// }.blocksContent {margin-left: 13px;margin-top: 7px;height: 33px;font-size: 10px;font-family: Source Han Sans CN;font-weight: 400;color: rgba(255, 255, 255, 1);line-height: 18px;.blocksvalue {display: inline-block;}}}
}
.emptyChart {position: absolute;top: 50%;right: 40%;color: #909399;font-size: 18px;// color: "#909399" !important;// font-size: "18px" !important;
}
</style>

4雷达图

雷达图添加左侧自定义checkbox，可以去掉右侧的数据项（需要后端配合，每次调用接口传需要查的数据项）

<template><div class="ct"><div class="leftct"><el-checkbox-group v-model="checkedCities" :min="3" :max="99"><el-checkboxv-for="(city, index) in cities":label="city":key="index"@change="checkboxChange(city)">{{ city }}</el-checkbox></el-checkbox-group></div><divclass="chart"v-loading="loading"element-loading-background="rgba(24, 41, 88, 0)"><div id="SZRHYYZS" class="chartView" v-if="!noData"></div><div class="noData" v-if="noData"><div class="emptyChart">暂无数据</div></div></div></div>
</template><script>
import { 接口} from "@/api/接口";
export default {data() {return {chart: null,loading: false,noData: false,params: {linkCode: null},checkedCities: ["数据项1","数据项2","数据项3","数据项4","数据项5","数据项6"],cities: ["数据项1","数据项2","数据项3","数据项4","数据项5","数据项6"],citiesE: ["数据项1","数据项2","数据项3","数据项4","数据项5","数据项6"],colorList: ["#ffd200", "#46bb8f", "#4c54e8"]};},// created() {//   this.getLoad();// },computed: {industryCode() {return this.$store.getters.list;}},watch: {industryCode: function(newVal) {console.log(newVal);this.getLoad();}},mounted() {let _this = this;this.chart = this.$echarts.init(document.getElementById("SZRHYYZS"));window.addEventListener("resize", function() {_this.chartResize();});this.getLoad();},methods: {async getLoad() {this.loading = true;let res = await 接口({});this.loading = false;if (res.data) {this.noData = false;let data = {},serves = [];if (res.data) {// data.x = res.data.x;for (let i = 0; i < res.data.length; i++) {serves.push({name: res.data[i].name,type: "radar",areaStyle: {normal: {color: this.colorList[i],opacity: 0.4}},z: res.data[i].name == "" ? 2 : 1,//判断哪个面积图显示在最上面symbolSize: 0,lineStyle: {normal: {color: this.colorList[i],width: 1}},data: [{value: res.data[i].num,name: res.data[i].name}]});data.serves = serves;}this.lineview(data);}} else {if (this.chart) this.chart.clear();this.noData = true;}},checkboxChange(event) {if (this.citiesE.includes(event)) {this.citiesE = this.citiesE.filter(val => {return val != event;});} else {this.citiesE.push(event);}this.getLoad();},lineview(data) {let indicator = [];this.citiesE.forEach(ele => {indicator.push({name: ele});});let _this = this;let option = {tooltip: {trigger: "item",formatter: function(value) {let ary = _this.citiesE;let html = `${value.marker}${value.data.name}</br>`;value.data.value.forEach((eles, index) => {html += `${ary[index]}<div style="width:20px;display:inline-block"></div>${eles}</br>`;});return html;}},textStyle: {fontSize: _this.$width > 3000 ? 28 : 14,color: "#fff"},grid: {left: 10,right: 20,top: 10,bottom: 30,containLabel: true},color: this.colorList,legend: {show: true,bottom: 10,right: "center",icon: "circle",itemWidth: 15, // 图例标记的图形宽度。[ default: 25 ]itemHeight: 12, // 图例标记的图形高度。[ default: 14 ]itemGap: 15, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。orient: "horizontal",textStyle: {fontSize: 12,color: "#fff"}// data: data.legends},radar: {shape: "circle",center: ["50%", "45%"],radius: "60%",// triggerEvent: true,name: {rich: {a: {fontSize: 16,color: "#fff",lineHeight: "40",padding: [0, 15, 0, 15]},b: {color: "#41E1FF",fontSize: 16,padding: [0, 0, 0, 15]},c: {color: "#fff",fontSize: 16},d: {color: "rgb(255,292,203)",fontSize: 16,padding: [0, 15, 0, 0]},triggerEvent: true}},nameGap: "10",indicator: indicator,splitArea: {areaStyle: {color: "transparent"}},axisName: {formatter: function(value) {// Split the axis name into multiple lines if it's too longvar charsPerLine = 8;var lines = [];for (var i = 0; i < value.length; i += charsPerLine) {lines.push(value.substr(i, charsPerLine));}return lines.join("\n");}},axisLine: {//指向外圈文本的分隔线样式lineStyle: {color: "rgba(0,0,0,0)"}},splitLine: {lineStyle: {width: 2,color: ["rgba(45,65,110, 0.6)"].reverse()}}},series: data.serves};this.chart.setOption(option, true);},/*** 图表 自适应*/chartResize() {if (this.chart) {this.chart.resize();}}}
};
</script><style lang="less" scoped>
.ct {width: 100%;height: 100%;display: flex;justify-content: space-between;//checkboxs的样式.leftct {// width: 30%;height: 92%;overflow: hidden;overflow-y: auto;// background: red;::v-deep .el-checkbox {color: #fff;}::v-deep .el-checkbox-group {height: 100%;display: flex;flex-direction: column;// flex-wrap: wrap;align-content: space-between;justify-content: space-evenly;padding: 20px;padding-right: 0;width: 160px;}::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {color: #fff;}::v-deep .el-checkbox__input .el-checkbox__inner {background-color: transparent;border-color: #2e9ef2;}::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {background-color: transparent;border-color: #fdd52f;}::v-deep .el-checkbox__inner::after {color: #fdd52f;border-color: #fdd52f;}}
}.chart {width: 100%;height: 100%;z-index: 2;position: relative;
}.chartView {width: 100%;height: 100%;
}
.emptyChart {position: absolute;top: 50%;right: 40%;color: #909399;font-size: 18px;// color: "#909399" !important;// font-size: "18px" !important;
}
</style>

地图（高德，echarts）

高德

<template><div class="charts"><divclass="mapView"v-loading="loading"element-loading-background="rgba(24, 41, 88, 0.4)"id="mapView"></div><div class="entTit" v-if="entName"><p @click="jumpEntInfo">{{ entName }}</p></div></div>
</template><script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { 地图接口} from "@/api/地图接口";
import { 数据接口 } from "@/api/接口 ";
let w = document.documentElement.clientWidth;
export default {data() {return {loading: false,layer: null,list: {regcap: "",num: ""},AMap: null, //地图对象params: {linkCode: null},entName: "",mapText: "", //地图文本打点markerList: [],tc: false};},computed: {industryCode() {return this.$store.getters.list;}},watch: {industryCode: function(newVal) {if (newVal.code == undefined) {return;} else {if (this.params.linkCode !== newVal.code) {this.params.linkCode = newVal.code;this.layer ? this.layer.setMap(null) : "";this.graphMaker();this.infoWin ? this.infoWin.close() : "";}}}},mounted() {let _this = this;_this.mapLoad();window.onclick = function(e) {if (e.type == "click" && e.target.className == "jumpM") {_this.jumpEntInfo(e.target.innerText);}};},methods: {mapLoad() {let $this = this,_this = this;$this.loading = true;AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.DistrictSearch", "AMap.PolyEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等AMapUI: {// 是否加载 AMapUI，缺省不加载version: "1.1", // AMapUI 缺省 1.1plugins: [] // 需要加载的 AMapUI ui插件}// Loca: {//   // 是否加载 Loca， 缺省不加载//   version: "2.0" // Loca 版本，缺省 1.3.2// }}).then(AMap => {$this.AMap = new AMap.Map("mapView", {mapStyle: "amap://styles/31e1a2843551d0d40a6f35263cbf55a9", //设置地图的显示样式features: ["bg", "road"],viewMode: "3D",pitch: 30,zoom: _this.$width > 3000 ? 13 : 12});$this.AMap.on("complete", async function() {// $this.typeGraph(AMap);// $this.graphMaker();let street = await 获取哪个的地图("100000");//中国let listOld = street.features,listNew = [];// strokeColor: "#0a6dc4",for (let index = 0; index < listOld.length; index++) {const element = listOld[index];let polygon = new AMap.Polygon({path: element.geometry.coordinates,fillColor: "#ccebc5",strokeOpacity: 1,fillOpacity: 0, // 面积越大透明度越高strokeColor: "#0a6dc4",strokeWeight: w > 3800 ? 2 : 1,zIndex: 20// strokeStyle: "dashed",// strokeDasharray: [8, 8]});listNew.push(polygon);}$this.AMap.add(listNew);$this.AMap.on("click", function() {// $this.entName = "";_this.mapText ? _this.mapText.hide() : "";});});}).catch(e => {console.log(e);});},async typeGraph(AMap) {let that = this;let { CSCYDNDQQX1, CSCYDNDQQX2 } = that.$store.getters.authority;if (CSCYDNDQQX1 && CSCYDNDQQX1[0] == 1) {//行政区划let city =CSCYDNDQQX2 && CSCYDNDQQX2[0] && CSCYDNDQQX2[0].split("-")[1];new AMap.DistrictSearch({extensions: "all",subdistrict: 0,showbiz: false}).search(city, function(status, result) {//user.dictionaryNameif (status == "complete") {that.maskView(result.districtList[0].boundaries, AMap);}});} else if (CSCYDNDQQX1 && CSCYDNDQQX1[0] == 2) {}},maskView(newJson, AMap) {let that = this;// 外多边形坐标数组和内多边形坐标数组var outer = [new AMap.LngLat(-360, 90, true),new AMap.LngLat(-360, -90, true),new AMap.LngLat(360, -90, true),new AMap.LngLat(360, 90, true)];let holes = newJson;var pathArray = [outer];pathArray.push.apply(pathArray, holes);// eslint-disable-next-line no-undefvar polygon = new AMap.Polygon({pathL: pathArray,strokeColor: "#0e4da7",strokeWeight: 2,fillColor: "rgba(1, 20, 83,1)", //rgb(1, 20, 83)fillOpacity: 0});polygon.setPath(pathArray);that.AMap.add(polygon);},async graphMaker() {this.loading = true;// eslint-disable-next-line no-unused-varslet { data } = await 数据接口(this.params);this.markerLoad(data);},async markerLoad(data) {let that = this;that.AMap.remove(that.markerList);let listOld = data,listNew = [];for (let index = 0; index < listOld.length; index++) {let element = listOld[index];let jwd = element.KEY.split(",");listNew.push({location: [jwd[0], jwd[1]],num: element.COUNT// level: element.level,// jwd: element.jwd});}that.closeInfoWin();let markerList = [];// let icon = require("/icon8.png");// let icon1 = require("../../../assets/icon9.png");let icon = require("../../img/.png");//地图打点的图片let icon1 = require("../../img/.png");//地图打点的图片// eslint-disable-next-line no-undefvar endIcon = new AMap.Icon({// eslint-disable-next-line no-undefsize: w > 3800 ? new AMap.Size(46, 52) : new AMap.Size(23, 26),image: icon1,// eslint-disable-next-line no-undefimageSize: w > 3800 ? new AMap.Size(46, 52) : new AMap.Size(23, 26)// imageOffset: new AMap.Pixel(-35, -3)});// eslint-disable-next-line no-undefvar endIcon1 = new AMap.Icon({// eslint-disable-next-line no-undefsize: w > 3800 ? new AMap.Size(46, 52) : new AMap.Size(23, 26),image: icon,// eslint-disable-next-line no-undefimageSize: w > 3800 ? new AMap.Size(46, 52) : new AMap.Size(23, 26)});// let iconHtml = '<div class="clire1" style=></div>';// let iconHtml2 = '<div class="clire2"></div>';for (var i = 0; i < listNew.length; i++) {// eslint-disable-next-line no-undeflet marker = new AMap.Marker({position: listNew[i].location,// eslint-disable-next-line no-undefoffset: new AMap.Pixel(0, 0),// eslint-disable-next-line no-undeficon: listNew[i].num >= 5 ? endIcon : endIcon1,// content: listNew[i].num >= 5 ? iconHtml : iconHtml2,anchor: "bottom-center",zoom: 13});marker.index = i;marker.lon = listNew[i].location[0];marker.lat = listNew[i].location[1];marker.on("click", function(res) {this.tc = true;that.AMap.setCenter([res.target.lon, res.target.lat]);that.entNameFun(marker, {KEY: res.target.lon + "," + res.target.lat});});markerList.push(marker);}that.markerList = markerList;that.AMap.add(markerList);that.AMap.setFitView("", false, [0, 0, 0, 0]);that.loading = false;},async entNameFun(e, params) {let _this = this;params.linkCode = _this.params.linkCode;let res = await getEntByGis(params);_this.openInfoWin(_this.markerList[e.index], res.data);},async openInfoWin(ev, res) {let _this = this;let listA = res.ENTNAME,str = "";for (let index = 0; index < listA.length; index++) {const element = listA[index];str += `<div class='map_pos'><span class='jumpM'>${element}</span></div>`;}let markerContent = `<div class='map_box'>${str}</div>`;// }// if (!_this.infoWin) {// eslint-disable-next-line no-undef_this.infoWin = new AMap.InfoWindow({// autoMove: false,// isCustom: true, //使用自定义窗体// eslint-disable-next-line no-undefoffset: w > 3800 ? new AMap.Pixel(0, -40) : new AMap.Pixel(0, -20),content: markerContent,anchor: "bottom-center"});let jwd = [ev.lon, ev.lat];_this.infoWin.open(_this.AMap, jwd);// }// _this.tableDom.innerHTML = trStr;// console.log(_this.infoWin);},//关闭 鼠标提示closeInfoWin() {let _this = this;if (_this.infoWin) {_this.infoWin.close();}},//体哦啊转jumpEntInfo(ent) {const { href } = this.$router.resolve({path: "跳转",query: { entName: ent }});window.open(href, "_blank");}}
};
</script><style lang="less" scoped>
// @import "~@/styles/indexX.less";
.charts,
.mapView {width: 100%;height: 100%;position: relative;
}
.entTit {position: absolute;right: 15px;top: 15px;background: #363f49;color: #c7cdd8;padding: 10px;min-width: 200px;font-size: 0.9em;z-index: 99;&:hover {color: #72baff;cursor: pointer;}
}
/deep/.amap-info-content {// background: palegreen;background: transparent;position: relative;z-index: 99;// padding: 0;color: #fff;.map_box {border: 1px solid rgba(255, 255, 255, 0.3);background: #0b1d38;padding: 0 10px;.map_pos {font-size: 16px;display: flex;align-items: center;padding: 5px 0;.icon {width: 42px;height: 33px;}.jumpM {display: inline-block;}}}
}.proList {width: 253px;height: 94%;position: absolute;right: 16px;bottom: 0;z-index: 9;background: linear-gradient(90deg, #132748 0%, #0e1a32 100%);// border: 1px solid rgba(255, 255, 255, 0.16);padding: 10px;display: flex;flex-direction: column;.proUl {height: 0;flex: 1;overflow: hidden;.pro {display: flex;align-items: center;padding: 10px 0;.icon {width: 41px;height: 33px;&.hide {visibility: hidden;}}em {font-style: normal;font-size: 16px;color: #eff5ff;margin: 0 10px 0 0;}span {font-size: 16px;color: #eff5ff;width: 0;flex: 1;line-height: 1.3;}}}& > i {position: absolute;width: 12px;height: 12px;display: inline-block;background-repeat: no-repeat;background-size: 100% 100%;}& > i:nth-child(1) {left: 0;top: 0;}& > i:nth-child(2) {top: 0;right: 0;transform: rotateY(180deg);}& > i:nth-child(3) {bottom: 0;right: 0;transform: rotateX(180deg) rotateY(180deg);}& > i:nth-child(4) {bottom: 0;left: 0;transform: rotateX(180deg);}
}
.leftItemTittle {display: flex;align-items: center;justify-content: center;&::before {content: "";display: block;width: 45px;height: 9px;background-size: 100% auto;}&::after {content: "";display: block;width: 45px;height: 9px;background-size: 100% auto;transform: rotate(180deg);}.tit {font-size: 18px;color: #f0f6ff;margin: 0 20px;}
}
.clire1 {width: 10px;height: 10px;border: 1px solid rgba(185, 128, 49, 1);background: rgba(185, 128, 49, 1);border-radius: 50%;
}
.clire2 {width: 10px;height: 10px;border: 1px solid rgba(185, 128, 49, 0.8);background: rgba(185, 128, 49, 0.8);border-radius: 50%;
}
</style>
<style>
.amap-info-sharp {display: none;
}
.amap-info-close {display: none;
}
</style>

echarts大地图

<template><div class="charts"><divclass="mapView"v-loading="loading"element-loading-background="rgba(24, 41, 88, 0)"id="mapView"></div><div class="entTit" v-if="entName"><p @click="jumpEntInfo">{{ entName }}</p></div></div>
</template><script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { 数据接口 } from "../";
export default {data() {return {loading: false,layer: null,list: {regcap: "",num: ""},AMap: null, //地图对象params: {linkCode: null},entName: "",mapText: ""};},computed: {industryCode() {return this.$store.getters.list;}},watch: {// eslint-disable-next-line no-unused-varsindustryCode: function(newVal) {if (this.params.linkCode !== newVal.code) {this.params.linkCode = newVal.code;this.layer ? this.layer.destroy() : "";this.graphMaker();}}},mounted() {this.mapLoad();},methods: {mapLoad() {let _this = this;_this.loading = true;AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["AMap.DistrictSearch", "AMap.PolyEditor"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等AMapUI: {// 是否加载 AMapUI，缺省不加载version: "1.1", // AMapUI 缺省 1.1plugins: [] // 需要加载的 AMapUI ui插件},Loca: {// 是否加载 Loca， 缺省不加载version: "2.0" // Loca 版本，缺省 1.3.2}}).then(AMap => {_this.AMap = new AMap.Map("mapView", {center: ["120.309635", "31.544210"],mapStyle: "amap://styles/fcf38950521355c7e95ad763c1837073", //设置地图的显示样式features: ["bg", "road"],viewMode: "3D",pitch: 60,zoom: _this.$width > 3000 ? 13 : 13});_this.AMap.on("complete", function() {_this.maskView();_this.AMap.on("click", function(e) {const feat = _this.layer.queryFeature(e.pixel.toArray());if (!feat) {_this.entName = "";_this.mapText ? _this.mapText.hide() : "";return;} else {_this.entNameFun({ KEY: feat.coordinates.join(",") });}});});}).catch(e => {console.log(e);});},//面maskView() {let _this = this;var loca = (window.loca = new Loca.Container({map: _this.AMap}));loca.ambLight = {intensity: 0.3,color: "#fff"};loca.dirLight = {intensity: 0.6,color: "#fff",target: [0, 0, 0],position: [0, -1, 1]};loca.pointLight = {color: "rgb(100,100,100)",position: [120.24289, 30.341335, 20000],intensity: 3,// 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。distance: 50000};// 行政区划查询var opts = {subdistrict: 1, //返回下一级行政区extensions: "all",showbiz: false //最后一级返回街道信息};// eslint-disable-next-line no-undeflet district = new AMap.DistrictSearch(opts); //注意：需要使用插件同步下发功能才能这样直接使用district.search("中国", function(status, result) {if (status == "complete") {// eslint-disable-next-line no-undefnew AMap.Polygon({map: _this.AMap,bubble: true,strokeWeight: 1,strokeColor: "rgba(0, 255, 252, 0)",// strokeOpacity: 0.1,fillColor: "#044e73",fillOpacity: 0.5, // 面积越大透明度越高path: result.districtList[0].boundaries});let listN = [],listOld = result.districtList[0].boundaries[0];for (let index = 0; index < listOld.length; index++) {const element = listOld[index];listN.push([element.lng, element.lat]);}let jsonA = {type: "FeatureCollection",features: [{type: "Feature",properties: {name: "111",value: 37,health: 0.62611111965,zylsd: 40.959111111447},geometry: {type: "",coordinates: [listN]}}]};var geo = new Loca.GeoJSONSource({data: jsonA});// eslint-disable-next-line no-undefvar pl = new Loca.PolygonLayer({// loca,zIndex: 120,opacity: 1,// cullface: 'none',shininess: 10,hasSide: true});pl.setSource(geo);pl.setStyle({topColor: "rgba(86, 219, 255, 0.8)",sideTopColor: "rgba(0, 255, 252, 0.6)",sideBottomColor: "rgba(3, 33, 71,1)",height: 500,altitude: 0});loca.add(pl);}});},//点async graphMaker() {this.loading = true;let { data } = await 数据接口(this.params);this.markerLoad(data);},async markerLoad(data) {let that = this;let listOld = data,jsonM = {type: "FeatureCollection",features: []},listNew = [];for (let index = 0; index < listOld.length; index++) {let element = listOld[index];let jwd = element.KEY.split(",");listNew.push({type: "Feature",properties: {consume: null},geometry: {type: "Point",coordinates: jwd}});}jsonM.features = listNew;// eslint-disable-next-line no-undefvar geo = new Loca.GeoJSONSource({data: jsonM});// eslint-disable-next-line no-undefvar loca = new Loca.Container({map: that.AMap});// eslint-disable-next-line no-undefthat.layer = new Loca.PointLayer({zIndex: 1000});that.layer.setSource(geo);that.layer.setStyle({radius: 5,unit: "px",color: "rgba(237, 197, 67, 1)",borderWidth: 0,blurWidth: 3});loca.add(that.layer);that.loading = false;that.layer.show();that.entName = "";that.mapText ? that.mapText.hide() : "";},async entNameFun(params) {let _this = this;let res = await getEntByGis(params);if (res.data.ENTNAME.length > 0) {_this.mapText ? _this.mapText.hide() : "";// _this.entName = res.data.ENTNAME[0];// 创建纯文本标记// eslint-disable-next-line no-undefvar text = new AMap.Text({text: res.data.ENTNAME[0],anchor: "center", // 设置文本标记锚点draggable: true,cursor: "pointer",// eslint-disable-next-line no-undefoffset: new AMap.Pixel(0, -30),style: {background: " #363f49",color: "#ffffff",padding: "0.5vw",border: "0 none",// "min-width": "200px","font-size": "0.9em"},position: params.KEY.split(",")});text.setMap(_this.AMap);text.on("click", function() {_this.jumpEntInfo(res.data.ENTNAME[0]);});_this.mapText = text;}},jumpEntInfo(ent) {const { href } = this.$router.resolve({path: "跳转",query: { entName: ent }});window.open(href, "_blank");}}
};
</script><style lang="less" scoped>
.charts,
.mapView {width: 100%;height: 100%;position: relative;
}
.entTit {position: absolute;right: 0.78vw;top: 0.78vw;background: #363f49;color: #c7cdd8;padding: 0.5vw;min-width: 200px;font-size: 0.9em;z-index: 99;&:hover {color: #72baff;cursor: pointer;}
}
</style>

地图>默认全国地图，点击省份之后切成省份地图

这个需要用eventbus传参，传一个点击之后的状态

代码片段1：主要页面引用

<template><div class="maps"><ChartMap v-show="mapShow == true"></ChartMap><ChartRight v-show="mapShow == false"></ChartRight></div>
</template><script>
import ChartMap from "./components/ChartMap.vue"; //地图
import ChartRight from "./components/ChartRight.vue"; //地图-省
export default {components: { ChartMap, ChartRight },data() {return {mapShow: true, //控制map地图显示};},mounted() {//从地图传过来 显示全国地图还是省份地图this.$bus.$on("areaChangsFlag", function(data) {_this.mapShow = data;});//从地图传过来 显示右侧列表的数（全国 ）this.$bus.$on("areaListDataMap", function(data) {_this.tableData = data;_this.tableData.forEach((item, index) => {item.id = index;});});//从地图传过来 显示右侧列表的数（省内 ）this.$bus.$on("areaListDataMapRight", function(data) {_this.tableDataRight = data;_this.tableDataRight.forEach((item, index) => {item.id = index;item.highlight = false;});});//从地图传过来 显示右侧列表的数（省 ）这个是如果省份点击了，就传过来高亮显示点击的哪一行 否则就取消掉高亮this.$bus.$on("areaPosition", function(area) {if (area.areaValue) {_this.locateRow(area.areaValue, area.flag);} else {_this.locateRow("", area.flag);}});},}。。。。。</script>

代码片段2：全国地图

<template><divclass="maps"id="china"v-loading="loading"element-loading-background="rgba(24, 41, 88, 0)"></div>
</template><script>
import { getGeoJson } from "@/api/app";
import { 接口} from "@/api/";
import { tempNum } from "@/utils/index";
// import {  } from "../chanye";
export default {props: {code: { type: String }},data() {return {chart: null,maxValue: 0,minValue: 0,loading: false,linkCode: "",DJ: [],pojectParams: {},paramsType: "",paramsLinkCode: ""};},watch: {paramsType() {this.$bus.$emit("areaChang", {linkCode: this.linkCode});},paramsLinkCode() {this.$bus.$emit("areaChang", {linkCode: this.linkCode});}},mounted() {let _this = this;this.chart = this.$echarts.init(document.getElementById("china"));window.addEventListener("resize", function() {_this.chartResize();});this.$bus.$on("tomaps", pamas => {this.getLoad(pamas);});},methods: {chartResize() {if (this.chart) {this.chart.resize();}},async getLoad(pamas) {this.loading = true;this.linkCode = pamas;this.paramsType = pamas.type;this.paramsLinkCode = pamas.linkCode;let { data } = await 接口({});let arrs = [];for (let i = 0; i < data.area.length; i++) {arrs.push({code: data.area[i].CODE,name: data.area[i].NAME,value: data.area[i].VALUE});}if (data.list) {this.$bus.$emit("areaListDataMap", data.list);}this.getGeo(arrs);},async getGeo(list) {console.log("mapdatasssssssssssssssss", list);let $this = this;let data = await getGeoJson("100000");this.loading = false;this.$echarts.registerMap("china", data);let option = {tooltip: {trigger: "item",confine: true,className: "echarts-tooltip",formatter: item => {let dw = "";let html = item;html = `${item.name}<br/>${item.marker}${this.linkCode.name}：${tempNum(html.value)}（${dw}）<br/>`;return html;}},series: [{type: "map",map: "china",roam: false,data: list,layoutCenter: ["50%", "42%"],// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域layoutSize: "95%",itemStyle: {areaColor: "#fdfdfd",borderColor: "#1b5eeb",shadowColor: "#092f8f", //外发光shadowBlur: 0},emphasis: {itemStyle: {areaColor: "rgba(255, 217, 3, 1)"}},select: {itemStyle: {borderColor: "#f18355",borderWidth: "2",areaColor: "yellow"}}}]};if (list.length > 0) {let num1 = 0,num2 = 0,num3 = 0,num4 = 0;let len = list.length - 1;for (let index = 0; index < list.length; index++) {const element = list[index];// console.log(element);if (index == Math.ceil((len / 100) * 10)) {num1 = Math.round(element.value / 10) * 10;// console.log()}if (index == Math.ceil((len / 100) * 20)) {num2 = Math.round(element.value / 10) * 10;// console.log(len, index, num2);}if (index == Math.ceil((len / 100) * 30)) {num3 = Math.round(element.value / 10) * 10;// console.log(len, index, num3);}if (index == Math.floor((len / 100) * 65)) {num4 = Math.round(element.value / 10) * 10;// console.log(len, index, num4);}}// console.log(piecess);option["visualMap"] = {type: "piecewise",min: Math.floor(list[list.length - 1].value * 1),max: Math.ceil(list[0].value * 1),pieces: [{ gt: num1, color: "#f4000b" }, // (1000, Infinity]{ gt: num2, lte: num1, color: "#f75d0d" }, // (310, 1000]{ gt: num3, lte: num2, color: "#fc8889" }, // (200, 300]{ gt: num4, lte: num3, color: "#7affcf" }, // (10, 200]{ lt: num4, color: "#0556ff" } // (-Infinity, 5)],// min: this.minValue || 0,// max: this.maxValue || 0,// splitNumber: 5,// pieces: piecess,show: true,inverse: false,align: "left",right: 30,bottom: 20,itemHeight: 8,itemWidth: 10,textStyle: {color: "#fff",fontSize: 10},inRange: {color: ["rgba(244, 0, 11,1)","#76D5FF","#00B1FF","#0F5EEC","#0D16D2"]},outOfRange: {color: ["#064267"]}};}this.chart.setOption(option, true);this.chart.on("click", function(params) {if (params.data) {$this.$bus.$emit("areaChangsFlag", false);if (params) {$this.$bus.$emit("areaChang", {areaName: params.data.name,areaValue: params.data.code,linkCode: $this.linkCode});}}});}}// destroyed() {//   if (this.chart) {//     this.chart.dispose();//   }// },
};
</script><style lang="less" scoped>
.maps {width: 100%;height: 100%;
}
::v-deep .tooltipClass {padding-right: 20px !important;display: none;// width: 200px;height: 77px;background-size: 100% 100%;border: 0px solid rgba(22, 40, 77, 0) !important;// background: linear-gradient(-9deg, rgba(22, 40, 77, 0.65) 0%, #050d1f 98%);// background: url("../../img/echartsToolTip.png");background-color: inherit !important;background-size: 100% 100%;// opacity: 0.8;.blocks {.blocksContent {margin-left: 13px;margin-top: 7px;height: 33px;font-size: 10px;font-family: Source Han Sans CN;font-weight: 400;color: rgba(255, 255, 255, 1);line-height: 18px;.blocksvalue {display: inline-block;}}}
}
</style>

代码片段4：省内地图

<template><div style="height:100%"><div class="topButton" @click="goback()">返回</div><divclass="map"id="chinaRight"v-loading="loading"element-loading-background="rgba(24, 41, 88, 0)"></div></div>
</template><script>
import { getGeoJson } from "@/api/app";
import { 接口} from "@/api/";
import { tempNum } from "@/utils/index";
export default {data() {return {chart: null,maxValue: 0,minValue: 0,loading: false,parentParams: {areaCode: "",linkCode: "",type: ""},parentData: ""};},mounted() {let _this = this;this.chart = this.$echarts.init(document.getElementById("chinaRight"));window.addEventListener("resize", function() {_this.chartResize();});this.$bus.$on("areaChang", pamas => {if (pamas.areaValue) {_this.parentParams.areaValue = pamas.areaValue;}_this.parentParams.linkCode = pamas.linkCode;_this.parentParams.type = pamas.linkCode.type;if (_this.parentParams.areaValue) {this.getLoad();}});},methods: {chartResize() {if (this.chart) {this.chart.resize();}},goback() {this.$bus.$emit("areaChangsFlag", true);this.$bus.$emit("areaPosition", {flag: true});},async getLoad() {this.loading = true;// this.loading = true;let { data } = await 接口({});let arrs = [];for (let i = 0; i < data.area.length; i++) {arrs.push({code: data.area[i].CODE,name: data.area[i].NAME,value: data.area[i].VALUE});}let mapList = [];data.area.forEach(function(item) {mapList.push(item.value);});this.maxValue = Math.max(...mapList);this.minValue = Math.min(...mapList);if (data.list) {this.$bus.$emit("areaListDataMapRight", data.list);}this.getGeo(arrs);},async getGeo(list) {let data = await getGeoJson(this.parentParams.areaValue);this.loading = false;this.$echarts.registerMap(this.parentParams.areaValue, data);let option = {grid: { top: 0, bottom: 0, right: 0, left: 0, containLabel: true },tooltip: {trigger: "item",confine: true,className: "echarts-tooltip",formatter: item => {let dw = "";let html = item;html = `${item.name}<br/>${item.marker}${this.parentParams.linkCode.name}：${tempNum(html.value)}（${dw}）<br/>`;return html;}},series: [{type: "map",map: this.parentParams.areaValue,roam: false,data: list,layoutCenter: ["50%", "42%"],// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域layoutSize: "95%",selectedMode: false,itemStyle: {areaColor: "#fdfdfd",borderColor: "#bbcff9",shadowColor: "#092f8f", //外发光shadowBlur: 0},emphasis: {itemStyle: {areaColor: "rgba(255, 217, 3, 1)"}},select: {itemStyle: {// areaColor: "rgba(255, 217, 3, 1)",// color: "rgba(255, 217, 3, 1)"borderColor: "#f18355",borderWidth: "2",areaColor: "yellow"}}}]};if (list.length > 0) {let num1 = 0,num2 = 0,num3 = 0,num4 = 0;let len = list.length - 1;for (let index = 0; index < list.length; index++) {const element = list[index];// console.log(element);if (index == Math.ceil((len / 100) * 10)) {num1 = Math.round(element.value / 10) * 10;// console.log()}if (index == Math.ceil((len / 100) * 20)) {num2 = Math.round(element.value / 10) * 10;// console.log(len, index, num2);}if (index == Math.ceil((len / 100) * 30)) {num3 = Math.round(element.value / 10) * 10;// console.log(len, index, num3);}if (index == Math.floor((len / 100) * 65)) {num4 = Math.round(element.value / 10) * 10;// console.log(len, index, num4);}}// console.log(piecess);option["visualMap"] = {type: "piecewise",min: Math.floor(list[list.length - 1].value * 1),max: Math.ceil(list[0].value * 1),pieces: [{ gt: num1, color: "#f4000b" }, // (1000, Infinity]{ gt: num2, lte: num1, color: "#f75d0d" }, // (310, 1000]{ gt: num3, lte: num2, color: "#fc8889" }, // (200, 300]{ gt: num4, lte: num3, color: "#7affcf" }, // (10, 200]{ lt: num4, color: "#0556ff" } // (-Infinity, 5)],// min: this.minValue || 0,// max: this.maxValue || 0,// splitNumber: 5,// pieces: piecess,show: true,inverse: false,align: "left",right: 30,bottom: 20,itemHeight: 8,itemWidth: 10,textStyle: {color: "#fff",fontSize: 10},inRange: {color: ["rgba(244, 0, 11,1)","#76D5FF","#00B1FF","#0F5EEC","#0D16D2"]},outOfRange: {color: ["#064267"]}};}this.chart.setOption(option, true);let $this = this;this.chart.on("click", function(params) {if (params) {$this.$bus.$emit("areaPosition", {areaName: params.data.name,areaValue: params.data.code,flag: false});}});this.chartResize();}},destroyed() {if (this.chart) {this.chart.dispose();}}
};
</script><style lang="less" scoped>
.map {width: 100%;height: 100%;
}
::v-deep .tooltipClass {padding-right: 20px !important;display: none;// width: 200px;height: 77px;background-size: 100% 100%;border: 0px solid rgba(22, 40, 77, 0) !important;background-color: inherit !important;background-size: 100% 100%;.blocks {.blocksContent {margin-left: 13px;margin-top: 7px;height: 33px;font-size: 10px;font-family: Source Han Sans CN;font-weight: 400;color: rgba(255, 255, 255, 1);line-height: 18px;.blocksvalue {display: inline-block;}}}
}
.topButton {z-index: 100;width: 30px;position: absolute;margin-left: 20px;font-size: 14px;color: #fff;cursor: pointer;
}
</style>

代码片段5：地图合并

·点击全国地图切换到省级地图，点击返回切换到全国地图·

<template><div style="height:100%"><div class="topButton" v-show="!QGorSF" @click="goback()">返回</div><divclass="map"id="chinaRight"v-loading="loading"element-loading-background="rgba(24, 41, 88, 0)"></div></div>
</template><script>
import { getGeoJson } from "@/api/app";
import { 接口} from "@/api/";
import { tempNum } from "@/utils/index";
export default {data() {return {chart: null,chartOne: null,maxValue: 0,minValue: 0,loading: false,parentParams: {areaCode: "",linkCode: "",type: ""},areaCodeFlag: true,parentData: "",QGorSF: true};},watch: {QGorSF(newValue) {console.log(newValue);if (newValue) {this.getLoadQG(this.linkCode);} else {this.getLoad();}}},mounted() {let _this = this;this.chart = this.$echarts.init(document.getElementById("chinaRight"));window.addEventListener("resize", function() {_this.chartResize();});//收到父级的传参，渲染areaCodeFlagthis.$bus.$on("tomaps", pamas => {_this.linkCode = pamas;if (this.areaCodeFlag) {this.getLoadQG(pamas);} else {this.getLoad();}});},methods: {chartResize() {if (this.chart) {this.chart.resize();}},goback() {this.QGorSF = true;this.areaCodeFlag = true;this.$bus.$emit("areaChangsFlag", true);this.$bus.$emit("areaPosition", {flag: true});},async getLoad() {this.loading = true;let { data } = await industrialDistribution({areaCode: this.parentParams.areaValue,linkCode: this.linkCode.linkCode,type: this.linkCode.type});let arrs = [];for (let i = 0; i < data.area.length; i++) {arrs.push({code: data.area[i].CODE,name: data.area[i].NAME,value: data.area[i].VALUE});}let mapList = [];data.area.forEach(function(item) {mapList.push(item.value);});this.maxValue = Math.max(...mapList);this.minValue = Math.min(...mapList);if (data.list) {this.$bus.$emit("areaListDataMapRight", data.list);}this.getGeo(arrs);},async getGeo(list) {let data = await getGeoJson(this.parentParams.areaValue);this.$echarts.registerMap(this.parentParams.areaValue, data);let option = {grid: { top: 0, bottom: 0, right: 0, left: 0, containLabel: true },tooltip: {trigger: "item",confine: true,className: "echarts-tooltip",formatter: item => {let dw = "";if (this.linkCode.name == "企业数量") {dw = "户";} else if (this.linkCode.name == "注册资本") {dw = "亿元";} else if (this.linkCode.name == "实缴资本") {dw = "亿元";} else if (this.linkCode.name == "上市企业") {dw = "户";} else if (this.linkCode.name == "企业存活率") {dw = "%";} else if (this.linkCode.name == "产业资本流入") {dw = "户";} else if (this.linkCode.name == "重点企业成长") {dw = "户";} else if (this.linkCode.name == "创新主体") {dw = "户";} else if (this.linkCode.name == "创新成果") {dw = "项";} else if (this.linkCode.name == "户均创新成果") {dw = "项";} else if (this.linkCode.name == "高新技术企业") {dw = "户";} else if (this.linkCode.name == "高新技术企业创新成果") {dw = "项";} else if (this.linkCode.name == "高新技术企业户均创新成果") {dw = "项";} else if (this.linkCode.name == "专精特新企业") {dw = "户";} else if (this.linkCode.name == "专精特新企业创新成果") {dw = "项";} else if (this.linkCode.name == "专精特新企业户均创新成果") {dw = "项";} else if (this.linkCode.name == "企业死亡率") {dw = "%";} else if (this.linkCode.name == "企业失信率") {dw = "%";}let html = item;html = `${item.name}<br/>${item.marker}${this.linkCode.name}：${tempNum(html.value)}（${dw}）<br/>`;return html;}},series: [{type: "map",map: this.parentParams.areaValue,roam: true,data: list,layoutCenter: ["50%", "42%"],// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域layoutSize: "95%",selectedMode: false,itemStyle: {areaColor: "#fdfdfd",borderColor: "#bbcff9",shadowColor: "#092f8f", //外发光shadowBlur: 0},emphasis: {itemStyle: {areaColor: "rgba(255, 217, 3, 1)"}},select: {itemStyle: {// areaColor: "rgba(255, 217, 3, 1)",// color: "rgba(255, 217, 3, 1)"borderColor: "#f18355",borderWidth: "2",areaColor: "yellow"}}}]};if (list.length > 0) {let num1 = 0,num2 = 0,num3 = 0,num4 = 0;let len = list.length - 1;for (let index = 0; index < list.length; index++) {const element = list[index];// console.log(element);if (index == Math.ceil((len / 100) * 10)) {num1 = Math.round(element.value / 10) * 10;// console.log()}if (index == Math.ceil((len / 100) * 20)) {num2 = Math.round(element.value / 10) * 10;// console.log(len, index, num2);}if (index == Math.ceil((len / 100) * 30)) {num3 = Math.round(element.value / 10) * 10;// console.log(len, index, num3);}if (index == Math.floor((len / 100) * 65)) {num4 = Math.round(element.value / 10) * 10;// console.log(len, index, num4);}}// console.log(piecess);option["visualMap"] = {type: "piecewise",min: Math.floor(list[list.length - 1].value * 1),max: Math.ceil(list[0].value * 1),pieces: [{ gt: num1, color: "#f4000b" }, // (1000, Infinity]{ gt: num2, lte: num1, color: "#f75d0d" }, // (310, 1000]{ gt: num3, lte: num2, color: "#fc8889" }, // (200, 300]{ gt: num4, lte: num3, color: "#7affcf" }, // (10, 200]{ lt: num4, color: "#0556ff" } // (-Infinity, 5)],// min: this.minValue || 0,// max: this.maxValue || 0,// splitNumber: 5,// pieces: piecess,show: true,inverse: false,align: "left",right: 30,bottom: 60,itemHeight: 8,itemWidth: 10,textStyle: {color: "#fff",fontSize: 10},inRange: {color: ["rgba(244, 0, 11,1)","#76D5FF","#00B1FF","#0F5EEC","#0D16D2"]},outOfRange: {color: ["#064267"]}};}this.chart.setOption(option, true);let $this = this;this.chart.on("click", function(params) {if (params) {$this.$bus.$emit("areaPosition", {areaName: params.data.name,areaValue: params.data.code,flag: false});}});this.loading = false;this.chartResize();},async getLoadQG(pamas) {this.loading = true;this.linkCode = pamas;this.paramsType = pamas.type;this.paramsLinkCode = pamas.linkCode;let { data } = await industrialDistribution({areaCode: "",linkCode: pamas.linkCode,type: pamas.type});let arrs = [];for (let i = 0; i < data.area.length; i++) {arrs.push({code: data.area[i].CODE,name: data.area[i].NAME,value: data.area[i].VALUE});}if (data.list) {this.$bus.$emit("areaListDataMap", data.list);}this.getGeoQG(arrs);},async getGeoQG(list) {let $this = this;let data = await getGeoJson("100000");this.loading = false;this.$echarts.registerMap("china", data);let option = {tooltip: {trigger: "item",confine: true,className: "echarts-tooltip",formatter: item => {let dw = "";if (this.linkCode.name == "企业数量") {dw = "户";} else if (this.linkCode.name == "注册资本") {dw = "亿元";} else if (this.linkCode.name == "实缴资本") {dw = "亿元";} else if (this.linkCode.name == "上市企业") {dw = "户";} else if (this.linkCode.name == "企业存活率") {dw = "%";} else if (this.linkCode.name == "产业资本流入") {dw = "户";} else if (this.linkCode.name == "重点企业成长") {dw = "户";} else if (this.linkCode.name == "创新主体") {dw = "户";} else if (this.linkCode.name == "创新成果") {dw = "项";} else if (this.linkCode.name == "户均创新成果") {dw = "项";} else if (this.linkCode.name == "高新技术企业") {dw = "户";} else if (this.linkCode.name == "高新技术企业创新成果") {dw = "项";} else if (this.linkCode.name == "高新技术企业户均创新成果") {dw = "项";} else if (this.linkCode.name == "专精特新企业") {dw = "户";} else if (this.linkCode.name == "专精特新企业创新成果") {dw = "项";} else if (this.linkCode.name == "专精特新企业户均创新成果") {dw = "项";} else if (this.linkCode.name == "企业死亡率") {dw = "%";} else if (this.linkCode.name == "企业失信率") {dw = "%";}let html = item;html = `${item.name}<br/>${item.marker}${this.linkCode.name}：${tempNum(html.value)}（${dw}）<br/>`;return html;}},series: [{type: "map",map: "china",roam: true,data: list,layoutCenter: ["50%", "42%"],// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域layoutSize: "95%",itemStyle: {areaColor: "#fdfdfd",borderColor: "#1b5eeb",shadowColor: "#092f8f", //外发光shadowBlur: 0},emphasis: {itemStyle: {areaColor: "rgba(255, 217, 3, 1)"}},select: {itemStyle: {// areaColor: "rgba(255, 217, 3, 1)",// color: "rgba(255, 217, 3, 1)",// color: "#0F5EEC",borderColor: "#f18355",borderWidth: "2",areaColor: "yellow"}}}]};if (list.length > 0) {let num1 = 0,num2 = 0,num3 = 0,num4 = 0;let len = list.length - 1;for (let index = 0; index < list.length; index++) {const element = list[index];// console.log(element);if (index == Math.ceil((len / 100) * 10)) {num1 = Math.round(element.value / 10) * 10;// console.log()}if (index == Math.ceil((len / 100) * 20)) {num2 = Math.round(element.value / 10) * 10;// console.log(len, index, num2);}if (index == Math.ceil((len / 100) * 30)) {num3 = Math.round(element.value / 10) * 10;// console.log(len, index, num3);}if (index == Math.floor((len / 100) * 65)) {num4 = Math.round(element.value / 10) * 10;// console.log(len, index, num4);}}// console.log(piecess);option["visualMap"] = {type: "piecewise",min: Math.floor(list[list.length - 1].value * 1),max: Math.ceil(list[0].value * 1),pieces: [{ gt: num1, color: "#f4000b" }, // (1000, Infinity]{ gt: num2, lte: num1, color: "#f75d0d" }, // (310, 1000]{ gt: num3, lte: num2, color: "#fc8889" }, // (200, 300]{ gt: num4, lte: num3, color: "#7affcf" }, // (10, 200]{ lt: num4, color: "#0556ff" } // (-Infinity, 5)],// min: this.minValue || 0,// max: this.maxValue || 0,// splitNumber: 5,// pieces: piecess,moveHandle: {show: true},show: true,inverse: false,align: "left",right: 30,bottom: 60,itemHeight: 8,itemWidth: 10,textStyle: {color: "#fff",fontSize: 10},inRange: {color: ["rgba(244, 0, 11,1)","#76D5FF","#00B1FF","#0F5EEC","#0D16D2"]},outOfRange: {color: ["#064267"]}};}this.chart.setOption(option, true);this.chart.on("click", function(params) {$this.areaCodeFlag = false;if (params.data) {if (params) {if ($this.QGorSF) {$this.$bus.$emit("areaChangsFlag", false);$this.parentParams.areaValue = params.data.code;}}}$this.QGorSF = false;});this.chartResize();}},destroyed() {if (this.chart) {this.chart.dispose();}}
};
</script><style lang="less" scoped>
.map {width: 100%;height: 100%;
}
::v-deep .tooltipClass {padding-right: 20px !important;display: none;// width: 200px;height: 77px;background-size: 100% 100%;border: 0px solid rgba(22, 40, 77, 0) !important;background-color: inherit !important;background-size: 100% 100%;// opacity: 0.8;.blocks {.blocksContent {margin-left: 13px;margin-top: 7px;height: 33px;font-size: 10px;font-family: Source Han Sans CN;font-weight: 400;color: rgba(255, 255, 255, 1);line-height: 18px;.blocksvalue {display: inline-block;}}}
}
.topButton {z-index: 100;width: 30px;position: absolute;margin-left: 20px;font-size: 14px;color: #fff;cursor: pointer;
}
</style>

Echarts图--关于写在vue页面上的相关推荐

Vue项目如何实现进入网站后欢迎动画只播放一次的效果（欢迎动画是一个position:fixed；属性的遮罩层，直接写在首页页面上）
Vue项目如何实现进入网站后欢迎动画只播放一次的效果(欢迎动画是一个position:fixed;属性的遮罩层,直接写在首页页面上) 前端小白的我最近在项目上遇到了一个需求,就是网站首页上有个遮罩层的 ...
echarts如何显示在页面上
echarts如何显示在页面上 1.引入echarts的相关.js文件 <script src="js/echarts.min.js"></script> ...
vue中，点击button按钮后，页面上的input框再次自动获取焦点
需求:点击button按钮,录入成功后,页面上的input框自动聚焦,快速进行下一次录入,提高效率开始尝试了几种方法都没有成功一.首先想到的用vue指令 v-focus,然而没有成功 <In ...
echarts图渲染问题：解决图不正常显示，图缩到一起了，清空图表数据，随窗口变化自动缩放问题(vue)
echarts图是常用的数据展示图表插件,在运用过程中可能会遇到各种问题,下面我总结一下我在项目开发中遇到的问题: 在切换tab页的时候,很容易出现图缩到一起了,如下图: 重新加载数据,图任然有数据 ...
标注图+部分举例聊聊Vue生命周期
"你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高." 现在项目中遇到了,好好回头总结一波Vue生命周期,以后用到的时候再来翻翻. 啥叫Vue生命周 ...
echarts mysql scrapy_抓取58job, 赶集job以及智联招聘，并使用数据分析生成echarts图...
**抓取58job, 赶集job以及智联招聘,并使用数据分析生成echarts图** 爬虫部分爬虫部分使用scrapy-redis分布式爬虫,通过redis实现增量爬取以及去重,并将所有的数据直接保 ...
用vue语法写html,Vue -- 模板语法
Vue 模板语法 1.vue 和大多数后台语言,甚至是和art-template 这种前端模板库一样,都有一套,特定的语法来把数据渲染在html上. Mustache -- 大胡子语法 1.大胡子的语 ...
Echarts图设置好了但是在页面无法显示问题
Echarts图设置好了但是在页面无法显示问题明明已经按照echarts官网的方式设置好了echarts图,甚至的按照示例一模一样的数据也无法在页面中显图形, 但是用于装echarts图的容器却可以 ...
SSG框架Gatsby访问数据库，并显示到页面上
前言对于一些不长变的前端项目中,如个人博客.公司官网,可能技术选型为SSG框架会相对比之前的CSR会更好些,也会更快,最近研究了下Gatsby框架,感觉不错,就简单写了一个用其访问MySQL数据库, ...

Echarts图--关于写在vue页面上的

1柱图：

柱图添加分割线，添加自定义tooltip样式

2饼图

饼图右侧增加列表

饼图中间加数据

3折线

多条折线的图

4雷达图

雷达图添加左侧自定义checkbox，可以去掉右侧的数据项（需要后端配合，每次调用接口传需要查的数据项）

地图（高德，echarts）

高德

echarts大地图

地图>默认全国地图，点击省份之后切成省份地图

代码片段1：主要页面引用

代码片段2：全国地图

代码片段4：省内地图

代码片段5：地图合并

Echarts图--关于写在vue页面上的相关推荐

最新文章

热门文章