|
|
@@ -0,0 +1,206 @@
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div id="EMap" style="height: 100%"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "EMap",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ data: [40, 38.5, 48.2, 43.6, 42.8, 55.6, 44.6],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.drawChart();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ drawChart() {
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ let myChart = this.$echarts.init(document.getElementById("EMap"));
|
|
|
+
|
|
|
+ var color = ["#46bee9"];
|
|
|
+ var series = [];
|
|
|
+ var res = [];
|
|
|
+ var lineData = [
|
|
|
+ {
|
|
|
+ val: 32,
|
|
|
+ blat: 31.027129,
|
|
|
+ blon: 119.751063,
|
|
|
+ elat: 30.165696,
|
|
|
+ elon: 103.871896,
|
|
|
+ bcitysim: "湖州市",
|
|
|
+ ecitysim: "成都市",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 32,
|
|
|
+ blat: 31.027129,
|
|
|
+ blon: 119.751063,
|
|
|
+ elat: 23.384484,
|
|
|
+ elon: 113.088942,
|
|
|
+ bcitysim: "湖州市",
|
|
|
+ ecitysim: "广州市",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 32,
|
|
|
+ blat: 31.027129,
|
|
|
+ blon: 119.751063,
|
|
|
+ elat: 40.030195,
|
|
|
+ elon: 116.529236,
|
|
|
+ bcitysim: "湖州市",
|
|
|
+ ecitysim: "北京市",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 32,
|
|
|
+ blat: 31.027129,
|
|
|
+ blon: 119.751063,
|
|
|
+ elat: 31.027129,
|
|
|
+ elon: 119.751063,
|
|
|
+ bcitysim: "湖州市",
|
|
|
+ ecitysim: "长沙市",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ val: 32,
|
|
|
+ blat: 31.027129,
|
|
|
+ blon: 119.751063,
|
|
|
+ elat: 34.292662,
|
|
|
+ elon: 109.243907,
|
|
|
+ bcitysim: "湖州市",
|
|
|
+ ecitysim: "东莞市",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ for (var i = 0; i < lineData.length; i++) {
|
|
|
+ res.push({
|
|
|
+ fromName: lineData[i].bcitysim,
|
|
|
+ toName: lineData[i].ecitysim,
|
|
|
+ coords: [
|
|
|
+ [lineData[i].blon, lineData[i].blat],
|
|
|
+ [lineData[i].elon, lineData[i].elat],
|
|
|
+ ],
|
|
|
+ count: lineData[i].val,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ var planePath =
|
|
|
+ "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
|
|
|
+ series.push(
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "lines",
|
|
|
+ zlevel: 1,
|
|
|
+ effect: {
|
|
|
+ show: true,
|
|
|
+ constantSpeed: 20,
|
|
|
+ symbol: planePath,
|
|
|
+ symbolSize: 40,
|
|
|
+ trailLength: 0,
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ formatter: function (param) {
|
|
|
+ return (
|
|
|
+ param.data.fromName +
|
|
|
+ ">" +
|
|
|
+ param.data.toName +
|
|
|
+ "<br>趟次：" +
|
|
|
+ param.data.count
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new this.$echarts.graphic.LinearGradient(
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 0,
|
|
|
+ 1,
|
|
|
+ [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "#58B3CC",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "#F58158",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ false
|
|
|
+ ),
|
|
|
+ width: 2,
|
|
|
+ opacity: 0.5,
|
|
|
+ curveness: 0.1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: res,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "map",
|
|
|
+ mapType: "china",
|
|
|
+ top: "0%",
|
|
|
+ zoom: 1.5,
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ areaColor: "#00196d",
|
|
|
+ borderColor: "#0a53e9",
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ areaColor: "#00196d",
|
|
|
+ borderColor: "#0a53e9",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+ );
|
|
|
+ let option = {
|
|
|
+ // backgroundColor: "#010347",
|
|
|
+ // grid: {
|
|
|
+ // x: "-23%",
|
|
|
+ // y: "-25%",
|
|
|
+ // x2: "-25%",
|
|
|
+ // y2: "-5%",
|
|
|
+ // containLabel: true,
|
|
|
+ // },
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ selected: {},
|
|
|
+ x: "left",
|
|
|
+ orient: "vertical",
|
|
|
+ textStyle: {
|
|
|
+ color: "white",
|
|
|
+ },
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ geo: {
|
|
|
+ map: "china",
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ top: "0%",
|
|
|
+ zoom: 1.5,
|
|
|
+ roam: false,
|
|
|
+ itemStyle: {
|
|
|
+ areaColor: "#00196d",
|
|
|
+ borderColor: "#1773c3",
|
|
|
+ shadowColor: "#1773c3",
|
|
|
+ shadowBlur: 20,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: series,
|
|
|
+ };
|
|
|
+ // 使用刚指定的配置项和数据显示图表。
|
|
|
+ myChart.setOption(option);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+</style>
|
李楠