vue + echarts nationwide epidemic Map

I believe the end of the outbreak of the epidemic has touched everyone's heart, although most areas have now resumed, but we still have to pay attention to the usual protection work. I have been here for two weeks to return to work, and at home there is a roommate can work from home, think about or a little envious.

Back to the topic today, specially made a national epidemic chart:

First, create a project with vue-cli, then also you need to install echarts and jsonp these two packages. (Sina because the data interface is used jsonp structure, and the other used code specifications noted eslint oh ~~)

I used vue or 2.0+ version installed directly

npm install echarts jsonp

We modify the content directly to hoverworld

<template>

  <div class="hello">

    <div ref="mapbox" style="width:800px;height:600px;margin:0 auto"></div>

    <! - initialization echarts need to have a width and height of the box ->

  </div>

</template>

<script>

import echarts from 'echarts'

import 'echarts/map/js/china.js'

import jsonp from 'jsonp'

const option = {

  title: {

    // title content

    text: 'Figure nationwide epidemic'

    link: 'https://baidu.com',

    subtext: '123456',

    SUBLINK 'https://baidu.com'

  },

  series: [{

    name: 'The number of confirmed'

    type: 'map',

    // tell echarts render a map

    map: 'china',

    // tell echarts rendered map of China

    label: {

      // set the region kanji

      show: true,

      color: '#333',

      fontSize: 10

    },

    itemStyle: {

      // map area style

      areaColor: '#eee'

    },

    roam: true,

    // mouse wheel effect

    zoom: 1.2,

    // map zoom

    emphasis: {

      // mouse over the map and font styles

      label: {

        color: '#fff',

        fontSize: 12

      },

      itemStyle: {

        areaColor: '#ccc'

      }

    },

    data: []

    // show the background to the data, you must format (name: xxx; value: xxx)

  }],

  visualMap: [{

    // color display area

    type: 'piecewise',

    show: true,

    // splitNumber: 4

    pieces: [

      {Min: 10000}

      {min: 1000, max: 9999},

      {min: 100, max: 999},

      {min: 10, max: 99},

      {min: 1, max: 9},

      {max: 0}

    ],

    inRange: {

      // area icon style

      symbol: 'rect',

      color: ['#FFFFFF', '#FFAA85', '#FF7B69', '#CC2929', '#8C0D0D', '#660208']

    }

  }],

  tooltip: {

    // display the contents of the mouse put up

    trigger: 'item'

  },

  toolbox: {

    // Download

    show: true,

    orient: 'vertical',

    left: 'right',

    top: 'center',

    feature: {

      dataView: {readyOnly: false},

      restore: {},

      saveAsImage: {}

    }

  }

}

export default {

  name: 'HelloWorld',

  mounted () {

    this.getData()

    this.mycharts = echarts.init(this.$refs.mapbox)

    // Initialize echarts

    this.mycharts.setOption(option)

  },

  methods: {

    getData () {

      jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.jsonp?_=1580892522427', {}, (err, data) => {

        if (!err) {

          console.log(data)

          let list = data.data.list.map(item => ({name: item.name, value: item.value}))

          option.series[0].data = list

          this.mycharts.setOption(option)

          // echarts initialization on the premise that rendering is complete dom

        }

      })

    }

  }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1, h2 {

  font-weight: normal;

}

the {

  list-style-type: none;

  padding: 0;

}

at the {

  display: inline-block;

  margin: 0 10px;

}

a {

  color: #42b983;

}

</style>

To this Jiuhaola! ! ! a new Year

everyone