// var svg = "/profile/upload/2024/11/05/562c55e6-49b1-43c0-9fe7-f981ac897e5d.svg" var svg = "/siteassets/chart/echarts/options/9b58667f-31c9-4261-814c-347cbbbd8181.json" // img1 img2外层包的li是icon建议二选其一 let img1="/siteassets/chart/echarts/options/20ff45a0-8574-40c3-9bc3-4cbaa104d7af.png" let img2="/siteassets/chart/echarts/options/de05443e-7c9b-4044-991f-59007f09de35.png" // echarts.registerMap('svg', { svg: svg }); const icon = "/siteassets/chart/echarts/options/7d742ee6-aa46-4a2d-9741-0a3f86a5fc5e.json" const random = (lower, upper) => { lower = +lower || 0 upper = +upper || 0 return Math.random() * (upper - lower) + lower } const provinces = [ { city: true, name: "太原", coord: [1383.6, 759.1], value: 456562, }, { name: "古交市", coord: [1287.7, 755.4], }, { name: "清徐县", coord: [1322.5, 855], }, { name: "娄烦县", coord: [1165.4, 708.5], }, // { // name: '阳曲县', // coord: [1496.5, 744.6] // }, { name: "小店县", coord: [1388.5, 804.2], }, { name: "万柏林区", coord: [1337.3, 783.6], }, //======= { city: true, name: "忻州", coord: [1544, 638], }, { name: "保德县", coord: [1120, 436], }, { name: "河曲县", coord: [1236, 359], }, // { // name: '其岚县', // coord: [1214, 483] // }, // { // name: '偏关县', // coord: [1368, 342] // }, // { // name: '五寨县', // coord: [1324, 483] // }, { name: "静乐县", coord: [1317, 611], }, // { // name: '神池县', // coord: [1460, 474] // }, { name: "宁武县", coord: [1546.2, 501.7], }, { name: "原平市", coord: [1638, 547], }, // { // name: '定襄县', // coord: [1702, 639] // }, // { // name: '代县', // coord: [1817, 507] // }, { name: "五台县", coord: [1861, 624], }, // { // name: '繁峙县', // coord: [1979, 513] // }, //============ { city: true, name: "朔州", coord: [1604, 391], }, { name: "朔城区", coord: [1612.6, 430.6], }, { name: "怀仁市", coord: [1898, 334], }, { name: "应县", coord: [1920, 414], }, { name: "山阴县", coord: [1732, 361], }, { name: "右玉县", coord: [1711, 218], }, { name: "平鲁区", coord: [1538.6, 332.6], }, //========= { city: true, name: "大同", coord: [2102, 256], value: 285638, }, // { // name: '大同县', // coord: [2166, 351] // }, { name: "左云县", coord: [1826.7, 262.3], }, // { // name: '阳高县', // coord: [2229.9, 248.6] // }, { name: "浑源县", coord: [2140.5, 436.7], }, // { // name: '天镇县', // coord: [2386.3, 244.1] // }, // { // name: '广灵县', // coord: [2296.2, 428] // }, // { // name: '灵丘县', // coord: [2237.8, 503.2] // }, { name: "新荣区", coord: [2028.5, 215.6], }, { name: "云冈区", coord: [2015.9, 281], }, { name: "云州区", coord: [2195.8, 316.2], }, //========= { city: true, name: "阳泉", coord: [1769.6, 861.7], }, { name: "盂县", coord: [1759.3, 766.8], }, { name: "平定县", coord: [1808, 881.4], }, { name: "郊区", coord: [1760.2, 825.6], }, { name: "矿区", coord: [1728, 844.8], }, //========= { city: true, name: "吕梁", coord: [943, 804], }, // { // name: '汾阳市', // coord: [1076.3, 874.2] // }, { name: "孝义市", coord: [1013.2, 910.5], }, { name: "临县", coord: [876.3, 625], }, { name: "岚县", coord: [1115.2, 608.6], }, { name: "兴县", coord: [990.9, 561.8], }, { name: "方山县", coord: [997.1, 707.3], }, { name: "中阳县", coord: [883, 862.8], }, { name: "柳林县", coord: [791.7, 766.8], }, { name: "文水县", coord: [1191, 864.9], }, { name: "交城县", coord: [1171.1, 821], }, { name: "交口县", coord: [818.5, 927.2], }, // { // name: '石楼县', // coord: [697.2, 871.1] // }, { name: "离石县", coord: [942.5, 876.7], }, //========= { city: true, name: "晋中", coord: [1459, 905], }, { name: "介休市", coord: [1063.3, 975.5], }, // { // name: '祁县', // coord: [1247.6, 943.3] // }, { name: "寿阳县", coord: [1620.6, 839.3], }, { name: "昔阳县", coord: [1760.1, 966], }, { name: "平遥县", coord: [1177.5, 954.1], }, { name: "灵石县", coord: [967, 1010.2], }, { name: "左权县", coord: [1598.3, 1051.3], }, { name: "和顺县", coord: [1686.1, 1019], }, // { // name: '榆社县', // coord: [1444.1, 1022.9] // }, { name: "榆次区", coord: [1482.7, 922.4], }, //========= { city: true, name: "临汾", coord: [808, 1162], value: 56254, }, { name: "霍州市", coord: [946.3, 1095.4], }, // { // name: '侯马市', // coord: [656, 1264.1] // }, { name: "古县", coord: [988.5, 1161.9], }, { name: "吉县", coord: [496.5, 1113], }, { name: "隰县", coord: [725.3, 1025.3], }, { name: "蒲县", coord: [666.3, 1136.4], }, // { // name: '曲沃县', // coord: [706, 1272.8] // }, { name: "翼城县", coord: [825.2, 1269.7], }, // { // name: '襄汾县', // coord: [1111, 1111] // }, { name: "洪洞县", coord: [871.2, 1137.9], }, { name: "安泽县", coord: [1060.5, 1210.3], }, // { // name: '浮山县', // coord: [899.7, 1219.1] // }, { name: "乡宁县", coord: [537.8, 1165.9], }, // { // name: '大宁县', // coord: [551.9, 1053] // }, // { // name: '永和县', // coord: [599.3, 977.3] // }, // { // name: '汾西县', // coord: [856.4, 1057.9] // }, { name: "尧都县", coord: [815.1, 1202.5], }, //========= { city: true, name: "长治", coord: [1336.6, 1222.4], value: 659812, }, // { // name: '沁县', // coord: [1246.7, 1076.4] // }, { name: "长子县", coord: [1251, 1256.2], }, { name: "沁源县", coord: [1133.1, 1121.2], }, // { // name: '平顺县', // coord: [1491.9, 1238.5] // }, { name: "武乡县", coord: [1353, 1094.8], }, { name: "襄垣县", coord: [1398.1, 1142.4], }, // { // name: '黎城县', // coord: [1501.9, 1157.2] // }, { name: "壶关县", coord: [1435.8, 1282.8], }, { name: "屯留县", coord: [1258.3, 1155.4], }, { name: "潞州区", coord: [1371.2, 1212.7], }, { name: "潞城区", coord: [1405.4, 1197.7], }, { name: "上党区", coord: [1303.9, 1310.6], }, //========= { city: true, name: "运城", coord: [492, 1367], value: 15326, val: 999, }, { name: "河津市", coord: [410.9, 1249.3], value: 4652, }, { name: "永济市", coord: [216.2, 1401.4], }, { name: "夏县", coord: [1111, 1111], }, { name: "绛县", coord: [732.8, 1337.7], }, { name: "新绛县", coord: [545.1, 1290.9], }, { name: "临猗县", coord: [317, 1350.1], }, { name: "万荣县", coord: [385.9, 1311.7], }, { name: "闻喜县", coord: [613.2, 1351.3], }, { name: "稷山县", coord: [482.1, 1270.3], }, { name: "垣曲县", coord: [700.8, 1407], }, { name: "平陆县", coord: [447.2, 1451.8], }, { name: "芮城县", coord: [280.8, 1434.5], }, //========= { city: true, name: "晋城", coord: [1137, 1376], value: 986524, }, { name: "高平市", coord: [1186.7, 1326.3], }, { name: "泽州县", coord: [1185.2, 1390.3], }, { name: "沁水县", coord: [917.3, 1348.7], }, { name: "阳城县", coord: [986.3, 1394.9], }, { name: "陵川县", coord: [1346.6, 1407.8], }, ]; const datas = { from: [1381.1, 766.7], to: provinces .filter((item) => item.city === true) .map((item, index) => { // item.value = index % 2 === 0 ? 1 : 10; if (!item.value) { item.value = 0; } if (item.coord[0] < 1380) { item.lineStyle = { curveness: -0.3, }; } return item; }), other: provinces.filter((item) => item.city === undefined), }; console.log(datas) $.get(icon, function (chinaJson) { $.get(svg, function (chinaSvg) { let svgjson=chinaSvg.svg let icon = chinaJson echarts.registerMap('organ_diagram', { svg:svgjson }); option = { backgroundColor: "#040b1c", title: { text: "地图系列的 SVG 底图-2", left: "center", bottom: 10, }, tooltip: { show: true, trigger: "item", backgroundColor: "rgba(50,50,50,0.6)", borderColor: "#FFFFCC", textStyle: { color: "#ffffff", }, transitionDuration: 0, showDelay: 0, hideDelay: 0, enterable: true, axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: "shadow", // 默认为直线，可选为：'line' | 'shadow' }, confine: true, // transitionDuration: 0, // extraCssText: "z-index:100", formatter: function (params, ticket, callback) { console.log("实打实：", params); //根据业务自己拓展要显示的内容 var res = ""; var name = params.name; var value = params.value[params.seriesIndex + 1] || params.value; res = "" + name + "
数据：" + value; return res; }, }, visualMap: { //图例值控制 min: 1, max: 10, calculable: true, show: false, color: ["#f44336", "#00eaff"], textStyle: { color: "#fff", }, }, geo: { left: 10, right: 10, map: "organ_diagram", itemStyle: { borderWidth: 0, }, emphasis: { focus: "none", disabled: false, itemStyle: { areaColor: "#00eaff", color: "red", borderColor: "#00eaff", borderWidth: 3, // borderType:"dotted" ,//dashed dotted solid // borderCap:"square", opacity: 3, }, label: { show: false, color: "#00eaff", }, }, regions: [ { name: "太原", selected: true, // itemStyle: { // areaColor: "#f44336", // color: "#f44336", // opacity: 5, // borderWidth: 3, // 省份界线的宽度 // borderColor: "#fff", // 省份界线颜色 // }, select: { itemStyle: { areaColor: "#8fd3f4", // 高亮时候地图显示的颜色 borderWidth: 2, // 高亮时的边框宽度 opacity: 3, borderColor: "#84fab0", // 省份界线颜色 }, label: { fontSize: 12, // 选中地图文字字号和字体颜色 color: "#fff", }, }, }, ], // 点击的tooltip tooltip: { show: true, formatter: (params) => { // console.log("tooltip：",params) let citylis = provinces.filter( (item) => item.city === true ); let datalist = citylis.filter( (item) => item.name === params.name ); // return `

