echarts+vue2实战(一)

目录

一、项目准备

二、(横向分页)柱状图

2.1、动态刷新

2.2、UI调整

2.3、分辨率适配

三、(竖向平移)柱状图

3.1、平移动画

3.2、不同数值显示不同颜色

四、(下拉切换)折线图

4.1、切换图表和分辨率适配

4.2、UI调整

五、(三级分类)饼图

5.1、数据切换

六、圆环饼图

6.1、切换动画

七、地图+散点图

7.1、地图上显示散点

7.2、点击出现单个省份，双击复原

一、项目准备

服务器数据获取链接：电商: 电商数据可视化配套素材

B站链接：57_前端项目_销量趋势图表_通用代码结构_哔哩哔哩_bilibili

  下载下来的文件里面用‘第三天=>代码’项目启动：cmd进入文件夹下npm init -y,然后npm i koa（koa是基于node.js的另一个框架，和Express差不多），直接node app.js即可，终端没有响应就代表启动正常了，在浏览器上输入"http://127.0.0.1:8888/api/seller"可以看到数据.

vue2项目的main.js里：

import './assets/less/global.less';//引入全局的样式文件
import './assets/font/iconfont.css';//引入字体的样式文件
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/';
Vue.prototype.$http = axios;
import echarts from "echarts";
Vue.prototype.$echarts = echarts;//挂载到原型，可以在全局使用

核心功能：屏幕适配【screenAdapter()】、全屏切换、实时监测【WebSocket】

二、(横向分页)柱状图

代码如下：

