echart 柱状图bar渐变金属效果
{
backgroundColor:"#000a3f",
tooltip: {
trigger: "item",
},
grid: {
left: "5%",
top: "10%",
right: "5%",
bottom: "10%",
},
legend: {
show: true,
icon: "circle",
orient: "horizontal", //横向排列
top: "90.5%",
right: "center",
itemWidth: 16.5,
itemHeight: 6,
// itemGap: 30,
textStyle: {
// color: '#FFFFFF'
color: "#C9C8CD",
fontSize: 14,
},
},
xAxis: [
{
data: [
"监测中心站",
"调查中心",
"核与辐射安全中心",
"宣传教育中心",
],
axisLabel: {
textStyle: {
color: "#38455D",
fontSize: 12,
},
margin: 30, //刻度标签与轴线之间的距离。
},
axisLine: {
show: true, //不显示x轴
lineStyle: {
color: "#E2E8EC",
},
},
axisTick: {
show: false, //不显示刻度
},
boundaryGap: true,
splitLine: {
show: false,
width: 0.08,
lineStyle: {
type: "solid",
color: "#03202E",
},
},
},
],
yAxis: [
{
splitLine: {
show: true,
lineStyle: {
color: "#E2E8EC",
type: "dashed",
},
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#E2E8EC",
},
},
axisLabel: {
textStyle: {
color: "#38455D",
fontSize: 12,
},
},
},
],
series: [
{
//柱底圆片
name: "",
type: "pictorialBar",
symbolSize: [60, 20], //调整截面形状
symbolOffset: [0, 10],
z: 12,
itemStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 1,
y2: 0,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: "#D6BE2B",
},
{
offset: 0.25,
color: "#FAEB1C",
},
{
offset: 0.5,
color: "#F7D116",
},
{
offset: 0.75,
color: "#DAB21C",
},
{
offset: 1,
color: "#E0C424",
},
],
},
},
},
data: ["50", "75", "105", "130"],
},
//柱体
{
name: "",
type: "bar",
barWidth: 60,
barGap: "0%",
itemStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 1,
y2: 0,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: "#D6BE2B",
},
{
offset: 0.25,
color: "#FAEB1C",
},
{
offset: 0.5,
color: "#F7D116",
},
{
offset: 0.75,
color: "#DAB21C",
},
{
offset: 1,
color: "#E0C424",
},
],
},
},
},
data: ["50", "75", "105", "130"],
},
//柱顶圆片
{
name: "",
type: "pictorialBar",
symbolSize: [60, 20], //调整截面形状
symbolOffset: [0, -10],
z: 12,
symbolPosition: "end",
itemStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 1,
y2: 0,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: "#D6BE2B",
},
{
offset: 0.25,
color: "#FAEB1C",
},
{
offset: 0.5,
color: "#F7D116",
},
{
offset: 0.75,
color: "#DAB21C",
},
{
offset: 1,
color: "#E0C424",
},
],
},
},
},
data: ["50", "75", "105", "130"],
},
],
}
参考： https://www.isqqw.com/echartsdetail?id=16616
3D饼图
<template>
<div ref="chartBox" style="height: 100%; width: 100%"></div>
</template>
<script>
import labelBg from '../img/decy.png';
import * as echarts from "echarts";
import "echarts-gl";
export default {
data() {
return {
labelBg
}
},
mounted() {
this.myChart = echarts.init(this.$refs.chartBox);
this.setChartOption();
},
methods: {
setChartOption(data = []) {
data = [
{
name: "林地面积统计",
value: 10000,
itemStyle: {
// color: "#22c4ff",
color: 'rgba(68,94,205, 0.5)'
},
},
{
name: "草地面积统计",
value: 12116,
itemStyle: {
// color: "#aaff00",
color: 'rgba(73,156,186, 0.5)'
},
},
{
name: "耕地地面积统计",
value: 16616,
itemStyle: {
// color: "#ffaaff",
color: 'rgba(203,152,76,0.5)'
},
},
];
let option = this.getPie3D(data, 0.8);
option.series.push({
name: "pie2d",
type: "pie",
labelLine: {
length: 60,
length2: 80,
},
startAngle: -20, //起始角度，支持范围[0, 360]。
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: ["20%", "50%"],
center: ["50%", "50%"],
data: data,
itemStyle: {
opacity: 0,
},
});
this.myChart.setOption(option);
},
getPie3D(pieData, internalDiameterRatio) {
//internalDiameterRatio:透明的空心占比
let that = this;
let series = [];
let sumValue = 0;
let startValue = 0;
let endValue = 0;
let legendData = [];
let legendBfb = [];
let k = 1 - internalDiameterRatio;
pieData.sort((a, b) => {
return b.value - a.value;
});
// 为每一个饼图数据，生成一个 series-surface 配置
for (let i = 0; i < pieData.length; i++) {
sumValue += pieData[i].value;
let seriesItem = {
name:
typeof pieData[i].name === "undefined"
? `series${i}`
: pieData[i].name,
type: "surface",
parametric: true,
wireframe: {
show: false,
},
pieData: pieData[i],
pieStatus: {
selected: false,
hovered: false,
k: k,
},
center: ["10%", "50%"],
};
if (typeof pieData[i].itemStyle != "undefined") {
let itemStyle = {};
typeof pieData[i].itemStyle.color != "undefined"
? (itemStyle.color = pieData[i].itemStyle.color)
: null;
typeof pieData[i].itemStyle.opacity != "undefined"
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
: null;
seriesItem.itemStyle = itemStyle;
}
series.push(seriesItem);
}
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
legendData = [];
legendBfb = [];
for (let i = 0; i < series.length; i++) {
endValue = startValue + series[i].pieData.value;
series[i].pieData.startRatio = startValue / sumValue;
series[i].pieData.endRatio = endValue / sumValue;
series[i].parametricEquation = this.getParametricEquation(
series[i].pieData.startRatio,
series[i].pieData.endRatio,
false,
false,
k,
series[i].pieData.value
);
startValue = endValue;
let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
legendData.push({
name: series[i].name,
value: bfb,
});
legendBfb.push({
name: series[i].name,
value: bfb,
});
}
let boxHeight = this.getHeight3D(series, 26); //通过传参设定3d饼/环的高度，26代表26px
// 准备待返回的配置项，把准备好的 legendData、series 传入。
let option = {
legend: {
data: legendData,
orient: "horizontal",
left: 10,
top: 10,
itemGap: 10,
textStyle: {
color: "#A1E2FF",
},
show: true,
icon: "circle",
formatter: function (param) {
let item = legendBfb.filter((item) => item.name == param)[0];
let bfs = that.fomatFloat(item.value * 100, 2) + "%";
return `${item.name} ${bfs}`;
},
},
// labelLine: {
// show: true,
// lineStyle: {
// color: "#7BC0CB",
// },
// },
// labelLine: {
// normal: {
// lineStyle: {
// color: '#00fff6'
// },
// }
// },
label: {
backgroundColor: {
image: labelBg,
height: 104,
},
padding: [19, 90, 11, 18],
show: true,
position: "outside",
rich: {
b: {
color: "#7BC0CB",
fontSize: 12,
lineHeight: 20,
},
c: {
fontSize: 16,
},
abg: {
// height: 104,
// borderRadius: [4, 4, 0, 0]
}
},
formatter: '{b|{b}} {abg| \n} {c|{c}}{b| 亩}'
// formatter: '{b|{b}} {c|{c}}{b| 亩}'
// formatter: (params) => {
// // return [`{abg| } {b|{b}}`, '{b|{b}} {c|{c}}{b| 亩}']
// return '{b|{b}} {c|{c}}{b| 亩}'
// }
// formatter: "<div>sss</div>",
},
tooltip: {
show: false,
},
xAxis3D: {
min: -1,
max: 1,
},
yAxis3D: {
min: -1,
max: 1,
},
zAxis3D: {
min: -1,
max: 1,
},
grid3D: {
show: false,
boxHeight: boxHeight, //圆环的高度
viewControl: {
//3d效果可以放大、旋转等，请自己去查看官方配置
alpha: 40, //角度
distance: 300, //调整视角到主体的距离，类似调整zoom
rotateSensitivity: 0, //设置为0无法旋转
zoomSensitivity: 0, //设置为0无法缩放
panSensitivity: 0, //设置为0无法平移
autoRotate: false, //自动旋转
},
},
series: series,
};
return option;
},
//获取3d丙图的最高扇区的高度
getHeight3D(series, height) {
series.sort((a, b) => {
return b.pieData.value - a.pieData.value;
});
return (height * 25) / series[0].pieData.value;
},
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
// 计算
let midRatio = (startRatio + endRatio) / 2;
let startRadian = startRatio * Math.PI * 2;
let endRadian = endRatio * Math.PI * 2;
let midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形，则不实现选中效果。
if (startRatio === 0 && endRatio === 1) {
isSelected = false;
}
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
k = typeof k !== "undefined" ? k : 1 / 3;
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
// 计算高亮效果的放大比例（未高亮，则比例为 1）
let hoverRate = isHovered ? 1.05 : 1;
// 返回曲面参数方程
return {
u: {
min: -Math.PI,
max: Math.PI * 3,
step: Math.PI / 32,
},
v: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20,
},
x: function (u, v) {
if (u < startRadian) {
return (
offsetX +
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
if (u > endRadian) {
return (
offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
},
y: function (u, v) {
if (u < startRadian) {
return (
offsetY +
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
if (u > endRadian) {
return (
offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
);
}
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
},
z: function (u, v) {
if (u < -Math.PI * 0.5) {
return Math.sin(u);
}
if (u > Math.PI * 2.5) {
return Math.sin(u) * h * 0.1;
}
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
},
};
},
fomatFloat(num, n) {
var f = parseFloat(num);
if (isNaN(f)) {
return false;
}
f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
var s = f.toString();
var rs = s.indexOf(".");
//判定如果是整数，增加小数点再补0
if (rs < 0) {
rs = s.length;
s += ".";
}
while (s.length <= rs + n) {
s += "0";
}
return s;
},
bindListen(myChart) {
// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
let that = this;
let selectedIndex = "";
let hoveredIndex = "";
// 监听点击事件，实现选中效果（单选）
myChart.on("click", function (params) {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
let isSelected =
!that.option.series[params.seriesIndex].pieStatus.selected;
let isHovered =
that.option.series[params.seriesIndex].pieStatus.hovered;
let k = that.option.series[params.seriesIndex].pieStatus.k;
let startRatio =
that.option.series[params.seriesIndex].pieData.startRatio;
let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
// 如果之前选中过其他扇形，将其取消选中（对 option 更新）
if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
that.option.series[selectedIndex].parametricEquation =
that.getParametricEquation(
that.option.series[selectedIndex].pieData.startRatio,
that.option.series[selectedIndex].pieData.endRatio,
false,
false,
k,
that.option.series[selectedIndex].pieData.value
);
that.option.series[selectedIndex].pieStatus.selected = false;
}
// 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
that.option.series[params.seriesIndex].parametricEquation =
that.getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
that.option.series[params.seriesIndex].pieData.value
);
that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
// 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
isSelected ? (selectedIndex = params.seriesIndex) : null;
// 使用更新后的 option，渲染图表
myChart.setOption(that.option);
});
// 监听 mouseover，近似实现高亮（放大）效果
myChart.on("mouseover", function (params) {
// 准备重新渲染扇形所需的参数
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
// 如果触发 mouseover 的扇形当前已高亮，则不做操作
if (hoveredIndex === params.seriesIndex) {
return;
// 否则进行高亮及必要的取消高亮操作
} else {
// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
if (hoveredIndex !== "") {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
isSelected = that.option.series[hoveredIndex].pieStatus.selected;
isHovered = false;
startRatio = that.option.series[hoveredIndex].pieData.startRatio;
endRatio = that.option.series[hoveredIndex].pieData.endRatio;
k = that.option.series[hoveredIndex].pieStatus.k;
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
that.option.series[hoveredIndex].parametricEquation =
that.getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
that.option.series[hoveredIndex].pieData.value
);
that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = "";
}
// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "pie2d"
) {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected =
that.option.series[params.seriesIndex].pieStatus.selected;
isHovered = true;
startRatio =
that.option.series[params.seriesIndex].pieData.startRatio;
endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
k = that.option.series[params.seriesIndex].pieStatus.k;
// 对当前点击的扇形，执行高亮操作（对 option 更新）
that.option.series[params.seriesIndex].parametricEquation =
that.getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
that.option.series[params.seriesIndex].pieData.value + 5
);
that.option.series[params.seriesIndex].pieStatus.hovered =
isHovered;
// 记录上次高亮的扇形对应的系列号 seriesIndex
hoveredIndex = params.seriesIndex;
}
// 使用更新后的 option，渲染图表
myChart.setOption(that.option);
}
});
// 修正取消高亮失败的 bug
myChart.on("globalout", function () {
// 准备重新渲染扇形所需的参数
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
if (hoveredIndex !== "") {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected = that.option.series[hoveredIndex].pieStatus.selected;
isHovered = false;
k = that.option.series[hoveredIndex].pieStatus.k;
startRatio = that.option.series[hoveredIndex].pieData.startRatio;
endRatio = that.option.series[hoveredIndex].pieData.endRatio;
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
that.option.series[hoveredIndex].parametricEquation =
that.getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
that.option.series[hoveredIndex].pieData.value
);
that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = "";
}
// 使用更新后的 option，渲染图表
myChart.setOption(that.option);
});
},
},
};
</script>
参考地址：https://www.cnblogs.com/houxianzhou/p/14807675.html
echart， 地图叠加自动选择
var uploadedDataURL = '/asset/get/s/data-1640589484383-TgctXdaF8.png';
var mapName = 'china';
var data = [
{ name: '天津', value: 4075 },
{ name: '湖北', value: 500 },
{ name: '湖南', value: 3212 },
{ name: '江西', value: 5000 },
{ name: '甘肃', value: 550 },
{ name: '浙江', value: 1233 },
];
var geoCoordMap = {};
/*获取地图数据*/
var mapFeatures = echarts.getMap(mapName).geoJson.features;
mapFeatures.forEach(function (item) {
// 地区名称
var name = item.properties.name;
// 地区经纬度
geoCoordMap[name] = item.properties.cp;
});
var max = 4000;
var pointData = []
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
pointData.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
option = {
aspectScale: 1.5,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
// show: true,
right: '10%',
top: 5,
bottom: '10%',
left: '10%',
},
geo: [
{
map: mapName,
zlevel: -1,
zoom: 1.0,
silent: true,
layoutCenter: ['50%', '50%'],
layoutSize: '100%',
roam: false,
itemStyle: {
normal: {
borderColor: 'rgba(192,245,249,.8)',
borderWidth: 3,
shadowColor: '#6FFDFF',
shadowOffsetY: 0,
shadowBlur: 10,
// areaColor: 'rgba(29,85,139,.6)',
},
},
label: {
normal: {
//静态的时候展示样式
show: false, //是否显示地图省份得名称
textStyle: {
color: '#fff',
fontSize: 12,
fontFamily: 'Arial',
},
},
emphasis: {
//动态展示的样式
show: false,
color: '#fff',
},
},
},
{
show: true,
map: mapName,
zoom: 1.0,
layoutCenter: ['50%', '50%'],
layoutSize: '100%',
label: {
normal: {
//静态的时候展示样式
show: false, //是否显示地图省份得名称
textStyle: {
color: '#fff',
fontSize: 12,
fontFamily: 'Arial',
},
},
emphasis: {
//动态展示的样式
color: '#fff',
},
},
blur: {
label: { show: true, color: '#000' },
},
roam: false, // 是否开启鼠标滚轮缩放
itemStyle: {
normal: {
label: {
show: true,
color: '#fff',
},
color: '#fff',
borderColor: '#32CBE0',
borderWidth: 1.5,
areaColor: {
type: 'linear-gradient',
x: 0,
y: 1000,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0.5,
color: '#0D59C1', // 0% 处的颜色
},
{
offset: 1,
color: '#53C9C7', // 100% 处的颜色
},
],
global: true, // 缺省为 false
},
},
emphasis: {
label: {
show: true,
color: '#fff',
},
borderWidth: 3,
borderColor: 'rgba(255, 230, 175,0.8)',
shadowColor: 'rgba(255, 230, 175,0.5)',
shadowBlur: 30,
textStyle: {
color: '#fff',
fontSize: 12,
backgroundColor: 'transparent',
},
areaColor: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#1cfbfe',
},
{
offset: 1,
color: '#3348e7',
},
],
false
),
},
},
},
{
type: 'map',
map: mapName,
zlevel: -2,
zoom: 1.0,
layoutCenter: ['50%', '51.4%'],
layoutSize: '100%',
roam: false,
silent: true,
itemStyle: {
normal: {
borderColor: 'rgba(35, 161, 184,0.5)',
shadowColor: 'rgba(35, 161, 184,0.8)',
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: '#257AB2',
},
},
},
{
type: 'map',
map: mapName,
zlevel: -3,
zoom: 1.0,
layoutCenter: ['50%', '52.4%'],
layoutSize: '100%',
roam: false,
silent: true,
itemStyle: {
normal: {
borderColor: 'rgba(7, 65, 117,0.5)',
shadowColor: 'rgba(7, 65, 117,0.8)',
shadowOffsetY: 15,
shadowBlur: 8,
areaColor: '#0A2763',
},
},
},
],
series: [
{
type: 'map',
layoutCenter: ['50%', '50%'],
layoutSize: '100%',
label: {
normal: {
//静态的时候展示样式
show: false, //是否显示地图省份得名称
textStyle: {
color: '#fff',
fontSize: 12,
},
},
emphasis: {
//动态展示的样式
color: '#fff',
},
},
// geoIndex: 0,
map: mapName,
tooltip: {
trigger: 'item',
backgroundColor: 'transparent',
borderColor: 'transparent',
extraCssText: 'z-index:100;color:#fff;',
confine: true, //是否将 tooltip 框限制在图表的区域内
formatter: function (params, ticket, callback) {
//根据业务自己拓展要显示的内容
var res = '';
var name = params.name;
var count = params.value ? params.value : 0;
res = `<div style="box-shadow: 0 0 10px #3BD9D9; padding: 10px; position: absolute; top: 0; left:0; border-radius: 4px; border: 1px solid #04b9ff; background: linear-gradient(to bottom, #51bfd4 0%,rgba(35,90,178,.8) 100%);">
<div style='color:#F4BD59; font-size: 14px;'>${name}</div>
<div style="display: flex; align-items: center;padding-top: 6px;">
<div style="height: 6px; width: 6px; border-radius: 50%; background:#F4BD59; margin-right: 10px;"></div> <span style='color:#fff;font-size: 12px;margin-right: 20px;'>tooltip</span><span style="font-size: 12px;font-family: 'PangMenZhengDao'">${count}</span>
</div>
</div>`;
return res;
},
},
itemStyle: {
normal: {
label: {
show: true,
color: '#fff',
},
color: '#fff',
borderColor: '#32CBE0',
borderWidth: 1.5,
areaColor: {
type: 'linear-gradient',
x: 0,
y: 1000,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0.5,
color: '#0D59C1', // 0% 处的颜色
},
{
offset: 1,
color: '#53C9C7', // 100% 处的颜色
},
],
global: true, // 缺省为 false
},
},
emphasis: {
label: {
show: true,
color: '#fff',
},
borderWidth: 3,
borderColor: 'rgba(255, 230, 175,0.8)',
shadowColor: 'rgba(255, 230, 175,0.5)',
shadowBlur: 30,
textStyle: {
color: '#fff',
fontSize: 12,
backgroundColor: 'transparent',
},
areaColor: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#1cfbfe',
},
{
offset: 1,
color: '#3348e7',
},
],
false
),
},
},
data: data,
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
brushType: 'fill',
},
label: {
show: true,
color: '#fff',
formatter: function (obj) {
return obj.name;
},
},
symbolSize: function (val) {
var value = val[2];
if (value < max) {
return 15;
}
return 20;
},
showEffectOn: 'render', //加载完毕显示特效
itemStyle: {
normal: {
color: '#FEBE13', // 圆点的颜色
shadowBlur: 10,
shadowColor: '#333',
},
},
zlevel: 6,
data: pointData,
},
{
type: 'custom',
coordinateSystem: 'geo',
renderItem: function (params, api) {
//具体实现自定义图标的方法
return {
type: 'image',
style: {
image: uploadedDataURL, // 自定义的图片地址
x:
api.coord([pointData[params.dataIndex].value[0], pointData[params.dataIndex].value[1]])[0] -
6, // 数据的设置
y:
api.coord([pointData[params.dataIndex].value[0], pointData[params.dataIndex].value[1]])[1] -
34,
},
};
},
zlevel: 10,
data: pointData,
},
],
};
var count = 0;
var timer = null;
var dataLength = option.series[0].data.length;
timer && clearInterval(timer);
timer = setInterval(() => {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: count % dataLength,
});
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: count % dataLength,
});
count++;
}, 3000);
myChart.on('mouseover', function (params) {
clearInterval(timer);
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: params.dataIndex,
});
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: params.dataIndex,
});
});
myChart.on('mouseout', function (params) {
timer && clearInterval(timer);
timer = setInterval(function () {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: count % dataLength,
});
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: count % dataLength,
});
count++;
}, 3000);
});
var uploadedDataURL = '/asset/get/s/data-1640589484383-TgctXdaF8.png';
var mapName = 'china';
var data = [
{ name: '天津', value: 4075 },
{ name: '湖北', value: 500 },
{ name: '湖南', value: 3212 },
{ name: '江西', value: 5000 },
{ name: '甘肃', value: 550 },
{ name: '浙江', value: 1233 },
];
var geoCoordMap = {};
/*获取地图数据*/
var mapFeatures = echarts.getMap(mapName).geoJson.features;
mapFeatures.forEach(function (item) {
// 地区名称
var name = item.properties.name;
// 地区经纬度
geoCoordMap[name] = item.properties.cp;
});
var max = 4000;
var pointData = []
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
pointData.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
// show: true,
right: '10%',
top: 5,
bottom: '10%',
left: '10%',
},
geo: [
{
type: 'map',
map: mapName,
zlevel: -3,
zoom: 1.0,
layoutCenter: ['50%', '50.8%'],
layoutSize: '100%',
roam: false,
silent: true,
itemStyle: {
normal: {
borderColor: 'rgba(7, 65, 117,0.5)',
// shadowColor: 'rgba(32,57,200,0.8)',
shadowColor: 'rgba(42,83,251,0.8)',
shadowOffsetY: 10,
shadowBlur: 1,
areaColor: 'rgba(32,57,200,1)',
},
},
},
],
series: [
{
type: 'map',
layoutCenter: ['50%', '50%'],
layoutSize: '100%',
label: {
normal: {
//静态的时候展示样式
show: false, //是否显示地图省份得名称
textStyle: {
color: '#fff',
fontSize: 12,
},
},
emphasis: {
//动态展示的样式
color: '#fff',
},
},
// geoIndex: 0,
map: mapName,
tooltip: {
trigger: 'item',
backgroundColor: 'transparent',
borderColor: 'transparent',
extraCssText: 'z-index:100;color:#fff;',
confine: true, //是否将 tooltip 框限制在图表的区域内
formatter: function (params, ticket, callback) {
//根据业务自己拓展要显示的内容
var res = '';
var name = params.name;
var count = params.value ? params.value : 0;
res = `<div style="box-shadow: 0 0 10px #3BD9D9; padding: 10px; position: absolute; top: 0; left:0; border-radius: 4px; border: 1px solid #04b9ff; background: linear-gradient(to bottom, #51bfd4 0%,rgba(35,90,178,.8) 100%);">
<div style='color:#F4BD59; font-size: 14px;'>${name}</div>
<div style="display: flex; align-items: center;padding-top: 6px;">
<div style="height: 6px; width: 6px; border-radius: 50%; background:#F4BD59; margin-right: 10px;"></div> <span style='color:#fff;font-size: 12px;margin-right: 20px;'>tooltip</span><span style="font-size: 12px;font-family: 'PangMenZhengDao'">${count}</span>
</div>
</div>`;
return res;
},
},
itemStyle: {
normal: {
label: {
show: true,
color: '#fff',
},
color: '#fff',
borderColor: '#32CBE0',
borderWidth: 1.5,
areaColor: {
type: 'linear-gradient',
x: 0,
y: 1000,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0.5,
color: '#0D59C1', // 0% 处的颜色
},
{
offset: 1,
color: '#53C9C7', // 100% 处的颜色
},
],
global: true, // 缺省为 false
},
},
emphasis: {
label: {
show: true,
color: '#fff',
},
borderWidth: 3,
borderColor: 'rgba(255, 230, 175,0.8)',
shadowColor: 'rgba(255, 230, 175,0.5)',
shadowBlur: 30,
textStyle: {
color: '#fff',
fontSize: 12,
backgroundColor: 'transparent',
},
areaColor: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#1cfbfe',
},
{
offset: 1,
color: '#3348e7',
},
],
false
),
},
},
data: data,
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
brushType: 'fill',
},
label: {
show: true,
color: '#fff',
formatter: function (obj) {
return obj.name;
},
},
symbolSize: function (val) {
var value = val[2];
if (value < max) {
return 15;
}
return 20;
},
showEffectOn: 'render', //加载完毕显示特效
itemStyle: {
normal: {
color: '#FEBE13', // 圆点的颜色
shadowBlur: 10,
shadowColor: '#333',
},
},
zlevel: 6,
data: pointData,
},
{
type: 'custom',
coordinateSystem: 'geo',
renderItem: function (params, api) {
//具体实现自定义图标的方法
return {
type: 'image',
style: {
image: uploadedDataURL, // 自定义的图片地址
x:
api.coord([pointData[params.dataIndex].value[0], pointData[params.dataIndex].value[1]])[0] -
6, // 数据的设置
y:
api.coord([pointData[params.dataIndex].value[0], pointData[params.dataIndex].value[1]])[1] -
34,
},
};
},
zlevel: 10,
data: pointData,
},
],
};
var count = 0;
var timer = null;
var dataLength = option.series[0].data.length;
timer && clearInterval(timer);
timer = setInterval(() => {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: count % dataLength,
});
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: count % dataLength,
});
count++;
}, 3000);
myChart.on('mouseover', function (params) {
clearInterval(timer);
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: params.dataIndex,
});
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: params.dataIndex,
});
});
myChart.on('mouseout', function (params) {
timer && clearInterval(timer);
timer = setInterval(function () {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
});
myChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: count % dataLength,
});
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: count % dataLength,
});
count++;
}, 3000);
});
源地址链接： https://www.isqqw.com/echartsdetail?id=15245
手动写switch
<style>
.switch-box{
cursor: pointer;
}
.switch-box input{
display: none;
}
.switch-box input[type=checkbox]:checked + .switch-bg{
background-color: #1988D3;
}
.switch-box .switch-bg{
display: inline-block;
width: 40px;
height: 20px;
background-color: #999;
position: relative;
border-radius: 10px;
}
.switch-box .switch-text{
display: inline-block;
color: #fff;
font-size: 14px;
line-height: 20px;
/* vertical-align: top; */
position: absolute;
top: 0;
}
.switch-true{
left: 2px;
}
.switch-box .switch-false {
right: 2px;
}
.switch-box .switch-bg::after{
content: '';
position: absolute;
display: inline-block;
width: 20px;
height: 20px;
background-color: #fff;
z-index: 999;
border-radius: 10px;
left: 1px;
animation: subTrueR .5s backwards;
}
.switch-box input[type=checkbox]:checked + .switch-bg::after{
left: 19px;
animation: subTrue .5s forwards;
}
@keyframes subTrue {
0% {
left: 1px;
}
100% {
left: 19px;
}
}
@keyframes subTrueR {
0% {
left: 19px;
}
100% {
left: 1px;
}
}
</style>
<label class="switch-box">
<input type="checkbox" checked value="1">
<div class="switch-bg">
<span class="switch-text switch-true">是</span>
<span class="switch-text switch-false">否</span>
</div>
</label>
重写checkbox和radio
<style>
.custom-box{
background: #FFF;
}
.custom-label{
color: #000;
font-size: 1.8rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
border-bottom: 1px solid #ccc;
input.custom-radio[type="checkbox"]{
width: 2rem;
height: 2rem;
margin: 0 0.4rem 0 0;
appearance: none;
position: relative;
background: transparent;
border: 1px solid #ccc;
}
input.custom-radio[type="checkbox"]:checked {
border: 1px solid #0076FE;
background: #0076FE;
}
input.custom-radio[type="checkbox"]:checked::before{
content: "\2714";
position: absolute;
top: -35%;
left: 14%;
width: 50%;
height: 50%;
border: none;
font-size: 2rem;
font-weight: 600;
color: #FFF;
}
}
.custom-label{
color: #000;
font-size: 1.8rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
border-bottom: 1px solid #ccc;
input.custom-radio[type="radio"] {
width: 2rem;
height: 2rem;
margin: 0 0.4rem 0 0;
appearance: none;
position: relative;
background: transparent;
border: 1px solid #ccc;
border-radius: 50%;
}
/** 选中的样式*/
input.custom-radio[type="radio"]:checked{
border: 1px solid #0076FE;
}
input.custom-radio[type="radio"]:checked::before {
content: "";
background: #0076FE;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
border: none;
border-radius: 50%;
}
}
</style>
<div class="custom-box" style="width: 30%;">
<label class="custom-label" key="valnull">
<span>全部</span>
<input name="qx" class="custom-radio" type="radio" value="" v-model="formData.areaCode" @click="fnSearch('areaCode', '')" />
</label>
<label class="custom-label" v-for="(item,idx) in qxOptions" :key="idx">
<span>{{item.name}}</span>
<input name="qx" class="custom-radio" type="radio" :value="item.areaCode" v-model="formData.areaCode" @click="fnSearch('areaCode', item.areaCode)" />
</label>
</div>
<div class="custom-box" style="width: 30%;">
<label class="custom-label" key="valnull">
<span>全部</span>
<input name="qx" class="custom-radio" type="checkbox" value="" v-model="formData.areaCode2" />
</label>
<label class="custom-label" v-for="(item,idx) in qxOptions" :key="idx">
<span>{{item.name}}</span>
<input name="qx" class="custom-radio" type="checkbox" :value="item.areaCode" v-model="formData.areaCode2" />
</label>
</div>
<script>
formData: {
areaCode: '',
areaCode2: [],
},
fnSearch(key, val){
this.formData[key] = val
},
</script>
2392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
