This is the sixth day of my participation in the August Text Challenge.More challenges in August

Echarts implements map highlight rotation

Introduction: map data timing selected one of the classic display bar, recently just used, in this incidentally record to save a case, in case of emergency, as shown below:

So let’s get ready

  • Download China. json and save the file to the project;
  • The importimport gzData from './china.json'
  • Add:
<template>
  <div :id="id" :ref="id" class="my-map" :style="mapStyle" />
</template>
Copy the code

  • View updated, mounted
If (myChart) {const eChart = echarts.init(myChart) {if (myChart) {const eChart = echarts.init(myChart); This. charts = eChart const option = {... this.option, ... This. CustomOption} // Merge echart.setoption (option) // mount window.addeventListener ('resize', Function () {echart.resize ()}},Copy the code
  • Timing rotation, with the help of the followingdispatchAction()Different type types, to achieve select and empty
/ / remove the current map blocks highlighting this. Charts. DispatchAction ({type: 'downplay, seriesIndex: 0, dataIndex: Enclosing the index}) enclosing index++ / block/current map subscript highlight this. Charts. DispatchAction ({type: 'highlight' seriesIndex: 0, dataIndex: Enclosing the index}) / / tooltip follow shows this. Charts. DispatchAction ({type: 'showTip, seriesIndex: 0, dataIndex: enclosing the index})Copy the code
  • Plus time rotation
MouseEvents () {// mouseover this.charts. On ('mouseover', ClearInterval () = > {/ / stop the timer (enclosing clearTime) enclosing clearTime = null / / clean up before highlighting this. Charts. The dispatchAction ({type: 'downplay', seriesIndex: 0, dataIndex: On ('mouseout', () => {this.mapActive()})}Copy the code
  • Parent component use
<MapEchart style="height: 412px; width: 100%;" />
Copy the code

Finally, attach the component code:

<template> <div :id="id" :ref="id" class="my-map" :style="mapStyle" /> <! -- Map of the South China Sea Islands, </template> <script> import * as echarts from 'echarts' import gzData from './map.json' export default { name: 'GzMap', components: {}, props: { id: { type: String, default: 'myChart' }, height: { type: String, default: "}, width: {type: String, default: "}, customOption: {// Custom configuration item Type: Object, default: () => {} } }, data() { return { clearTime: null, charts: '', index: -1, option: { tooltip: { backgroundColor: 'rgba(0,0,0,0)', // window trigger: 'item'}, series: [{tooltip: {// display window trigger: 'item', formatter: function(item) { var tipHtml = '' tipHtml = `<div style="padding: 6px 12px;font-size: 12 px; color: # FFF; border - the radius: 6 px; background - color: rgba (230, 93, 110, 0.6); "> ${item. The data. The name} : <span style="color:#FEC171;font-size:14px;">${item.value} million </span> </div> 'return tipHtml}, borderWidth: 0}, name: // Zoom: 0.75, // Zoom: true, // Allow scaling, move showLegendSymbol: true, label: {// Text show: true, color: '# FFF ', fontSize: 10}, itemStyle: {// Map style borderColor: 'RGBA (147, 235, 248, 1)', borderWidth: 1, areaColor: {type: 'radial', x: 0.5, y: 0.5, r: 0.8, colorStops: [{offset: 0, color: 'rgba(24, 146, 121, 0.8)' // 0, color: offset 'rgba(24, 146, 121, 1)' // color at 100%}], globalCoord: false // default false}, shadowColor: 'rgba(24, 146, 121, 1)', shadowOffsetX: -1, shadowOffsetY: 3, shadowBlur: 10 }, emphasis: ItemStyle: {areaColor: '#E65D6E', borderColor: '#C03639', borderWidth: 1}, label: {show: True, // text color: '#FEC171', fontSize: 10}}, layoutCenter: ['50%', '65%'], layoutSize: '160%', markPoint: {symbol: }]}}}, computed: {mapStyle() {return {height: this.height, width: This.width}}, mounted() {}, created() {echarts.registermap ('中 ', gzData) this.getData()}, methods: If (myChart) {const eChart = this.$refs[this.id] Charts = eChart this.mapActive() this.mouseEvents() const option = {... this.option, ... This. CustomOption} // Merge echart.setoption (option) // mount window.addeventListener ('resize', Function () {echart.resize () // redraw})}}, mouseEvents() {// Draw on this.charter. on('mouseover', ClearInterval () = > {/ / stop the timer (enclosing clearTime) enclosing clearTime = null / / clean up before highlighting this. Charts. The dispatchAction ({type: 'downplay', seriesIndex: 0, dataIndex: On ('mouseout', () => {this.mapActive()})}, // Highlight mapActive() {const dataLength = gzdata.features. length // Highlight this.clearTime = setInterval(() => {// Remove the current map blocks highlighting this. Charts. DispatchAction ({type: 'downplay, seriesIndex: 0, dataIndex: Enclosing the index}) enclosing index++ / block/current map subscript highlight this. Charts. DispatchAction ({type: 'highlight' seriesIndex: 0, dataIndex: Enclosing the index}) / / tooltip follow shows this. Charts. DispatchAction ({type: 'showTip, seriesIndex: 0, dataIndex: This.index}) if (this.index > dataLength) {this.index = 0}}, 2000)}, /** * This component is only a public map component * should be passed through the parent component, */ getData() {setTimeout(() => {// simulate asynchronous request data this.option.series[0].data = gzData.features.map(item => { return { value: (math.random () * 10000).tofixed (2), // Generate a random substitution, when the actual situation should be matched with Ajax request data, through item.properties. Name to match the actual data, thus fetching the actual data value name: Item.properties. Name}}) this.$nextTick(() => {this.setMyechart ()) </script> <style lang=" SCSS "scoped>. My-map {width: 100%; height: 100%; } </style>Copy the code

other

Reference article: juejin.cn/post/699797…