文档章节

vue-echarts 地图map 尝试

激烈的海胆
 激烈的海胆
发布于 2017/06/15 14:16
字数 296
阅读 664
收藏 2

<template>
  <chart :options="option"></chart>
</template>
<style scoped>
.echarts{
  width: 100%;
  height: 100%;
}
</style>
<script type="text/ecmascript-6">
export default {
  watch: {
    dataMap(newVal, oldVal) {
      if (newVal !== oldVal) {
        let finSeriesData = []
        for (let i = 0; i < newVal.data.length; i++) {
          finSeriesData.push({ 'name': newVal.data[i].province, 'value': newVal.data[i].provinum })
        }
        this.option.series[0].data = finSeriesData
        this.option.visualMap.max = finSeriesData[0].value
        // console.log(this.option)
      }
    }
  },
  props: ['dataMap'],
  data: function() {
    return {
      option: {
        tooltip: {
          trigger: 'item'
        },
        position: ['0%', '100%'],
        grid: {
          top: '1000',
          left: '50',
          right: '10',
          bottom: '20',
          containLabel: true
        },
        visualMap: {
          min: 0,
          max: 100,
          left: 'left',
          top: 'bottom',
          color: ['#1ccada', '#d2f4f8'],
          calculable: true,
          show: false
        },
        series: [
          {
            type: 'map',
            mapType: 'china',
            roam: false,
            itemStyle: {
              normal: {
                areaColor: '#d2f4f8',
                borderColor: 'rgba(255,255,255,0.9)'
              },
              emphasis: {
                areaColor: '#2a333d'
              }
            },
            label: {
              emphasis: {
                show: false
              }
            },
            data: [
              { name: '北京', value: 0 },
              { name: '天津', value: 0 },
              { name: '上海', value: 0 },
              { name: '重庆', value: 0 },
              { name: '河北', value: 0 },
              { name: '河南', value: 0 },
              { name: '云南', value: 0 },
              { name: '辽宁', value: 0 },
              { name: '黑龙江', value: 0 },
              { name: '湖南', value: 0 },
              { name: '安徽', value: 0 },
              { name: '山东', value: 0 },
              { name: '新疆', value: 0 },
              { name: '江苏', value: 0 },
              { name: '浙江', value: 0 },
              { name: '江西', value: 0 },
              { name: '湖北', value: 0 },
              { name: '广西', value: 0 },
              { name: '甘肃', value: 0 },
              { name: '山西', value: 0 },
              { name: '内蒙古', value: 0 },
              { name: '陕西', value: 0 },
              { name: '吉林', value: 0 },
              { name: '福建', value: 0 },
              { name: '贵州', value: 0 },
              { name: '广东', value: 0 },
              { name: '青海', value: 0 },
              { name: '西藏', value: 0 },
              { name: '四川', value: 0 },
              { name: '宁夏', value: 0 },
              { name: '海南', value: 0 },
              { name: '台湾', value: 0 },
              { name: '香港', value: 0 },
              { name: '澳门', value: 0 }
            ]
          }
        ]
      }
    }
  }
}
</script>

 

© 著作权归作者所有

激烈的海胆
粉丝 0
博文 25
码字总数 7600
作品 0
北京
前端工程师
私信 提问
试用 vue-admin-template 写一个自己的dashboard

初衷 其实自己还是比较热衷于基于CLI的dashboard,也有心去做一些尝试,比如 用 Nodejs CLI 的方式实现一个TODO应用 - 简书 ,后续也会继续增加新想法到这个里面。但是我今天意识到一个问题,...

萝卜日志
2018/09/06
0
0
详解在vue中使用echarts图表实例代码

安装vue依赖 使用npm 使用yarn 使用国内的淘宝镜像: 引入ECharts 安装好的ECharts会放在node_modules目录下。 全部引入 1.直接在项目代码引入 可以直接在项目代码中 得到 ECharts。声明一个...

peakedness丶
2018/12/24
337
0
vue中vuex,echarts,地图,ueditor的使用(一篇就够)

前言 vue-cli生成的template还需要配置axios,vuex,element等插件,该项目中将这些常用插件进行了配置; 项目开发中template可以快速复用,也是可以快速上手vue的一个demo; 1.动态效果图 2.技术栈...

大漠火狼
2018/06/11
0
0
ECharts 打造在线个人简历

Create by jsliang on 2018-12-5 11:48:56 Recently revised in 2018-12-9 22:31:51  Hello 小伙伴们,如果觉得本文还不错,记得点个赞或者给个 star,你们的赞和 star 是我编写更多更精彩文...

jsliang
2018/12/10
0
0
在 Vue 项目中使用 ECharts

在 Vue 项目中使用 ECharts 说明 重要文件版本 “vue”: “2.5.13” “vue-router”: “^3.0.1” “vuex”: “3.0.1”, “echarts”: “^4.0.2” 在 Vue 项目中使用 ECharts 只需要在 Vue 组...

cacao111
2018/07/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

开发中常用的正则表达式

为了能够更好地理解如何在C#环境中使用正则表达式,这里整理了一些常用的正则表达式: 罗马数字: string p1 = "^m*(d?c{0,3}|c[dm])" + "(l?x{0,3}|x[lc])(v?i{0,3}|i[vx])$";string t1 ......

木庄
31分钟前
4
0
【.NET程序打包】VS2019使用Installer Projects打包

C#—使用Installer Projects打包桌面应用程序 前言 打包桌面应用程序实在是一个不常使用的东西,偶尔使用起来经常会忘东忘西的耽误时间,因此,这篇文章多以图片记录过程,也是用于备忘。 下...

_Somuns
35分钟前
4
0
自定义注解,使用动态代理解决网站的字符集编码问题

第1章设置环境 安装操作系统,安装备份(镜像): JDK: 设置环境变量Eclipse:解压即可 Eclipse自身解压目录不包括中文 代码工作空间目录不包括中文Tomcat:解压不要包含中文目录M...

蓝来杯往
39分钟前
6
0
Solr中的字段类型field type

Solr含有多种字段类型,可用的字段类型基本都定义在了包org.apache.solr.schema中,列举如下: 类 说明 BinaryField 二进制数据 BoolField 布尔值,其中’t’/’T’/’1’都是true Collatio...

gantaos
53分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部