Vue项目中使用Echarts

Posted 小小白学计算机

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue项目中使用Echarts相关的知识,希望对你有一定的参考价值。

1. 安装:

通过 npm 获取 echarts,npm install echarts --save

2. 最终页面展示效果如下:

在这里插入图片描述

三、代码实现

在这里插入图片描述
在这里插入图片描述

map-demo.vue:

<template>
  <!-- 1. 为 ECharts 准备一个具备大小(宽高)的 DOM -->
  <div ref="main" style="width: 600px;height:400px;"></div>
</template>
<script>
// 2. 加载echarts
import * as echarts from 'echarts'
import 'echarts/dist/extension/bmap.js'

export default {
  name: 'map-demo',
  mounted () {
    // 3. 初始化生成图表
    var myChart = echarts.init(this.$refs.main)
    // 指定图表的配置项和数据
    // var option = {
    //   tooltip: {
    //     trigger: 'item'
    //   },
    //   legend: {
    //     top: '5%',
    //     left: 'center'
    //   },
    //   series: [
    //     {
    //       name: '访问来源',
    //       type: 'pie',
    //       radius: ['40%', '70%'],
    //       avoidLabelOverlap: false,
    //       itemStyle: {
    //         borderRadius: 10,
    //         borderColor: '#fff',
    //         borderWidth: 2
    //       },
    //       label: {
    //         show: false,
    //         position: 'center'
    //       },
    //       emphasis: {
    //         label: {
    //           show: true,
    //           fontSize: '40',
    //           fontWeight: 'bold'
    //         }
    //       },
    //       labelLine: {
    //         show: false
    //       },
    //       data: [
    //         { value: 1048, name: '搜索引擎' },
    //         { value: 735, name: '直接访问' },
    //         { value: 580, name: '邮件营销' },
    //         { value: 484, name: '联盟广告' },
    //         { value: 300, name: '视频广告' }
    //       ]
    //     }
    //   ]
    // }
    var data = [
      {
        name: '海门',
        value: 9
      },
      {
        name: '鄂尔多斯',
        value: 12
      },
      {
        name: '招远',
        value: 12
      },
      {
        name: '舟山',
        value: 12
      },
      {
        name: '齐齐哈尔',
        value: 14
      },
      {
        name: '盐城',
        value: 15
      },
      {
        name: '赤峰',
        value: 16
      },
      {
        name: '青岛',
        value: 18
      },
      {
        name: '乳山',
        value: 18
      },
      {
        name: '金昌',
        value: 19
      },
      {
        name: '泉州',
        value: 21
      },
      {
        name: '莱西',
        value: 21
      },
      {
        name: '日照',
        value: 21
      },
      {
        name: '胶南',
        value: 22
      },
      {
        name: '南通',
        value: 23
      },
      {
        name: '拉萨',
        value: 24
      },
      {
        name: '云浮',
        value: 24
      },
      {
        name: '梅州',
        value: 25
      },
      {
        name: '文登',
        value: 25
      },
      {
        name: '上海',
        value: 25
      },
      {
        name: '攀枝花',
        value: 25
      },
      {
        name: '威海',
        value: 25
      },
      {
        name: '承德',
        value: 25
      },
      {
        name: '厦门',
        value: 26
      },
      {
        name: '汕尾',
        value: 26
      },
      {
        name: '潮州',
        value: 26
      },
      {
        name: '丹东',
        value: 27
      },
      {
        name: '太仓',
        value: 27
      },
      {
        name: '曲靖',
        value: 27
      },
      {
        name: '烟台',
        value: 28
      },
      {
        name: '福州',
        value: 29
      },
      {
        name: '瓦房店',
        value: 30
      },
      {
        name: '即墨',
        value: 30
      },
      {
        name: '抚顺',
        value: 31
      },
      {
        name: '玉溪',
        value: 31
      },
      {
        name: '张家口',
        value: 31
      },
      {
        name: '阳泉',
        value: 31
      },
      {
        name: '莱州',
        value: 32
      },
      {
        name: '湖州',
        value: 32
      },
      {
        name: '汕头',
        value: 32
      },
      {
        name: '昆山',
        value: 33
      },
      {
        name: '宁波',
        value: 33
      },
      {
        name: '湛江',
        value: 33
      },
      {
        name: '揭阳',
        value: 34
      },
      {
        name: '荣成',
        value: 34
      },
      {
        name: '连云港',
        value: 35
      },
      {
        name: '葫芦岛',
        value: 35
      },
      {
        name: '常熟',
        value: 36
      },
      {
        name: '东莞',
        value: 36
      },
      {
        name: '河源',
        value: 36
      },
      {
        name: '淮安',
        value: 36
      },
      {
        name: '泰州',
        value: 36
      },
      {
        name: '南宁',
        value: 37
      },
      {
        name: '营口',
        value: 37
      },
      {
        name: '惠州',
        value: 37
      },
      {
        name: '江阴',
        value: 37
      },
      {
        name: '蓬莱',
        value: 37
      },
      {
        name: '韶关',
        value: 38
      },
      {
        name: '嘉峪关',
        value: 38
      },
      {
        name: '广州',
        value: 38
      },
      {
        name: '延安',
        value: 38
      },
      {
        name: '太原',
        value: 39
      },
      {
        name: '清远',
        value: 39
      },
      {
        name: '中山',
        value: 39
      },
      {
        name: '昆明',
        value: 39
      },
      {
        name: '寿光',
        value: 40
      },
      {
        name: '盘锦',
        value: 40
      },
      {
        name: '长治',
        value: 41
      },
      {
        name: '深圳',
        value: 41
      },
      {
        name: '珠海',
        value: 42
      },
      {
        name: '宿迁',
        value: 43
      },
      {
        name: '咸阳',
        value: 43
      },
      {
        name: '铜川',
        value: 44
      },
      {
        name: '平度',
        value: 44
      },
      {
        name: '佛山',
        value: 44
      },
      {
        name: '海口',
        value: 44
      },
      {
        name: '江门',
        value: 45
      },
      {
        name: '章丘',
        value: 45
      },
      {
        name: '肇庆',
        value: 46
      },
      {
        name: '大连',
        value: 47
      },
      {
        name: '临汾',
        value: 47
      },
      {
        name: '吴江',
        value: 47
      },
      {
        name: '石嘴山',
        value: 49
      },
      {
        name: '沈阳',
        value: 50
      },
      {
        name: '苏州',
        value: 50
      },
      {
        name: '茂名',
        value: 50
      },
      {
        name: '嘉兴',
        value: 51
      },
      {
        name: '长春',
        value: 51
      },
      {
        name: '胶州',
        value: 52
      },
      {
        name: '银川',
        value: 52
      },
      {
        name: '张家港',
        value: 52
      },
      {
        name: '三门峡',
        value: 53
      },
      {
        name: '锦州',
        value: 54
      },
      {
        name: '南昌',
        value: 54
      },
      {
        name: '柳州',
        value: 54
      },
      {
        name: '三亚',
        value: 54
      },
      {
        name: '自贡',
        value: 56
      },
      {
        name: '吉林',
        value: 56
      },
      {
        name: '阳江',
        value: 57
      },
      {
        name: '泸州',
        value: 57
      },
      {
        name: '西宁',
        value: 57
      },
      {
        name: '宜宾',
        value: 58
      },
      {
        name: '呼和浩特',
        value: 58
      },
      {
        name: '成都',
        value: 58
      },
      {
        name: '大同',
        value: 58
      },
      {
        name: '镇江',
        value: 59
      },
      {
        name: '桂林',
        value: 59
      },
      {
        name: '张家界',
        value: 59
      },
      {
        name: '宜兴',
        value: 59
      },
      {
        name: '北海',
        value: 60
      },
      {
        name: '西安',
        value: 61
      },
      {
        name: '金坛',
        value: 62
      },
      {
        name: '东营',
        value: 62
      },
      {
        name: '牡丹江',
        value: 63
      },
      {
        name: '遵义',
        value: 63
      },
      {
        name: '绍兴',
        value: 63
      },
      {
        name: '扬州',
        value: 64
      },
      {
        name: '常州',
        value: 64
      },
      {
        name: '潍坊',
        value: 65
      },
      {
        name: '重庆',
        value: 66
      },
      {
        name: '台州',
        value: 67
      },
      {
        name: '南京',
        value: 67
      },
      {
        name: '滨州',
        value: 70
      },
      {
        name: '贵阳',
        value: 71
      },
      {
        name: '无锡',
        value: 71
      },
      {
        name: '本溪',
        value: 71
      },
      {
        name: '克拉玛依',
        value: 72
      },
      {
        name: '渭南',
        value: 72
      },
      {
        name: '马鞍山',
        value: 72
      },
      {
        name: '宝鸡',
        value: 72
      },
      {
        name: '焦作',
        value: 75
      },
      {
        name: '句容',
        value: 75
      },
      {
        name: '北京',
        value: 79
      },
      {
        name: '徐州',
        value: 79
      },
      {
        name: '衡水',
        value: 80
      },
      {
        name: '包头',
        value: 80
      },
      {
        name: '绵阳',
        value: 80
      },
      {
        name: '乌鲁木齐',
        value: 84
      },
      {
        name: '枣庄',
        value: 84
      },
      {
        name: '杭州',
        value: 84
      },
      {
        name: '淄博',
        value: 85
      },
      {
        name: '鞍山',
        value: 86
      },
      {
        name: '溧阳',
        value: 86
      },
      {
        name: '库尔勒',
        value: 86
      },
      {
        name: '安阳',
        value: 90
      },
      {
        name: '开封',
        value: 90
      },
      {
        name: '济南',
        value: 92
      },
      {
        name: '德阳',
        value: 93
      },
      {
        name: '温州',
        value: 95
      },
      {
        name: '九江',
        value: 96
      },
      {
        name: '邯郸',
        value: 98
      },
      {
        name: '临安',
        value: 99
      },
      {
        name: '兰州',
        value: 99
      },
      {
        name: '沧州',
        value: 100
      },
      {
        name: '临沂',
        value: 103
      },
      {
        name: '南充',
        value: 104
      在vue中使用Echarts

Vue项目中使用Echarts

Vue系列——在vue项目中使用echarts

在Vue项目中使用ECharts

在vue项目中使用echarts(echarts不显示,echarts使用详细)

Vue项目中使用Echarts中 ECharts GL 实现基础的三维可视化