Echarts is used in VUE to map China

150 sets of echarts demo address ruanjiafeng2013. Gitee. IO/echart100 / #…

An overview of the

Echarts-based big data Map display of China, combined with API customization, development style, monitoring mouse events, to achieve customized events such as route jump with parameters.

An overview,

The actual project will probably encounter a lot of places that need to display data, such as discount chart, bar chart, etc. Today, I will introduce a more cool big data display of China map. Combined with echarts free open source third-party plug-in, you can achieve your own customized style, customized tips.

Second, the demonstration effect

steps

Step one, download Echarts

cnpm install echarts --save-dev

The second step is global import in main.js

Introduce Echarts in main.js

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

The complete code

<template>
  <div class="echarts">
    <div :style="{ height: '800px', width: '100%' }" ref="myEchart"></div>
  </div>
</template>
<script lang="ts"> import { Component, Vue, Provide } from "vue-property-decorator"; import { MyEchart } from "@/components/utils"; import echarts from "echarts"; import ".. /.. /.. /.. /node_modules/echarts/map/js/china.js"; // Import Chinese map data@Component({}) export default class ClassName extends Vue {  private chart: any = null;  private mounted() {  this.chinaConfigure();  }  private beforeDestroy() {  if(! this.chart) { return;  }  this.chart.dispose();  this.chart = null;  }  private randomValue() {  return Math.round(Math.random() * 1000);  }  private chinaConfigure() {  var dataList = [  { name: "South Sea Islands", value: 0 },  { name: "Beijing", value: this.randomValue() },  { name: "Tianjin", value: this.randomValue() },  { name: "Shanghai", value: this.randomValue() },  { name: "Chongqing", value: this.randomValue() },  { name: "Hebei", value: this.randomValue() },  { name: "Henan", value: this.randomValue() },  { name: "Yunnan", value: this.randomValue() },  { name: "Liaoning", value: this.randomValue() },  { name: "Heilongjiang", value: this.randomValue() },  { name: "Hunan", value: this.randomValue() },  { name: "Anhui province", value: this.randomValue() },  { name: "Shandong", value: this.randomValue() },  { name: "Xinjiang", value: this.randomValue() },  { name: "Jiangsu", value: this.randomValue() },  { name: "Zhejiang", value: this.randomValue() },  { name: "Jiangxi", value: this.randomValue() },  { name: "Hubei", value: this.randomValue() },  { name: "Guangxi", value: this.randomValue() },  { name: "Gansu", value: this.randomValue() },  { name: "Shanxi", value: this.randomValue() },  { name: Inner Mongolia, value: this.randomValue() },  { name: "Shaanxi", value: this.randomValue() },  { name: "Jilin", value: this.randomValue() },  { name: "Fujian", value: this.randomValue() },  { name: "Guizhou", value: this.randomValue() },  { name: "Guangdong", value: this.randomValue() },  { name: "Qinghai", value: this.randomValue() },  { name: "Tibet", value: this.randomValue() },  { name: "Sichuan", value: this.randomValue() },  { name: "The ningxia", value: this.randomValue() },  { name: "Hainan", value: this.randomValue() },  { name: "Taiwan", value: this.randomValue() },  { name: "Hong Kong", value: this.randomValue() },  { name: "Macau", value: this.randomValue() }  ];  let myChart = echarts.init(this.$refs.myEchart); // To get the location of the container window.onresize = myChart.resize; /* Add click event */ myChart.on("click", (param: any) => {  console.log(param);  alert(param.data.name);  // this.$router.push("/home/importData");  });  let option = {  tooltip: {  formatter: function(params: any, ticket: any, callback: Function) {  if(! params.value) { params.value = "-";  }  return (  params.seriesName + "<br />" + params.name + "：" + params.value  ); } // Data formatting },  visualMap: {  min: 0,  max: 1500,  left: "left". top: "bottom". text: ["High"."Low"], // The text of the value range inRange: {  color: ["#e0ffff"."#006edd"] // The color of the value range },  show: true/ / note },  geo: {  map: "china". roam: false// Do not enable zooming and panningZoom: 1.23, // The zoom of the view label: {  normal: {  show: true. fontSize: "10". color: "Rgba (0,0,0,0.7)"  }  },  itemStyle: {  normal: {  borderColor: "Rgba (0, 0, 0, 0.2)"  },  emphasis: {  areaColor: "#F3B329", // mouse select region color shadowOffsetX: 0,  shadowOffsetY: 0,  shadowBlur: 20,  borderWidth: 0,  shadowColor: "Rgba (0, 0, 0, 0.5)"  }  }  },  series: [  {  name: "Amount of information". type: "map". geoIndex: 0,  data: dataList  }  ]  };  myChart.setOption(option);  } } </script>  Copy the code

This article is formatted using MDNICE

❤ every demo address: 100 sets ruanjiafeng2013. Gitee. IO/echart100 / #…