${params.name}
${ // datalist[0].value || 0 // }

`; let html = ""; html += `

${ params.name }

${params.name} ${ datalist[0].value || 0 }

`; return html; }, }, }, series: [ { type: "effectScatter", coordinateSystem: "geo", zlevel: 2, rippleEffect: { //涟漪特效 period: 7, //动画时间，值越小速度越快 brushType: "stroke", //波纹绘制方式 stroke, fill scale: 5, //波纹圆环最大限制，值越大波纹越大 }, label: { show: false, position: "right", //显示位置 offset: [5, 0], //偏移设置 formatter: function (params) { //圆环显示文字 return params.data.name; }, fontSize: 13, }, emphasis: { show: true, }, // symbol: "circle", symbol: icon.iconGD, //图标 iconGD iconLD iconRQ iconJG iconLJZ iconJD1 iconJD2 iconSS symbolSize: function (val) { return 7; //圆环大小 }, itemStyle: { show: false, color: "#f00", }, data: datas.to.map(function (item) { return { name: item.name, value: [...item.coord, item.value], }; }), tooltip: { formatter: (params) => { // return params.name + "88888"; // return `

${params.name}
${ // params.value[2] || 0 // }

`; let html = ""; html += `

${ params.name }

${params.name} ${ params.value[2] || 0 }

`; return html; }, }, }, ], }; let nameList = provinces .filter((item) => item.city === true) .map((i) => { return { name: i.name, isshow: false }; }); myChart.setOption(option); myChart.on('click', function (event) { console.log(event); if (event.componentIndex == 0) { nameList.forEach((it) => { if (it.name == event.name) { it.isshow = true; myChart.dispatchAction({ type: "highlight", geoIndex: 0, name: event.name, }); } else { it.isshow = false; myChart.dispatchAction({ type: "downplay", geoIndex: 0, name: it.name, }); } }); // console.log("名称：", nameList); } }); autoFn(nameList, myChart); function autoFn(nameList, myChart) { var that = this; //轮播效果 var currentIndex = -1; // let myChart = echarts.getInstanceByDom(document.getElementById("chart-panel")) var dataLen = nameList.length; that.timer = setInterval(() => { // 计时器增加 that.ai++; if (that.ai == dataLen) { that.ai = 1; } // console.log(nameList); // // 取消之前高亮的图形 // myChart.dispatchAction({ // type: "downplay", // seriesIndex: 0, // dataIndex: currentIndex, // }); currentIndex = (currentIndex + 1) % dataLen; myChart.dispatchAction({ type: "highlight", geoIndex: 0, name: nameList[currentIndex].name, }); // console.log("的撒旦111：", nameList[currentIndex]); // console.log( // "大撒大撒：", // currentIndex, // nameList[currentIndex].name // ); setTimeout(() => { if (currentIndex - 1 == -1) { myChart.dispatchAction({ type: "downplay", geoIndex: 0, name: "太原", }); } else { myChart.dispatchAction({ type: "downplay", geoIndex: 0, name: nameList[currentIndex].name, }); } }, 4800); // // 高亮当前图形 // myChart.dispatchAction({ // type: "highlight", // seriesIndex: 0, // dataIndex: currentIndex, // }); // 显示 tooltip myChart.dispatchAction({ type: "showTip", seriesIndex: 0, dataIndex: currentIndex, }); }, 5000); } }) })

山西地图图表