文档章节

vue里实现echarts中国地图

Danni3
 Danni3
发布于 01/24 09:12
字数 131
阅读 8
收藏 0

echartsDemo.vue

<template>
  <div>
      <div id="chart_example"></div>
  </div>
</template>

<script>
  // 首先要 cnpm install echarts
  import echarts from 'echarts'
  import '../../../node_modules/echarts/map/js/china.js'

  export default {
    mounted() {
      let myChart = echarts.init(document.getElementById('chart_example'));

      /**
       * 中国地图
       * 必须引入china.js
       * https://www.cnblogs.com/ldlx-mars/p/9242250.html
       * map配置
       * https://echarts.baidu.com/option.html#series-map.map
       * 高亮颜色
       * https://www.cnblogs.com/xianwen/p/6045454.html
       */
      let option = {
        series: [{
          type: 'map',
          // mapType: 'china'// mapType或者map都可以
          map: 'china',
        }]
      };


      myChart.setOption(option);
    }
  }
</script>

<style scoped>
  #chart_example {
    width: 50%;
    height: 500px;
    border: 1px solid red;
    margin: 0 auto;
  }
</style>

© 著作权归作者所有

共有 人打赏支持
Danni3

Danni3

粉丝 1
博文 86
码字总数 29275
作品 0
广州
私信 提问
试用 vue-admin-template 写一个自己的dashboard

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

萝卜日志
2018/09/06
0
0
vue之将echart封装为组件

最近的新项目里,有大量数据图表类的需求,为了增强代码的复用性,减少冗余,我开始思考如何将echart封装为组件调用。本文将会以雷达图为案例,一步步讲解在vue项目中如何使用echart,如何将...

四小七
2018/05/21
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中vuex,echarts,地图,ueditor的使用(一篇就够)

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

大漠火狼
2018/06/11
0
0
深入解析Vue开发动态刷新Echarts组件的教程

需求背景:dashboard作为目前企业中后台产品的“门面”,如何更加实时、高效、炫酷的对统计数据进行展示,是值得前端开发工程师和UI设计师共同思考的一个问题。今天就从0开始,封装一个动态渲...

peakedness丶
2018/12/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

浅淡个人学习嵌入式Linux过程

我专业是电子信息工程,在初入大学的时候,我们的班主任便要我们多多去了解一些关于电子方面的知识。后来我了解到了嵌入式,继而了解到了嵌入式Linux。其实我们学习linux差不多就学习linux内...

linux-tao
14分钟前
0
0
SpringBoot使用GraphQL简单学习-1

官网 一、GraphQL简介 1.GraphQL是什么? GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户端能够...

wind2012
27分钟前
0
0
Android的WIFI局域网对讲机

https://blog.csdn.net/z979451341/article/details/79280749 (三)Android局域网内语音对讲 基于UDP语音传输 https://blog.csdn.net/stormxiaofeng/article/details/80513947 Android7.0手......

shzwork
51分钟前
2
0
vuex

一直有个误区 vuex既然页面刷新会丢失 那还有什么意义 。 重新翻看了下文档才恍然大误,vuex主要解决的是不同组件间的通信。 跨页面数据共享本质上还是用sessionStorage/localStorage...

东东笔记
今天
3
0
网站漏洞检测之WordPress 5.0.0 修复方案

2019年正月刚开始,WordPress最新版本存在远程代码注入获取SHELL漏洞,该网站漏洞影响的版本是wordpress5.0.0,漏洞的产生是因为image模块导致的,因为代码里可以进行获取目录权限,以及文件...

网站安全
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部