VUE+Echarts辽宁省地图

不做好人

于 2024-05-24 11:22:56 发布

阅读量283

点赞数 2

分类专栏： vue+echarts 文章标签： vue.js echarts javascript

本文链接：https://blog.csdn.net/weixin_43930792/article/details/139170077

版权

vue+echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

话不多说直接展示 内联代码片。

<template>
  <div">
    <div id="main" style="width: 100%; height: 550px" autoresize></div>
  </div>
</template>
<script>
import repJson from '../assets/辽宁省.json'
export default {
  data(){
    return{
      echartMapChart : null,
    }
  },
  mounted(){
    this.mapChart();
  },
  methods:{
    mapChart() {
      this.$echarts.registerMap('liaoning', repJson);
      this.echartMapChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let     option = {
        backgroundColor: '#695cb1',
        title: {
            text: '辽宁省全览',
            left: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        series: [
          {
            name: '辽宁地图',
            type: 'map',
            map: 'liaoning',
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data:[
                    {name: '沈阳市', value: 8},
                    {name: '大连市', value: 7},
                    {name: '鞍山市', value: 6},
                    {name: '抚顺市', value: 10},
                    {name: '本溪市', value: 9},
                    {name: '丹东市', value: 8},
                    {name: '锦州市', value: 3},
                    {name: '营口市', value: 2},
                    {name: '阜新市', value: 5},
                    {name: '辽阳市', value: 19},
                    {name: '盘锦市', value: 44},
                    {name: '铁岭市', value: 32},
                    {name: '朝阳市', value: 1},
                    {name: '葫芦岛市', value: 27}
                ],
      ],
      };
    this.echartMapChart .setOption(option);
  },
}
</script>