<template><div class="com-container"><div class="com-chart" ref="seller_ref"></div></div>
</template>
<script>
import * as ets from "echarts";
import chalk from "../../../../public/static/theme/chalk.json";//自己下载
export default {data() {return {chartInstance: null,allData: null,currentPage: 1,totalPage: 0, //一共多少页timeId: null, //定时器标识};},mounted() {this.initChart();this.getData();window.addEventListener("resize", this.screenAdapter);this.screenAdapter(); //得先主动适配屏幕//最原始的Option现在被拆分为initOption、dataOption、adapterOption三部分，各司其职},destroyed() {clearInterval(this.timeId);window.removeEventListener("resize", this.screenAdapter);},methods: {// 初始化echartsInstance对象initChart() {ets.registerTheme("chalk", chalk);this.chartInstance = ets.init(this.$refs.seller_ref, "chalk");//主题//   对图表初始化配置的控制const initOption = {//' ▎'这个标记在搜狗输入法上右键，里面的“符号大全”里有title: {text: "▎商家销售统计",left: 20,top: 20,},grid: {top: "20%",left: "3%",right: "6%",bottom: "3%",containLabel: true, //距离是包含坐标轴上的文字},xAxis: {type: "value",},yAxis: {type: "category",},tooltip: {//划过提示trigger: "axis",axisPointer: {type: "line",z: 0,lineStyle: {color: "#314055",},},},series: [{type: "bar",label: {show: true,position: "right",textStyle: {color: "white",},},itemStyle: {//   barBorderRadius: [0, 33, 33, 0],// 指明颜色渐变的方向和不同百分比之下颜色的值color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: "#5052EE",},{offset: 1,color: "#AB6EE5",},]),},},],};this.chartInstance.setOption(initOption);//   鼠标移入图表中停止更新，移出则继续更新this.chartInstance.on("mouseover", () => {clearInterval(this.timeId);});this.chartInstance.on("mouseout", () => {this.startInterval();});},// 获取服务器数据async getData() {const { data: ret } = await this.$http.get("seller");//axios调接口this.allData = ret;this.allData.sort((a, b) => {return a.value - b.value; //从小到大进行排序});this.totalPage =this.allData.length % 5 == 0? this.allData.length / 5: this.allData.length / 5 + 1; //5个元素一页this.updateChart();this.startInterval();},// 更新图表updateChart() {const start = (this.currentPage - 1) * 5;const end = this.currentPage * 5;const showData = this.allData.slice(start, end);const sellerNames = showData.map((item) => {return item.name;});const sellerValues = showData.map((item) => {return item.value;});const dataOption = {yAxis: {data: sellerNames,},series: [{data: sellerValues,},],};this.chartInstance.setOption(dataOption);},// 动态刷新startInterval() {if (this.timeId) {clearInterval(this.timeId);}this.timeId = setInterval(() => {this.currentPage++;if (this.currentPage > this.totalPage) {//边界值判断this.currentPage = 1;}this.updateChart();}, 3000);},// 当浏览器大小发生变化时，会进行分辨率适配screenAdapter() {const titleFontSize = (this.$refs.seller_ref.offsetWidth / 100) * 3.6;const adapterOption = {title: {textStyle: {fontSize: titleFontSize,},},tooltip: {axisPointer: {lineStyle: {width: titleFontSize,},},},series: [{barWidth: titleFontSize,itemStyle: {barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],},},],};this.chartInstance.setOption(adapterOption);this.chartInstance.resize(); //手动调用图表对象的resize()才能生效},},
};
</script>

代码讲解：

2.1、动态刷新

(1)、处理数据：接口返回的数据共15条，每5个元素为一页，通过定时器让currentPage++来实现数据的变化；

(2)、触发时机：echarts自带的事件mouseover、mouseout来开启/停止定时器；

(3)、边界值处理：当currentPage > totalPage时就是边界了，此时currentPage = 1;

2.2、UI调整

  柱子宽度：barWidth、柱子上的文字：label、柱子圆角：itemStyle.barBorderRadius；颜色渐变：itemStyle.color加LinearGradient、柱子划过提示：tooltip；

横向渐变原理图：

2.3、分辨率适配

(1)、监听浏览器窗口变化 window.addEventListener("resize", this.screenAdapter);

(2)、根据原始窗口宽度计算一个变化值this.$refs.seller_ref.offsetWidth，将配置(fontSize、width、barWidth、barBorderRadius等)里的具体数字改为适配值

(3)、手动调用图表对象的resize()就OK了

三、(竖向平移)柱状图

代码如下：

<template><div class="com-container"><div class="com-chart" ref="rank_ref"></div></div>
</template>
<script>
import * as ets from "echarts";
import chalk from "../../../../public/static/theme/chalk.json"; //自己下载
export default {data() {return {chartInstance: null,allData: null,startValue: 0, //区域缩放的起点值endValue: 9, //区域缩放的终点值timeId: null,};},mounted() {this.initChart();this.getData();window.addEventListener("resize", this.screenAdapter);this.screenAdapter();},destroyed() {clearInterval(this.timeId);window.removeEventListener("resize", this.screenAdapter);},methods: {// 初始化echartsInstance对象initChart() {ets.registerTheme("chalk", chalk);this.chartInstance = ets.init(this.$refs.rank_ref, "chalk");const initOption = {title: {text: "▎地区销售排行",left: 20,top: 20,},grid: {top: "40%",left: "5%",right: "5%",bottom: "5%",containLabel: true, //文字在位置范围内},tooltip: {show: true,},xAxis: {type: "category",},yAxis: {type: "value",},series: [{type: "bar",},],};this.chartInstance.setOption(initOption);//   鼠标移入图表中动画停止，移出则动画继续this.chartInstance.on("mouseover", () => {clearInterval(this.timeId);});this.chartInstance.on("mouseout", () => {this.startInterval();});},// 获取服务器数据async getData() {const { data: ret } = await this.$http.get("rank");this.allData = ret;this.allData.sort((a, b) => {return b.value - a.value; //从大到小进行排序});this.updateChart();this.startInterval();},// 更新图表updateChart() {const colorArr = [["#0BA82C", "#4FF778"],["#2E72BF", "#23E5E5"],["#5052EE", "#AB6EE5"],];const provinceArr = this.allData.map((item) => {return item.name;});const valueArr = this.allData.map((item) => {return item.value;});const dataOption = {xAxis: {data: provinceArr,},dataZoom: {show: false,startValue: this.startValue,endValue: this.endValue,},series: [{data: valueArr,itemStyle: {color: (arg) => {//不同数值显示不同颜色let targetColorArr = null;if (arg.value > 230) {targetColorArr = colorArr[0];} else if (arg.value > 200) {targetColorArr = colorArr[1];} else {targetColorArr = colorArr[2];}return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: targetColorArr[0],},{offset: 1,color: targetColorArr[1],},]);},},},],};this.chartInstance.setOption(dataOption);},// 平移动画效果startInterval() {if (this.timeId) {clearInterval(this.timeId);}this.timeId = setInterval(() => {this.startValue++;this.endValue++;if (this.endValue > this.allData.length - 1) {this.startValue = 0;this.endValue = 9;}this.updateChart();}, 2000);},// 当浏览器大小发生变化时，会进行分辨率适配screenAdapter() {const titleFontSize = (this.$refs.rank_ref.offsetWidth / 100) * 3.6;const adapterOption = {title: {textStyle: {fontSize: titleFontSize,},},series: [{barWidth: titleFontSize,itemStyle: {barBorderRadius: [titleFontSize / 2, titleFontSize / 2, 0, 0],},},],};this.chartInstance.setOption(adapterOption);this.chartInstance.resize();},},
};
</script>

3.1、平移动画

  共21条数据，一次性展示10条数据，借助定时器，每间隔一段时间向左移动一天数据，本质就是控制dataZoom的startValue和endValue

3.2、不同数值显示不同颜色

  在itemStyle.color的回调函数里可以依次拿到所有结果，根据自己的需求返回不同颜色即可，渐变色就自定义二维数组即可

四、(下拉切换)折线图

代码如下：

<template><div class="com-container"><divclass="title":style="{fontSize: `${titleFontSize}px`,}"><span>{{ "▎" + showTitle }}</span><!-- 下拉箭头 --><spanclass="iconfont title-icon":style="{fontSize: `${titleFontSize}px`,}"@click="showChoice = !showChoice">&#xe6eb;</span><div class="select-con" v-show="showChoice" :style="marginStyle"><divclass="select-item"v-for="item in selectType":key="item.key"@click="handleSelect(item.key)">{{ item.text }}</div></div></div><div class="com-chart" ref="trend_ref"></div></div>
</template>
<script>
import * as ets from "echarts";
import chalk from "../../../../public/static/theme/chalk.json";
export default {data() {return {chartInstance: null,allData: null,showChoice: false, //是否显示可选项choiceType: "map", //显示的后台数据类型(map、seller、commodity等)titleFontSize: 0, //指明标题的字体大小};},computed: {selectType() {if (!this.allData) {return [];} else {return this.allData.type.filter((item) => {return item.key != this.choiceType;});}},showTitle() {if (!this.allData) {return "";} else {return this.allData[this.choiceType].title;}},marginStyle() {return {marginLeft: this.titleFontSize / 2 + "px",};},},mounted() {this.initChart();this.getData();window.addEventListener("resize", this.screenAdapter);this.screenAdapter();},destroyed() {clearInterval(this.timeId);window.removeEventListener("resize", this.screenAdapter);},methods: {// 初始化echartsInstance对象initChart() {ets.registerTheme("chalk", chalk);this.chartInstance = ets.init(this.$refs.trend_ref, "chalk");const initOption = {grid: {left: "3%",top: "35%",right: "4%",bottom: "1%",containLabel: true, //文字在位置范围内},tooltip: {trigger: "axis", //工具提示},legend: { right: 20, top: "15%", icon: "circle" }, //图例位置和形状xAxis: {type: "category",boundaryGap: false, //紧挨边缘},yAxis: {type: "value",},};this.chartInstance.setOption(initOption);},// 获取服务器数据async getData() {const { data: ret } = await this.$http.get("trend");this.allData = ret;this.updateChart();},// 更新图表updateChart() {const colorArr1 = ["rgba(255,151,175,0.5)","rgba(126,248,209,0.5)","rgba(244,247,157,0.5)","rgba(116,201,251,0.5)","rgba(247,199,164,0.5)",]; //半透明颜色值const colorArr2 = ["rgba(255,151,175,0)","rgba(126,248,209,0)","rgba(244,247,157,0)","rgba(116,201,251,0)","rgba(247,199,164,0)",]; //全透明颜色值const timeArr = this.allData.common.month; //类目轴数据const valueArr = this.allData[this.choiceType].data;const seriesArr = valueArr.map((item, index) => {return {name: item.name,type: "line",data: item.data,stack: this.choiceType, //堆叠图areaStyle: {//区域面积、颜色渐变color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: colorArr1[index],},{offset: 1,color: colorArr2[index],},]),},};}); //y轴数据const legendArr = valueArr.map((item) => {return item.name;}); //图例数据const dataOption = {xAxis: {data: timeArr,},legend: {data: legendArr,},series: seriesArr,};this.chartInstance.setOption(dataOption);},// 当浏览器大小发生变化时，会进行分辨率适配screenAdapter() {this.titleFontSize = (this.$refs.trend_ref.offsetWidth / 100) * 3.6;const adapterOption = {legend: {//图例和文字大小适配itemWidth: this.titleFontSize,itemHeight: this.titleFontSize,itemFap: this.titleFontSize,textStyle: {fontSize: this.titleFontSize / 2,},},};this.chartInstance.setOption(adapterOption);this.chartInstance.resize();},handleSelect(currentType) {this.choiceType = currentType;this.updateChart();this.showChoice = false;},},
};
</script>
<style lang='less' scoped>
.title {position: absolute;left: 240px;top: 20px;z-index: 10;color: white;.title-icon {margin-left: 10px;cursor: pointer;}.select-on {background-color: #222733;}
}
</style>

代码讲解：

4.1、切换图表和分辨率适配

(1)、可选项：下拉出现列表，列表过滤掉已选择数据，选中后更新数据，列表消失；

(2)、通过全局变量this.titleFontSize给图例、标题、下拉选择项的字体大小进行设置，视图里的样式适配：fontSize: `${titleFontSize}px`

4.2、UI调整

  坐标轴设置：grid、紧挨边缘：xAxis.boundaryGap、图例位置和形状：legend、区域面积和颜色渐变：itemStyle.color加LinearGradient、工具提示：tooltip；

区域面积颜色渐变原理图：

图例注意事项：

五、(三级分类)饼图

代码如下：

<template><div class="com-container"><div class="com-chart" ref="hot_ref"></div><!-- 左右箭头 --><span class="iconfont arr-left" @click="toLeft" :style="comStyle">&#xe6ef;</span><span class="iconfont arr-right" @click="toRight" :style="comStyle">&#xe6ed;</span><!-- 一级标题 --><span class="cat-name" :style="comStyle">{{ catName }}系列</span></div>
</template>
<script>
import * as ets from "echarts";
import chalk from "../../../../public/static/theme/chalk.json"; //自己下载
export default {data() {return {chartInstance: null,allData: null,currentIndex: 0, //一级分类的下标titleFontSize: 0,};},computed: {catName() {if (!this.allData) {return "";} else {return this.allData[this.currentIndex].name;}},comStyle() {return {fontSize: `${this.titleFontSize}px`,};},},mounted() {this.initChart();this.getData();window.addEventListener("resize", this.screenAdapter);this.screenAdapter();},destroyed() {window.removeEventListener("resize", this.screenAdapter);},methods: {// 初始化echartsInstance对象initChart() {ets.registerTheme("chalk", chalk);this.chartInstance = ets.init(this.$refs.hot_ref, "chalk");const initOption = {title: {text: "▎热销商品销售金额占比统计",left: 20,top: 20,},legend: {//图例位置和文字top: "10%",right: "5%",icon: "cicle",},tooltip: {show: true,formatter: (arg) => {const thirdCategory = arg.data.children;let total = 0;thirdCategory.forEach((item) => {total += item.value;});let retSrt = "";thirdCategory.forEach((item) => {retSrt += `${item.name}:${parseInt((item.value / total) * 100) + "%"}<br/>`;});return retSrt;},}, //划过显示该二级模块对应的三级类别series: [{type: "pie",label: {show: false,},emphasis: {//默认不显示文字，高亮状态下才显示文字label: {show: true,},labelLine: {show: false,},},},],};this.chartInstance.setOption(initOption);},// 获取服务器数据async getData() {const { data: ret } = await this.$http.get("hotproduct");this.allData = ret;this.allData.sort((a, b) => {return b.value - a.value;});this.updateChart();},// 更新图表updateChart() {const legendData = this.allData[this.currentIndex].children.map((item) => {return item.name;});const seriesData = this.allData[this.currentIndex].children.map((item) => {return {name: item.name,value: item.value,children: item.children, //为了在tooltip中的回调函数中拿到对应的三级类别};});const dataOption = {legend: {data: legendData,},series: [{data: seriesData,},],};this.chartInstance.setOption(dataOption);},// 当浏览器大小发生变化时，会进行分辨率适配screenAdapter() {this.titleFontSize = (this.$refs.hot_ref.offsetWidth / 100) * 3.6;const adapterOption = {title: {textStyle: {fontSize: this.titleFontSize,},},legend: {itemWidth: this.titleFontSize / 2,itemHeight: this.titleFontSize / 2,itemGap: this.titleFontSize / 2,textStyle: {fontSize: this.titleFontSize / 2,},},series: [{radius: this.titleFontSize * 4.5,center: ["50%", "50%"],},],};this.chartInstance.setOption(adapterOption);this.chartInstance.resize();},toLeft() {this.currentIndex--;if (this.currentIndex < 0) {this.currentIndex = this.allData.length - 1;}this.updateChart();},toRight() {this.currentIndex++;if (this.currentIndex > this.allData.length - 1) {this.currentIndex = 0;}this.updateChart();},},
};
</script>
<style lang='less' scoped>
.arr-left {position: absolute;left: 20%;top: 50%;transform: translateY(-50%);cursor: pointer;color: white;
}
.arr-right {position: absolute;right: 10%;top: 50%;transform: translateY(-50%);cursor: pointer;color: white;
}
.cat-name {position: absolute;right: 10%;bottom: 10%;color: white;
}
</style>

5.1、数据切换

    左右箭头类似轮播图，依靠currentIndex的变化展示一级类别数据，饼图模块对应二级数据，鼠标划到该模块，会展示三级类别的占比，这个需要在组装数据时将三级数据追加进去

六、圆环饼图

代码如下：

<template><div class="com-container"><div class="com-chart" ref="stock_ref"></div></div>
</template>
<script>
import * as ets from "echarts";
import chalk from "../../../../public/static/theme/chalk.json"; //自己下载
export default {data() {return {chartInstance: null,allData: null,currentIndex: 0, //当前显示的数据timerId: null, //定时器标识};},mounted() {this.initChart();this.getData();window.addEventListener("resize", this.screenAdapter);this.screenAdapter();},destroyed() {window.removeEventListener("resize", this.screenAdapter);clearInterval(this.timerId);},methods: {// 初始化echartsInstance对象initChart() {ets.registerTheme("chalk", chalk);this.chartInstance = ets.init(this.$refs.stock_ref, "chalk");const initOption = {title: {text: "▎库存和销量分析",left: 20,top: 20,},series: [{type: "pie",},],};this.chartInstance.setOption(initOption);this.chartInstance.on("mouseover", () => {clearInterval(this.timerId);});this.chartInstance.on("mouseout", () => {this.startInterval();});},// 获取服务器数据async getData() {const { data: ret } = await this.$http.get("stock");this.allData = ret;this.updateChart();this.startInterval();},// 更新图表updateChart() {const centerArr = [["18%", "40%"],["50%", "40%"],["82%", "40%"],["34%", "75%"],["66%", "75%"],];const colorArr = [["#4FF778", "#0BA82C"],["#E5DD45", "#E8B11C"],["#E8821C", "#E55445"],["#5052EE", "#AB6EE5"],["#23E5E5", "#2E72BF"],];const start = this.currentIndex * 5;const end = (this.currentIndex + 1) * 5;const showData = this.allData.slice(start, end);const seriesArr = showData.map((item, index) => {return {type: "pie",radius: [110, 100],center: centerArr[index],hoverAnimation: false, //关闭鼠标移入到饼图时的动画效果labelLine: {show: false, //隐藏模块指示线},label: {position: "center",color: colorArr[index][0],},data: [{name: item.name + "\n" + item.sales, //圆环内文字value: item.sales,itemStyle: {color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: colorArr[index][0],},{offset: 1,color: colorArr[index][1],},]),},}, //圆环渐变颜色{value: item.stock,itemStyle: {color: "#313743",},},],};});const dataOption = {series: seriesArr,};this.chartInstance.setOption(dataOption);},// 当浏览器大小发生变化时，会进行分辨率适配screenAdapter() {let titleFontSize = (this.$refs.stock_ref.offsetWidth / 100) * 3.6;const innerRadius = titleFontSize * 2;const outterRadius = innerRadius * 1.125;const adapterOption = {title: {textStyle: {fontSize: titleFontSize,},},series: [{type: "pie",radius: [outterRadius, innerRadius],label: {fontSize: titleFontSize / 2,},},{type: "pie",radius: [outterRadius, innerRadius],label: {fontSize: titleFontSize / 2,},},{type: "pie",radius: [outterRadius, innerRadius],label: {fontSize: titleFontSize / 2,},},{type: "pie",radius: [outterRadius, innerRadius],label: {fontSize: titleFontSize / 2,},},{type: "pie",radius: [outterRadius, innerRadius],label: {fontSize: titleFontSize / 2,},},],};this.chartInstance.setOption(adapterOption);this.chartInstance.resize();},startInterval() {if (this.timerId) {clearInterval(this.timerId);}this.timerId = setInterval(() => {this.currentIndex++;if (this.currentIndex > 1) {this.currentIndex = 0;}this.updateChart(); //currentIndex更改后，刷新界面}, 5000);},},
};
</script>

6.1、切换动画

currentIndex标识当前页数，每一页显示5个圆，每5秒更新一次start和end，达到动态切换

UI调整：

hoverAnimation: false, //关闭鼠标移入到饼图时的动画效果

labelLine: {show: false, },//隐藏模块指示线

七、地图+散点图

<template><div class="com-container" @dblclick="revertMap"><div class="com-chart" ref="map_ref"></div></div>
</template>
<script>
import * as ets from "echarts";
import axios from "axios";
import { getProvinceMapInfo } from "@/utils/map_utils";
import chalk from "../../../../public/static/theme/chalk.json"; //自己下载
export default {data() {return {chartInstance: null,allData: null,mapData: {}, //所获取的省份的地图矢量数据};},mounted() {this.initChart();this.getData();window.addEventListener("resize", this.screenAdapter);this.screenAdapter(); //得先主动适配屏幕},destroyed() {window.removeEventListener("resize", this.screenAdapter);},methods: {// 初始化echartsInstance对象async initChart() {ets.registerTheme("chalk", chalk);this.chartInstance = ets.init(this.$refs.map_ref, "chalk");// 使用axios获取本地json数据const res = await axios.get("http://10.52.12.xx:8080/static/map/china.json");this.$echarts.registerMap("china", res.data);const initOption = {title: {text: "▎商家分布",left: 20,top: 20,},geo: {type: "map",map: "china",top: "5%",bottom: "5%",itemStyle: {areaColor: "#2E72BF", //地图颜色borderColor: "#333", //地图分界线颜色},},legend: {left: "5%",bottom: "5%",orient: "vertical", //图例垂直摆放},};this.chartInstance.setOption(initOption);// 监听点击事件、获取所点击省份的矢量地图数据、显示省份、回到中国地图this.chartInstance.on("click", async (arg) => {const provinceInfo = getProvinceMapInfo(arg.name);// 判断当前所点击的这个省份的地图矢量数据在mapData中是否存在if (!this.mapData[provinceInfo.key]) {const ret = await axios.get("http://10.52.12.xx:8080" + provinceInfo.path);this.mapData[provinceInfo.key] = ret.data;this.$echarts.registerMap(provinceInfo.key, ret.data);}const changeOption = {geo: {map: provinceInfo.key,},};this.chartInstance.setOption(changeOption);});},// 回到中国地图revertMap() {const revertOption = {geo: {map: "china",},};this.chartInstance.setOption(revertOption);},async getData() {const { data: ret } = await this.$http.get("map");this.allData = ret;this.updateChart();},// 更新图表updateChart() {// 图例数据const legendArr = this.allData.map((item) => {return item.name;});const seriesArr = this.allData.map((item) => {// 如果想在地图中显示散点数据，需要给散点的图表增加 coordinateSystem: "geo"  配置return {type: "effectScatter",rippleEffect: {scale: 5,brushType: "stroke", //空心涟漪效果},name: item.name,data: item.children,coordinateSystem: "geo",};});const dataOption = {legend: {data: legendArr,},series: seriesArr,};this.chartInstance.setOption(dataOption);},// 当浏览器大小发生变化时，会进行分辨率适配screenAdapter() {const titleFontSize = (this.$refs.map_ref.offsetWidth / 100) * 3.6;const adapterOption = {title: {textStyle: {fontSize: titleFontSize,},},legend: {itemWidth: titleFontSize / 2,itemHeight: titleFontSize / 2,itemGap: titleFontSize / 2, //图例间隔textStyle: {fontSize: titleFontSize / 2,},},};this.chartInstance.setOption(adapterOption);this.chartInstance.resize(); //手动调用图表对象的resize()才能生效},},
};
</script>

7.1、地图上显示散点

在地图上给散点图表增加 coordinateSystem: "geo"  配置

7.2、点击出现单个省份，双击复原

备注：getProvinceMapInfo是将汉字转为省份拼音，以便获取对应的本地省份数据

(1)、监听各个省份的点击事件，获取对应的arg.name(汉字)；

(2)、根据getProvinceMapInfo()获取所点击省份的矢量地图数据，用mapData存下以获取数据，减少请求的二次发送；

(3)、根据this.$echarts.registerMap(“省份名”, "省份数据”)显示省份和对应的数据

(4)、双击页面，通过重新注册"china",回到中国地图。

下篇将分享全屏切换、实时监测【WebSocket】等功能。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/31682.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

使用Tkinter创建带查找功能的文本编辑器

使用Tkinter创建带查找功能的文本编辑器

使用Tkinter创建带查找功能的文本编辑器 介绍效果代码解析创建主窗口添加菜单栏实现文件操作实现查找 完整代码 介绍 在这篇博客中&#xff0c;我将分享如何使用Python的Tkinter库创建一个带有查找功能的简单文本编辑器。 效果 代码解析 创建主窗口 import tkinter as tkcl…
阅读更多...
Offset Explorer 连接SASL PLAIN鉴权的Kafka

Offset Explorer 连接SASL PLAIN鉴权的Kafka

1、填写Kafka信息 2、配置鉴权信息 Security 选择 SASL PLAINTEXT JAAS Config 配置账号密码 org.apache.kafka.common.security.plain.PlainLoginModule required username"账号"password"密码";
阅读更多...
[Vulnhub] Troll FTP匿名登录+定时任务权限提升

[Vulnhub] Troll FTP匿名登录+定时任务权限提升

信息收集 IP AddressPorts Opening192.168.8.104TCP:21,22,80 $ nmap -sC -sV 192.168.8.104 -p- --min-rate 1000 Nmap scan report for 192.168.8.104 (192.168.8.104) Host is up (0.0042s latency). Not shown: 65532 closed tcp ports (conn-refused) PORT STATE SER…
阅读更多...
openh264 宏块级码率控制源码分析

openh264 宏块级码率控制源码分析

openh264 宏块级码率控制函数关系 宏块级核心函数分析 WelsRcMbInitGom函数 功能&#xff1a;openh264 码率控制框架中宏块级码率控制函数&#xff0c;根据是否启用GOM QP来决定如何设置宏块的QP值&#xff0c;以控制编码的质量和比特率。原理过程&#xff1a; 函数参数&…
阅读更多...
“打造智能售货机系统，基于ruoyi微服务版本开源项目“

“打造智能售货机系统，基于ruoyi微服务版本开源项目“

目录 # 开篇 售货机术语 1. 表设计说明 2. 页面展示 2.1 区域管理页面 2.2 合作商管理页面 2.3 点位管理页面 3. 建表资源 3.1 创建表的 SQL 语句&#xff08;包含字段备注&#xff09; 1. Region 表 2. Node 表 3. Partner 表 4. 创建 tb_vending_machine 表的 S…
阅读更多...
【启明智显产品介绍】Model3C工业级HMI芯片详解专题（一）芯片性能

【启明智显产品介绍】Model3C工业级HMI芯片详解专题（一）芯片性能

【启明智显产品介绍】工业级HMI芯片Model3C详解&#xff08;一&#xff09;芯片性能 Model3C 是一款基于 RISC-V 的高性能、国产自主、工业级高清显示与智能控制 MCU&#xff0c;配置平头哥E907&#xff0c;主频400MHz&#xff0c;强大的 2D 图形加速处理器、PNG/JPEG 解码引擎…
阅读更多...
【Conda】修改 Conda 默认的虚拟环境位置

【Conda】修改 Conda 默认的虚拟环境位置

文章目录 问题描述分析与解决查看默认安装位置修改 .condarc 文件修改权限 参考资料 问题描述 Conda 的虚拟环境默认安装在 C 盘。时间久了&#xff0c;C 盘上的内存会被大量占用&#xff0c;影响电脑性能。于是想到修改虚拟环境的默认存放位置&#xff0c;改到自定义的位置。…
阅读更多...
找不到d3dx9_43.dll无法继续执行代码的几种解决方法

找不到d3dx9_43.dll无法继续执行代码的几种解决方法

在工作或生活使用电脑都会遇到丢失dll文件应用无法启动的情况&#xff0c;比如你安装完一款你最喜欢的游戏在启动的时候提示系统缺少d3dx9_39.dll、d3dx9_40.dll、d3dx9_41.dll、d3dx9_42.dll、d3dx9_43.dll、xinput1_3.dll 文件而无法正常游戏&#xff0c;或你在工作的时候安装…
阅读更多...
分享HTML显示2D/3D时间

分享HTML显示2D/3D时间

效果截图 实现代码 <!DOCTYPE html> <head> <title>three.jscannon.js Web 3D</title><meta charset"utf-8"><meta name"viewport" content"widthdevice-width,initial-scale1,maximum-scale1"><meta n…
阅读更多...
图神经网络学习笔记

图神经网络学习笔记

文章目录 一、图神经网络应用领域分析二、图基本模块定义三、邻接矩阵的定义四、GNN中常见任务五、消息传递计算方法六、多层GCN的作用七、GCN基本模型概述八、图卷积的基本计算方法九、邻接的矩阵的变换十、GCN变换原理解读 本笔记参考自b站up主小巴只爱学习的图神经网络教程 …
阅读更多...
创建OpenWRT虚拟机

创建OpenWRT虚拟机

环境&#xff1a;Ubuntu 2204&#xff0c;VM VirtualBox 7.0.18 安装必备软件包&#xff1a; sudo apt update sudo apt install subversion automake make cmake uuid-dev gcc vim build-essential clang flex bison g gawk gcc-multilib g-multilib gettext git libncurses…
阅读更多...
C语言中操作符详解（一）

C语言中操作符详解（一）

众所周知&#xff0c;在我们的C语言中有着各式各样的操作符&#xff0c;并且在此之前呢&#xff0c;我们已经认识并运用了许许多多的操作符&#xff0c;都是诸君的老朋友了昂 操作符作为我们使用C语言的一个非常非常非常重要的工具&#xff0c;诸君一定要加以重视&#xff0c;…
阅读更多...
大模型如何改变世界？李彦宏：未来至少一半人要学会“提问题“

大模型如何改变世界？李彦宏：未来至少一半人要学会“提问题“

2023年爆火的大模型&#xff0c;对我们来说意味着什么&#xff1f; 百度创始人、董事长兼CEO李彦宏认为&#xff0c;“大模型即将改变世界。” 5月26日&#xff0c;李彦宏参加了在北京举办的2023中关村论坛&#xff0c;发表了题为《大模型改变世界》的演讲。李彦宏认为&#…
阅读更多...
为什么我在 PostgreSQL 中 Commit 很慢？

为什么我在 PostgreSQL 中 Commit 很慢？

有时&#xff0c;我们的一位客户会查看数据库中最耗时的语句&#xff08;使用pg_stat_statements或pgBadger&#xff09;&#xff0c;并发现COMMIT排名靠前。通常&#xff0c;COMMIT这是 PostgreSQL 中非常快的语句&#xff0c;因此值得研究。在本文中&#xff0c;我将探讨速度…
阅读更多...
Go微服务: redis分布式锁在集群中可能遇到的问题及其解决方案

Go微服务: redis分布式锁在集群中可能遇到的问题及其解决方案

概述 我们的 redis 一般都是集群来给我们程序提供服务的&#xff0c;单体的redis现在也不多见 看到上面是主节点redis和下面是6个重节点redis&#xff0c;主节点和重节点的通讯都是畅通没问题的这个时候&#xff0c;我们有 gorouting 写我们的数据&#xff0c;那它就会用到我们…
阅读更多...
(Python)可变类型不可变类型；引用传递值传递；浅拷贝深拷贝

(Python)可变类型不可变类型；引用传递值传递；浅拷贝深拷贝

从一段代码开始说事&#xff0c;先上代码&#xff1a; a [[1],[2],[3]] b [[4,5],[6,7],[7,8]] for i,j in zip(a,b):print(i,j)i [9]#i[0] 8j[:2][1,2]print(i, j) print(a) print(b) 运行的结果&#xff1a; [1] [4, 5] [9] [1, 2] [2] [6, 7] [9] [1, 2] [3] [7, 8] …
阅读更多...
Homebrew使用

Homebrew使用

官网&#xff1a;https://brew.sh/ 安装&#xff1a; 简介&#xff1a;https://www.jianshu.com/p/f4c9cf0733ea 比如&#xff0c;安装maven: 1、brew install maven 2、查看安装路径&#xff1a;brew list maven 具体参考&#xff1a;https://blog.csdn.net/m0_67402970/arti…
阅读更多...
MPLS-LDP（个人学习笔记）

MPLS-LDP（个人学习笔记）

定义 标签分发协议LDP&#xff08;Label Distribution Protocol&#xff09;是多协议标签交换MPLS的一种控制协议&#xff0c;负责转发等价类FEC的分类、标签的分配以及标签交换路径LSP的建立和维护等操作。LDP规定了标签分发过程中的各种消息以及相关处理过程 术语 LDP会话&a…
阅读更多...
【尚庭公寓SpringBoot + Vue 项目实战】移动端找房功能（二十一）

【尚庭公寓SpringBoot + Vue 项目实战】移动端找房功能（二十一）

【尚庭公寓SpringBoot Vue 项目实战】移动端找房功能&#xff08;二十一&#xff09; 文章目录 【尚庭公寓SpringBoot Vue 项目实战】移动端找房功能&#xff08;二十一&#xff09;1、业务介绍2、接口开发2.1、地区信息2.2、获取全部支付方式列表2.3、房间信息2.2.1. 根据条…
阅读更多...
python基础1.1-格式化输出（%用法和format用法）

python基础1.1-格式化输出（%用法和format用法）

目录 %用法 format用法 %用法 1、整数的输出 %o —— oct 八进制 %d —— dec 十进制 %x —— hex 十六进制 1 >>> print(%o % 20) 2 24 3 >>> print(%d % 20) 4 20 5 >>> print(%x % 20) 6 142、浮点数输出 &#xff08;1&#xff09;格式化…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023