精华内容
下载资源
问答
  • 地图接图表
    2022-07-26 15:01:28

    代码如下:

    <!-- 折线图 -->
    <template>
      <div id="Line">
        <!-- <h1>年度投资额曲线图</h1> -->
        <div id="Lcharts" ref="Echarts1"></div>
      </div>
    </template>
    <script>
    import * as echarts from "echarts";
    
    export default {
      name: "HomeView",
      components: {},
      data() {
        return {};
      },
      mounted() {
        this.getData();
      },
      methods: {
        getData() {
          let timeData = [];
          let setData = [];
          this.request("/index/getInvestmentTotal", {}, "get").then((res) => {
            res.map((item) => {
              timeData.push(item.yeas);
              setData.push(item.investmentTotal);
            });
            this.getChart(timeData, setData);
          });
        },
        getChart(time, value) {
          let Lcharts = echarts.init(this.$refs.Echarts1);
          let option = {
            title: {
              text: "年度投资额曲线图",
              textStyle: {
                fontSize: 15, //改变标题字体大小
              },
            },
            xAxis: {
              type: "category",
              data: time,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: value,
                type: "line",
              },
            ],
          };
          Lcharts.setOption(option);
        },
      },
    };
    </script>
    
    <style scoped>
    #Line {
      height: 100%;
    }
    #Lcharts {
      height: 100%;
      border-radius: 20px;
      /* background-color: pink; */
    }
    </style>
    

     注意:option中的数据不能直接调用赋值,只能先通过变量存储后赋值。之后再进行set

    更多相关内容
  • 标准地形图制作系列--接图表的制作方法 by 李远祥 接图表是标准地形图制作常用的方式,对于网络地图来说,从来不会出现接图表这东西,但是在标准地形图里面,这却是强制的规范。虽然很多行外人员都不清楚接图表是...

    标准地形图制作系列--接图表的制作方法

    by 李远祥

    接图表是标准地形图制作常用的方式,对于网络地图来说,从来不会出现接图表这东西,但是在标准地形图里面,这却是强制的规范。虽然很多行外人员都不清楚接图表是什么东西,但实际上接图表他们早就在中学的地理课本或者是街边买来的地图册上看到过(尽管这些地图不太规范)。

    接图表的作用就不在这里罗嗦了,一般关注该话题的人都知道它的表达方式,这里不做论述。下面主要介绍一下如何在ArcGIS里面实现接图表。由于没有标准的数据,这里用一份比较简单的数据实现其操作步骤。

    先说一下主要思路:首先要针对数据制作好地形图,这是前提条件。然后利用行政边界图层,单独制作一个地图,并插入到做好的地形图中,并作为接图表放置在地图的右上角。最后调整接图表的显示范围,让其范围与地形图范围一致。

    制作地形图的过程这里省略,那是一个非常好时间和精力的事情,不要问我怎么知道,具体按照地形图规范做一下就知道有多苦逼。下面假设已经做好一张标准的地形图,我是说假设`(*∩_∩*)′  如下图所示

    clip_image001

    在【文件】--【页面和打印设置】先设置好打印的纸张大小,比例尺之类的就在图框中设置好对应的参考比例。然后调整好显示的范围等。切换到【布局】视图,这样才可以看到效果。

    clip_image002

    接下来就是需要插入接图表的关键步骤了。很多人都不会明白ArcGIS的【数据框】是什么概念,就是我们经常看到的在图层最上面的黄色的图标,感觉上有图层和图层组的位置,但【数据框】看起来一点作用都没有。下图红色箭头指向的就是【数据框】

    clip_image003

    在哲学上来说,存在的都是有价值的,何况数据框已经存在ArcGIS十多个版本中。数据框的概念其实可以看作是一张地图的组织,只不过很多人习惯性的将不同的地图放置在不同的Mxd中组织起来,而数据框的作用就是将多个地图放在同一个MXD中,需要查看不同的地图的时候可以自动激活(当然,这个是在数据视图中的做法)。而另一种非常重要的价值就是将多个地图显示在同一个纸面上,恰好接图表就是其中的一种多个地图在同一张图纸中的表现形式,只不过是一张是精细的地图,另一张类似于鹰眼的简图。

    那接下来就是插入接图表的重要步骤。在菜单【插入】,可以插入一个【数据框】,如下图

    clip_image004

    标准动作是将该新建的数据框命名为“接图表”,然后选择接图表数据框,添加接图表图层。我在这里就用一个行政区界来表示,为了方便显示,将行政边界填充设置为无颜色,只显示边线。当然,如果有的只是边线数据,直接加载设置边线样式就行了。如下图

    clip_image005

    可以看到,大图中已经加入了一个小图,这个小图就是我们所说的接图表。使用选择工具,就是黑色箭头工具,将接图表移动到右上角位置,并且点击右键--属性,将修改接图表的图框样式和背景。一般将图框样式设置为简单的线,背景设置为纯白色,如下图

    clip_image006

    这样,接图表的基本模样就出来了。然后对接图表的图层显示一下标注信息,这样就像模象样了。再进一步就是要将两个图的范围对应起来,这一次就需要使用【标准工具】里面的缩放工具进行调整(千万不要用【布局】工具条上的工具,那只是相当于放大纸张在屏幕的显示而已)

    clip_image007

    最后,如果想两个数据框的范围能够对上,除了手动的方式之外,可以通过arcpy脚本来实行。可以参考mapping模块的具体方法

    clip_image008

    写完脚本之后可以在【地理处理】的Python中执行脚本进行对照。这里不做详细论述,在以后章节会有arcpy.mapping 模块的说明。

    总结:接图表其实不难实现,主要是很多人不清楚使用多个数据框可以实现该效果。

    展开全文
  • 全国1:20万地形地质图接图表-kml格式
  • echarts图表接入天地图,高德地图,geo解决方案!!!! echarts图表接入天地图,高德地图,geo解决方案!!!!
  • python可视化图表案例-网格地图与连接映射地图
  • 图表 工具

    2014-09-19 10:49:36
    坐标系统(北京54、西安80坐标系)、中央经线、分带方法(3度带或6度带)、地图比例尺(支持地图比例尺有1:100万、1:50万、1:25万、1:10万、1:5万、1:2.5万、1:1万和1:5000比例尺)、坐标是否加带号生成对应...
  • arcgis 10.0 接图表(1:10万),地图分幅
  • 坐标系统(北京54、西安80坐标系)、中央经线、分带方法(3度带或6度带)、地图比例尺(支持地图比例尺有1:100万、1:50万、1:25万、1:10万、1:5万、1:2.5万、1:1万和1:5000比例尺)、坐标是否加带号生成对应...
  • ArcGIS API for JavaScript目前提供的图表绘制接口十分有限,而且样式也并不美观,当我们在地图上添加相应的图表的时候,还是需要结合目前市面上其他的图表可视化插件来做。本文就介绍下如何使用ArcGIS API for ...
  • Arcgis图表工具

    热门讨论 2009-07-16 22:49:04
    坐标系统(北京54、西安80坐标系)、中央经线、分带方法(3度带或6度带)、地图比例尺(支持地图比例尺有1:100万、1:50万、1:25万、1:10万、1:5万、1:2.5万、1:1万和1:5000比例尺)、坐标是否加带号生成对应...
  • 大数据展示全国各省份信息,绘制地图,并在每个省份上叠加图表。 需要做的就是 1、绘制全国地图(不同省份根据数据的不同而颜色不同) 2、每个省份都需要单独叠加一个图表(饼图) 3、地图缩放、图表的大小跟随比例...

    场景:

    大数据展示全国各省份信息,绘制地图,并在每个省份上叠加图表。
    需要做的就是
    1、绘制全国地图(不同省份根据数据的不同而颜色不同)
    2、每个省份都需要单独叠加一个图表(饼图)
    3、地图缩放、图表的大小跟随比例一起缩放
    4、地图拖拽,图表根据一起移动
    这里面有一些坑

    效果图:

    截图未截完整,示例效果。
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    完整代码:

    mapOption.js配置项:
    let obj ={
        
    }
    export default {
        geo: {
            map: 'china',
            show: false,
            roam: false,
            label: {
                emphasis: {
                    show: false
                }
            },
            layoutSize: "100%",
            itemStyle: {
                normal: {
                }
            }
        },
        visualMap: {
            min: 0,
            max: 1000,
            left: 100,
            bottom: 45,
            showLabel: !0,
            backgroundColor:"#fff",
            text: ["高", "低"],
            pieces: [],
        },
        series: [
            {
                type: 'map',
                zoom:1.1,
                aspectScale: 0.9,
                layoutCenter: ["50%", "60%"], //地图位置
                layoutSize: "100%",
                zlevel: 3,
                scaleLimit: {
                    //滚轮缩放的极限控制
                    min: 1,
                    max: 1.5,
                },
                geo: {
                    show: true,
                    map: 'china',
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false,
                        }
                    },
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: '#031525',
                            borderColor: '#3B5077',
                        },
                        emphasis: {
                            areaColor: '#2B91B7',
                        }
                    }
                },
                roam: true,  // 是否开启鼠标缩放和平移漫游
                selectedMode: 'false', // 是否允许选中多个区域
                emphasis:{
                    label:{
                        show:true,
                        color:'#ffffff',
                    }
                },
                label: {
                    show: true,
                    color: "#FFFFFF",
                    fontSize: 12,
                },
                itemStyle: {
                    normal: {
                        areaColor: "#0c3653",
                        borderColor: "#1cccff",
                        borderWidth: 2,
                    },
                    emphasis: {
                        areaColor:"rgb(12,76,107)",   //鼠标悬停/选中颜色
                        label: {
                            show: true,
                            color: "#fff",
                            borderColor:"rgb(2,241,177)",
                           
                        },
                    },
                },
                data: [],
            },
        ]
    };
      
    
    其他例如china.json移步到datav下载即可:结构如下

    在这里插入图片描述

    <template>
      <div class="chart pt-10">
        <el-button type="primary" size="mini" @click="options.id=1">模式1</el-button>
        <el-button type="primary" size="mini" @click="options.id=11">模式2</el-button>
        <div id="mapChart" class="mapChart"></div>
      </div>
    </template>
    
    <script>
    import mapOption from './echarts/map'
    
    import chinaData from '@/assets/china.json'
    import liaoningPro from './echarts/liaoning.json'
    import shenyangCity from './echarts/shenyang.json'
    
    
    export default {
      data(){
        return{
          myChart: null,
          chinaCode:100000,
          curMapName:'china', // 当前地图名
          selectedMaps:[
            {
              name:'china',
              code:'100000',
            }
          ],
          //地图散点数据
          mapDotData:{
            input:{
              value:{}
            },
            output:{
              value:{
                rows:[]
              }
            }
          },
          typeIndex:1,
          //上一次的缩放层级
          lastZoomLevel:0,
          // 图例
          options:{
            id:1
          }
        }
    
      },
      props:{
      },
      async mounted(){
        await this.getMapData('china');
        window.addEventListener('resize',this.resizeCharts);
        
        
    
    
        // //这里是做地图下钻   预留一下吧  以后需要直接放开继续写逻辑目前也算是实现了下钻的操作
        // this.myChart.on('click', (params) => {
        //     console.log('空间',params)
        //     const map = params.name;
        //     if(map){
        //       this.curMapName = params.name;
        //       this.getMapData(map);
        //       // 为地图标题菜单存入(过滤同一地图多次点击情况)点击地图信息
        //       let selectedCodes = [];
        //       this.selectedMaps.forEach( item => selectedCodes.push(item.code));
        //       if(!selectedCodes.includes(map)){
        //         this.$set(this.selectedMaps,this.selectedMaps.length,{name: this.curMapName, code: map}); 
        //       }
        //       console.log(selectedCodes)
              
        //     }else{
        //       this.$message({message: '暂无地图数据',type: 'warning',showClose: true});
        //     }
        // });
        window.addEventListener("resize", (params)=> {
          if(Number(this.options.id)<10){
            this.resetDot(this.myChart, params);
          }else{
            this.resetPie(this.myChart, params);
          }
        })
      },
      beforeDestroy() {
        window.addEventListener('resize',this.resizeCharts);
      },
      watch:{
          "options.id":{
              async handler(v){
                  if(v){
                      this.myChart.dispose()
                      this.getMapData('china')
                  }
              }
          },
      },
      methods:{
        // 绘制地图
        async drawMapChart(mapName,mapJSON){
          if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
            this.myChart.dispose();
          }
          this.myChart = this.$echarts.init(document.getElementById('mapChart'));
          this.$echarts.registerMap(mapName,mapJSON);
          
          let seriesData = this.initMapData(mapJSON)
    
          //然后调用接口查询地图信息
          await this.getMapDotData()
          let arr = this.mapDotData.output.value.rows 
    
          for(var i =0;i<seriesData.length;i++){
            arr.forEach((item,index)=>{
              if(seriesData[i].name==item.xzqmc){
                seriesData[i].value = item.total
              }
            })
          }
          mapOption.series[0].map = mapName
          mapOption.series[0].data = seriesData
          //图例是配置的
          mapOption.visualMap.pieces =[{
                gt: 100,
                color: "#7f1100"
            }, {
                gte: 60,
                lte: 80,
                color: "#ff5428"
            }, {
                gte: 20,
                lt: 60,
                color: "#ff8c71"
            }, {
                gt: 0,
                lt: 20,
                color: "#ffd768"
          }],
          
          //先有个地图底图
          this.myChart.setOption(mapOption,true);
          if(Number(this.options.id)<10){
            //然后再叠加图表上去
            this.addPieToMap(this.myChart, this.mapDotData.output.value.rows );
          }else{
            this.addPartPieToMap(this.myChart, this.mapDotData.output.value.rows )
          }
          
    
          /*饼图跟着地图移动:pie*/
          this.myChart.on('georoam', (params)=> {
            if(Number(this.options.id)<10){
              this.resetDot(this.myChart, params);
            }else{
              this.resetPie(this.myChart, params);
            }
          });
    
          
        },
        initMapData(mapJson) {
          let mapData = [];
          for (let i = 0; i < mapJson.features.length; i++) {
            mapData.push({ name: mapJson.features[i].properties.name });
          }
          return mapData;
        },
        // 浏览器窗口大小改变时,重新加载图表以自适应
        resizeCharts(){
          this.$echarts.init(document.getElementById('mapChart')).resize()
        },
        // 获取地图数据
        async getMapData(map){
            if(map=='china'){
              await this.drawMapChart(this.curMapName,chinaData[0]);
            }else if(map=='辽宁省'){
              this.drawMapChart(this.curMapName,liaoningPro);
            }else{
              this.drawMapChart(this.curMapName,shenyangCity);
            }
        },
    
        //接口获取散点数据
        async getMapDotData(){
          //接口获取数据
          let rows = []
    
          if(Number(this.options.id)<10){
            rows =[
              {
                  "xzqmc": "四川省",
                  "total": 9088.51,
                  "dw": "万亩",
                  "xzqdm": "510000"
              },
              {
                  "xzqmc": "辽宁省",
                  "total": 482.99,
                  "dw": "万亩",
                  "xzqdm": "540000"
              },
              {
                  "xzqmc": "湖南省",
                  "total": 9088.51,
                  "dw": "万亩",
                  "xzqdm": "510000"
              },
              {
                  "xzqmc": "湖北省",
                  "total": 9088.51,
                  "dw": "万亩",
                  "xzqdm": "510000"
              },
              {
                  "xzqmc": "贵州省",
                  "total": 9088.51,
                  "dw": "万亩",
                  "xzqdm": "510000"
              },
              {
                  "xzqmc": "云南省",
                  "total": 9088.51,
                  "dw": "万亩",
                  "xzqdm": "510000"
              },
              {
                  "xzqmc": "青海省",
                  "total": 9088.51,
                  "dw": "万亩",
                  "xzqdm": "510000"
              },
              {
                  "xzqmc": "陕西省",
                  "total": 9088.51,
                  "dw": "万亩",
                  "xzqdm": "510000"
              },
              {
                  "xzqmc": "山西省",
                  "total": 9088.51,
                  "dw": "万亩",
                  "xzqdm": "510000"
              },
              {
                  "xzqmc": "新疆维吾尔自治区",
                  "total": 9088.51,
                  "dw": "万亩",
                  "xzqdm": "510000"
              },
              {
                  "xzqmc": "西藏自治区",
                  "total": 9088.51,
                  "dw": "万亩",
                  "xzqdm": "510000"
              },
              {
                  "xzqmc": "宁夏回族自治区",
                  "total": 9088.51,
                  "dw": "万亩",
                  "xzqdm": "510000"
              },
              {
                  "xzqmc": "甘肃省",
                  "total": 9088.51,
                  "dw": "万亩",
                  "xzqdm": "510000"
              },
              {
                  "xzqmc": "河南省",
                  "total": 9088.51,
                  "dw": "万亩",
                  "xzqdm": "510000"
              },
              {
                  "xzqmc": "安徽省",
                  "total": 9088.51,
                  "dw": "万亩",
                  "xzqdm": "510000"
              },
              {
                  "xzqmc": "山东省",
                  "total": 9088.51,
                  "dw": "万亩",
                  "xzqdm": "510000"
              },
              {
                  "xzqmc": "江苏省",
                  "total": 9088.51,
                  "dw": "万亩",
                  "xzqdm": "510000"
              },
              {
                  "xzqmc": "江西省",
                  "total": 9088.51,
                  "dw": "万亩",
                  "xzqdm": "510000"
              },
              {
                  "xzqmc": "福建省",
                  "total": 9088.51,
                  "dw": "万亩",
                  "xzqdm": "510000"
              },
            ]
          }else{
            rows=[
                {
                  "xzqmc":"辽宁省",
                  "xzqdm":"xxx",
                  "total":5.3,
                  "rows":[
                        {
                          "name":"五等地",
                          "value":"26",
                        },
                        {
                          "name":"一等地",
                          "value":"12",
                        },
                        {
                          "name":"四等地",
                          "value":"45",
                        },
                         {
                          "name":"三等地",
                          "value":"5",
                        },
                  ]
                },
                {
                  "xzqmc":"四川省",
                  "xzqdm":"xxx",
                  "total":5.3,
                  "rows":[
                        {
                          "name":"五等地",
                          "value":"26",
                        },
                        {
                          "name":"一等地",
                          "value":"12",
                        },
                        {
                          "name":"四等地",
                          "value":"45",
                        },
                         {
                          "name":"三等地",
                          "value":"5",
                        },
                  ]
                }
            ]
          }
    
          this.mapDotData.output.value.rows = rows
        },
        //添加散点图
        addPieToMap(chart,data){
          var sd = [];
          for (var i = 0; i < data.length; i++) {
              var randomValue = 20;
              var radius = randomValue;
              // var geoCoord = geoCoordMap[data[i].name];
             
              let geoCoord = chinaData[0].features.find((item)=>{
                return item.properties.name==data[i].xzqmc
              }).properties.center
              if (geoCoord) {
                  var vr = [];
                  //饼图的数据不进行映射
                  vr.push({
                      name: data[i].xzqmc,
                      value: data[i].total,
                      visualMap: false
                  }); 
                  var p = chart.convertToPixel({
                      seriesIndex: 0
                  }, geoCoord);
                  sd.push({
                      name: data[i].xzqmc,
                      type: 'pie',
                      // roseType: 'radius',
                      // tooltip: {
                      //     formatter: function(params) {
                      //         // return params.seriesName + "<br/>" + params.name + " : " + params.value + ' 亿元';
                      //         return params.total + ' 亩';
                      //     }
                      // },
                      radius: radius,
                      center: p,
                      data: vr,
                      zlevel: 4,
                      roam:false,
                      tooltip: {
                          formatter: '{a}<br/>{b}: {c}亿元 ({d}%)'
                      },
                      label: {
                          normal: {
                              show: true,
                              position: 'inside',
                              formatter: '{value|{c}}',
                              padding:[0,0,radius,0],
                              rich: {
                                  value: {
                                      fontSize: 12,
                                      color:'#ffffff',
                                  },
                              },
                          }
                      },
                      labelLine: {
                          normal: {
                              show: false
                          }
                      },
                  });
              }
          }
          //因为这个组件公用,发现配置项的series不能进行重置,所以在这里以这种方式手动重置
          mapOption.series = [ mapOption.series[0]]
          mapOption.series = mapOption.series.concat(sd)
          this.myChart.setOption(mapOption,true);
          return sd;
        },
        //重置散点图
        resetDot(chart, params) {
          var op = chart.getOption();
          var ops = op.series;
          var currentZoom = this.myChart.getOption().series[0].zoom
          
    
          let that = this
          ops.forEach(function(v, i) {
              if (i > 0) {
                  let geoCoord = chinaData[0].features.find((item)=>{
                    return item.properties.name==v.name
                  }).properties.center
                  var p = chart.convertToPixel({
                      seriesIndex: 0
                  }, geoCoord);
                  v.center = p;
                  v.label = {
                      normal: {
                          show: true,
                          position: 'inside',
                          formatter: '{value|{c}}',
                          padding:[0,0,v.radius * params.zoom||v.radius,0],
                          rich: {
                              value: {
                                  fontSize: 12,
                                  color:'#ffffff',
                              },
                          },
                      }
                  }
                  //超过地图的最大最小层级  这个图表就不要再伸缩了
                  if (params != 0 && params.zoom &&currentZoom!=1.5&&currentZoom!=1) {
                      v.radius = v.radius * params.zoom;
                      that.lastZoomLevel = params.zoom
                      return
                  }
                  
              }
          });
          chart.setOption(op, true);
        },
        //添加饼图
        addPartPieToMap(chart,data){
          var sd = [];
    
          for (var i = 0; i < data.length; i++) {
            var randomValue = Math.round(Math.random() * 30);
            var radius = randomValue <= 10 ? 10 : randomValue;
            let geoCoord = chinaData[0].features.find((item)=>{
              return item.properties.name==data[i].xzqmc
            }).properties.center
            if (geoCoord) {
              var vr = [];
              //饼图的数据不进行映射
              // vr.push({
              //     name: data[i].xzqmc,
              //     value: data[i].total,
              //     visualMap: false
              // }); 
              var p = chart.convertToPixel({
                  seriesIndex: 0
              }, geoCoord);
              sd.push({
                name: data[i].xzqmc,
                type: 'pie',
                //clockWise: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        shadowBlur: 20,
                        shadowColor: '#203665',
                        opacity:1,
                    }
                },
                tooltip: {
                  formatter: function(params) {
                    console.log('哈哈',params)
                      // return params.seriesName + "<br/>" + params.name + " : " + params.value + ' 亿元';
                      return params.value + ' 亩';
                  }
                },
                radius: [20, 30],
                // center: ['15%', '50%'],
                hoverAnimation: false,
                // radius: radius,
                center: p,
                zlevel: 4,
                data: data[i].rows
              });
            }
          }
          //因为这个组件公用,发现配置项的series不能进行重置,所以在这里以这种方式手动重置
          mapOption.series = [ mapOption.series[0]]
          mapOption.series = mapOption.series.concat(sd)
          this.myChart.setOption(mapOption,true);
          return sd;
        },
        //重置饼图
        resetPie(chart, params){
          var op = chart.getOption();
          var ops = op.series;
          ops.forEach(function(v, i) {
              if (i > 0) {
                   let geoCoord = chinaData[0].features.find((item)=>{
                    return item.properties.name==v.name
                  }).properties.center
                  var p = chart.convertToPixel({
                      seriesIndex: 0
                  }, geoCoord);
                  v.center = p;
                  if (params != 0 && params.zoom) {
                      v.radius = v.radius * params.zoom;
                  }else if (params != 0 && params.selected) {
                      var rangeFirstNumber = params.selected[0];
                      var rangeSecondNumber = params.selected[1];
                      var pd = v.data[this.typeIndex].value;
                      if (pd < rangeFirstNumber || pd > rangeSecondNumber) {
                          // v.itemStyle.normal.opacity = 0;
                          v.itemStyle = {
                              normal: {
                                  label: {
                                      show: false
                                  },
                                  labelLine: {
                                      show: false
                                  },
                                  shadowBlur: 20,
                                  shadowColor: '#203665',
                                  opacity:0,
                              }
                          }
                      } else {
                          // v.itemStyle.normal.opacity = 1;
                          v.itemStyle = {
                              normal: {
                                  label: {
                                      show: false
                                  },
                                  labelLine: {
                                      show: false
                                  },
                                  shadowBlur: 20,
                                  shadowColor: '#203665',
                                  opacity:1,
                              }
                          }
                      }
                  }else{
                      let zoomVal = chart.getOption().series[0].zoom
                      let arr = [10, 15]
                      for(var j = 0;j<arr.length;j++){
                          arr[j] = arr[j] * zoomVal
                      }
                      v.radius = arr
                  }
              
                  
              }
          });
          chart.setOption(op, true);
        }
      },
    }
    </script>
    
    
    <style lang="scss" scoped>
    .chart{
      background-size: 100% 100%;
      #mapChart{
        width: 100%;
        height: 1000px;
      }
      .mapChoose {
        color: #eee;
        .title {
          padding: 5px;
          border-top: 1px solid rgba(132, 219, 233, 0.8);
          border-bottom: 1px solid rgba(147, 235, 248, 0.8);
          cursor: pointer;
        }
        .icon {
          font-family: 'simsun';
          font-size: 25px;
          margin: 0 11px;
        }
      }
    }
    </style>
    
    展开全文
  • 可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。折线图、柱状图、、........

    Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表、地图)

    目录

    Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表、地图)

    一、简单介绍

    二、环境搭建

    三、使用 echarts

    四、自动缩放 echarts

    五、数据更新,自动刷新 echart 图表

    六、绘制折线图

    七、绘制饼图

    八、绘制全国地图

    九、绘制省地图(北京为例)

     十、绘制世界地图


    一、简单介绍

    Vue 开发的一些知识整理,方便后期遇到类似的问题,能够及时查阅使用。

    本节介绍,vue 中添加 echarts ,然后在 vue 中简单使用 ,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。

    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

    ECharts 提供了常规的折线图柱状图散点图饼图K线图,用于统计的盒形图,用于地理数据可视化的地图热力图线图,用于关系数据可视化的关系图treemap旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图仪表盘,并且支持图与图之间的混搭。

    ECharts 针对移动端交互做了细致的优化,例如移动端小屏上适于用手指在坐标系中进行缩放、平移。 PC 端也可以用鼠标在图中进行缩放(用鼠标滚轮)、平移等。

    Echarts 官网文档:Handbook - Apache ECharts

    Echarts 函数简介

    1、echarts. init

    Documentation - Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/zh/api.html#echarts.init

    echarts. init(dom?: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
        devicePixelRatio?: number,
        renderer?: string,
        useDirtyRect?: boolean, // 从 `5.0.0` 开始支持
        ssr?: boolean,          // 从 `5.3.0` 开始支持
        width?: number|string,
        height?: number|string,
        locale?: string         // 从 `5.0.0` 开始支持
    }) => ECharts

    创建一个 ECharts 实例,返回 echartsInstance,不能在单个容器上初始化多个 ECharts 实例。

    参数解释

    • dom

      实例容器,一般是一个具有高宽的 DIV 元素。只有在设置opts.ssr开启了服务端渲染后该参数才是可选。

      也支持直接使用canvas元素作为容器,这样绘制完图表可以直接将 canvas 作为图片应用到其它地方,例如在 WebGL 中作为贴图,这跟使用 getDataURL 生成图片链接相比可以支持图表的实时刷新。

    • theme

      应用的主题。可以是一个主题的配置对象,也可以是使用已经通过 echarts.registerTheme 注册的主题名称。参见 ECharts 中的样式简介

    • opts

      附加参数。有下面几个可选项:

      • devicePixelRatio设备像素比,默认取浏览器的值window.devicePixelRatio
      • renderer 渲染模式,支持'canvas'或者'svg'。参见 使用 Canvas 或者 SVG 渲染
      • ssr 是否使用服务端渲染,只有在 SVG 渲染模式有效。开启后不再会每帧自动渲染,必须要调用 renderToSVGString 方法才能得到渲染后 SVG 字符串。
      • useDirtyRect是否开启脏矩形渲染,只有在 Canvas 渲染模式有效,默认为false。参见 ECharts 5 新特性
      • width 可显式指定实例宽度,单位为像素。如果传入值为null/undefined/'auto',则表示自动取 dom(实例容器)的宽度。
      • height 可显式指定实例高度,单位为像素。如果传入值为null/undefined/'auto',则表示自动取 dom(实例容器)的高度。
      • locale 使用的语言,内置 'ZH''EN' 两个语言,也可以使用 echarts.registerLocale 方法注册新的语言包。目前支持的语言见 src/i18n

    2、echartsInstance. setOption

    Documentation - Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/zh/api.html#echartsInstance.setOption

    echartsInstance. setOption(option: Object, notMerge?: boolean, lazyUpdate?: boolean)
    or
    (option: Object, opts?: {
        notMerge?: boolean;
        replaceMerge?: string | string[];
        lazyUpdate?: boolean;
    })

    设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过 setOption 完成,ECharts 会合并新的参数和数据,然后刷新图表。如果开启动画的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

    • option: ECOption

      图表的配置项和数据,具体见配置项手册

    • opts

      • notMerge 可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。合并的规则,详见 组件合并模式。如果为 true,表示所有组件都会被删除,然后根据新 option 创建所有新组件。
      • replaceMerge 可选。用户可以在这里指定一个或多个组件,如:xAxis, series,这些指定的组件会进行 "replaceMerge"。如果用户想删除部分组件,也可使用 "replaceMerge"。详见 组件合并模式
      • lazyUpdate 可选。在设置完 option 后是否不立即更新图表,默认为 false,即同步立即更新。如果为 true,则会在下一个 animation frame 中,才更新图表。
      • silent 可选。阻止调用 setOption 时抛出事件,默认为 false,即抛出事件。

    组件合并模式

    对于一种类型的组件(如:xAxis, series):

    • 如果设置opts.notMergetrue,那么旧的组件会被完全移除,新的组件会根据option创建。
    • 如果设置opts.notMergefalse,或者没有设置 opts.notMerge
      • 如果在opts.replaceMerge里指定组件类型,这类组件会进行替换合并
      • 否则,会进行普通合并

    操作环境:

    • win 10
    • node v14.20.0
    • npm 8.5.3
    • @vue/cli 5.0.6
    • vue 2.6.14
    • echarts 5.3.3

    二、环境搭建

    1、基础的 node ,npm、vue 的环境搭建

    参见博文:Web 前端 之 Vue vue cli 环境的搭建简单整理(简单的一些注意事项)

    2、创建 vue 工程

    命令:vue create project-name,这里选择的是 vue 2

    3、工程创建好后,安装 echarts

    命令:npm install echarts -S

    三、使用 echarts

    全局引入 echarts

    1、main.js 组件中引入 echarts

    // 引入echarts
    import * as echarts from 'echarts'
    // 设置全局 echarts
    Vue.prototype.$echarts = echarts 

     2、添加 echart 显示容器

    在 HelloWorld.vue 中修改设置一个宽高的容器

    <template>
    	<div class="hello">
    		<div id="myChart" :style="{width: '50%', height: '300px'}"></div>
    	</div>
    </template>

     3、在 HelloWorld.vue 使用全局的 echarts

    <script>
    
    	export default {
    		name: 'HelloWorld',
    		mounted() {
    			this.drawBar();
    		},
    		methods: {
    			drawBar() {
    				// 基于准备好的dom,初始化echarts实例
    				// 全局使用 echarts 初始化(this.$echarts)
    				let myChart = this.$echarts.init(document.getElementById('myChart'))
    				
    				// 绘制图表
    				myChart.setOption({
    					title: {
    						text: '在Vue中使用echarts'
    					},
    					tooltip: {},
    					xAxis: {
    						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    					},
    					yAxis: {},
    					series: [{
    						name: '销量',
    						type: 'bar',
    						data: [5, 20, 36, 10, 10, 20]
    					}]
    				});
    			}
    		}
    	}
    </script>

    4、在 App.vue 引入 HelloWorld 中去除多余的,保留如图的

    5、回到终端 npm run serve,在浏览器中效果

    局部按需引入 echarts

    6、修改 HelloWorld.vue 脚本,局部引入 echarts

    <script>
    	// 引入echarts
    	import * as echarts from 'echarts'
    	export default {
    		name: 'HelloWorld',
    		mounted() {
    			this.drawBar();
    		},
    		methods: {
    			drawBar() {
    				// 基于准备好的dom,初始化echarts实例
    				// 全局使用 echarts 
    				// let myChart = this.$echarts.init(document.getElementById('myChart'))
    				// 调用局部的 echarts 
    				let myChart = echarts.init(document.getElementById('myChart'))
    				// 绘制图表
    				myChart.setOption({
    					title: {
    						text: '在Vue中使用echarts'
    					},
    					tooltip: {},
    					xAxis: {
    						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    					},
    					yAxis: {},
    					series: [{
    						name: '销量',
    						type: 'bar',
    						data: [5, 20, 36, 10, 10, 20]
    					}]
    				});
    			}
    		}
    	}
    </script>

    四、自动缩放 echarts

    Echarts本身是不支持自动缩放的,但是Echarts为我们提供了resize方法

    // 设置该 chart 的 resize 方法
    window.addEventListener("resize", myChart.resize);
    <script>
    	// 引入echarts
    	import * as echarts from 'echarts'
    	export default {
    		name: 'HelloWorld',
    		mounted() {
    			this.drawBar();
    		},
    		methods: {
    			drawBar() {
    				// 基于准备好的dom,初始化echarts实例
    				// 全局使用 echarts 
    				// let myChart = this.$echarts.init(document.getElementById('myChart'))
    				// 调用局部的 echarts 
    				let myChart = echarts.init(document.getElementById('myChart'))
    				// 绘制图表
    				myChart.setOption({
    					title: {
    						text: '在Vue中使用echarts'
    					},
    					tooltip: {},
    					xAxis: {
    						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    					},
    					yAxis: {},
    					series: [{
    						name: '销量',
    						type: 'bar',
    						data: [5, 20, 36, 10, 10, 20]
    					}]
    				});
    				
    				// 设置该 chart 的 resize 方法
    				window.addEventListener("resize", myChart.resize)
    			}
    		}
    	}
    </script>

    五、数据更新,自动刷新 echart 图表

    因为Echarts是数据驱动的,这意味着只要我们重新设置数据,那么图表就会随之重新渲染,这是实现本需求的基础。如果想要支持数据的自动刷新,必然需要一个监听器能够实时监听到数据的变化然后告知Echarts重新设置数据。可以使用 Vue 的 watch 为我们进行数据更新监听,从而刷新 echart

    1、抽出 option 属性

    				option: {
    					title: {
    						text: '在Vue中使用echarts'
    					},
    					tooltip: {},
    					xAxis: {
    						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    					},
    					yAxis: {},
    					series: [{
    						name: '销量',
    						type: 'bar',
    						data: [5, 20, 36, 10, 10, 20]
    					}]
    				}

    2、watch 中监听 option 数据的变化,同时更新 echart

    		watch:{
    			// 监听 option 更新
    			option: {
    				// 更新处理,也可以 handler(newVal,oldVal)
    				handler(newVal){
    					if(newVal){
    						this.myChart.setOption(newVal)
    					}
    				},
    				//关键,对象内部属性的监听(内部有数据更新,也进行对应的watch触发)
    				deep: true
    			},
    		},

    3、简单的数据更新处理函数(实际使用中从后台服务器获取数据更新)

    			//添加refreshData方法进行自动更新设置数据
    			refreshData() {
    				// 更新定时更新函数
    				setInterval(() => {
    					let sDataLength = this.option.series[0].data.length
    					console.log('refreshData')
    					let data = []
    					// 数据随机值更新
    					for (let i = 0; i < sDataLength; i++) {
    						data[i] = Math.floor(Math.random() * 100) + 1
    					}
    					// 更新数据
    					this.option.series[0].data = data
    				}, 1000)
    

    4、完整代码

    <template>
    	<div class="hello">
    		<div id="myChart" :style="{width: '50%', height: '300px'}"></div>
    	</div>
    </template>
    
    <script>
    	// 引入echarts
    	import * as echarts from 'echarts'
    	export default {
    		name: 'HelloWorld',
    		data() {
    			return {
    				myChart: null,
    				option: {
    					title: {
    						text: '在Vue中使用echarts'
    					},
    					tooltip: {},
    					xAxis: {
    						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    					},
    					yAxis: {},
    					series: [{
    						name: '销量',
    						type: 'bar',
    						data: [5, 20, 36, 10, 10, 20]
    					}]
    				}
    			}
    		},
    		watch:{
    			// 监听 option 更新
    			option: {
    				// 更新处理,也可以 handler(newVal,oldVal)
    				handler(newVal){
    					if(newVal){
    						this.myChart.setOption(newVal)
    					}
    				},
    				//关键,对象内部属性的监听(内部有数据更新,也进行对应的watch触发)
    				deep: true
    			},
    		},
    		
    		mounted() {
    			this.drawBar();
    		},
    		methods: {
    			drawBar() {
    				// 基于准备好的dom,初始化echarts实例
    				// 全局使用 echarts 
    				// this.myChart = this.$echarts.init(document.getElementById('myChart'))
    				// 调用局部的 echarts 
    				this.myChart = echarts.init(document.getElementById('myChart'))
    				// 绘制图表
    				this.myChart.setOption(this.option);
    
    				// 设置该 chart 的 resize 方法
    				window.addEventListener("resize", this.myChart.resize)
    				
    				// 动态刷线数据
    				this.refreshData()
    			},
    
    			//添加refreshData方法进行自动更新设置数据
    			refreshData() {
    				// 更新定时更新函数
    				setInterval(() => {
    					let sDataLength = this.option.series[0].data.length
    					console.log('refreshData')
    					let data = []
    					// 数据随机值更新
    					for (let i = 0; i < sDataLength; i++) {
    						data[i] = Math.floor(Math.random() * 100) + 1
    					}
    					// 更新数据
    					this.option.series[0].data = data
    				}, 1000)
    
    			}
    		}
    	}
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    
    </style>
    

    5、动态更新chart 效果

    六、绘制折线图

    1、更新 HelloWorld.vue 代码,绘制折线

    <template>
    	<div class="hello">
    		<div id="myChart" :style="{width: '50%', height: '300px'}"></div>
    	</div>
    </template>
    
    <script>
    	// 引入echarts
    	import * as echarts from 'echarts'
    	export default {
    		name: 'HelloWorld',
    		data() {
    			return {
    				myChart: null,
    				option: {
    					title: {
    						text: '曲线',
    					},
    					tooltip: {
    						trigger: 'axis',
    
    					},
    					legend: {
    						data: ['昨日(11月8日)', '今日(11月9日)']
    					},
    					grid: {
    						left: '1%',
    						right: '1%',
    						bottom: '3%',
    						containLabel: true
    					},
    					toolbox: {
    						show: false,
    						feature: {
    							dataZoom: {
    								yAxisIndex: 'none'
    							},
    							dataView: {
    								readOnly: false
    							},
    							magicType: {
    								type: ['line', 'bar']
    							},
    							restore: {},
    							saveAsImage: {}
    						}
    					},
    					color: ["red", "#CD3333"],
    					xAxis: {
    						type: 'category',
    						boundaryGap: false,
    						data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17',
    							'18', '19', '20', '21', '22', '23', '24'
    						]
    					},
    					yAxis: {
    						type: 'value',
    						name: '单位(kW)',
    						axisLabel: {
    							formatter: '{value}'
    						}
    					},
    					series: [{
    							name: '昨日(11月8日)',
    							type: 'line',
    							data: [110, 106, 110, 110, 318, 119, 205, 256, 156, 309, 256, 306, 206, 356, 456, 486,
    								565.45, 234, 156, 206, 126, 256, 150, 276
    							],
    
    						},
    						{
    							type: 'line',
    							name: '今日(11月9日)',
    							data: [210, 136, 120, 120, 118, 219, 195, 176, 156, 329, 356, 346, 406.54, 256, 156],
    						}
    					]
    				}
    			}
    		},
    		watch: {
    			// 监听 option 更新
    			option: {
    				// 更新处理,也可以 handler(newVal,oldVal)
    				handler(newVal) {
    					if (newVal) {
    						this.myChart.setOption(newVal)
    					}
    				},
    				//关键,对象内部属性的监听(内部有数据更新,也进行对应的watch触发)
    				deep: true
    			},
    		},
    
    		mounted() {
    			this.drawBar();
    		},
    		methods: {
    			drawBar() {
    				// 基于准备好的dom,初始化echarts实例
    				// 全局使用 echarts 
    				// this.myChart = this.$echarts.init(document.getElementById('myChart'))
    				// 调用局部的 echarts 
    				this.myChart = echarts.init(document.getElementById('myChart'))
    				// 绘制图表
    				this.myChart.setOption(this.option);
    
    				// 设置该 chart 的 resize 方法
    				window.addEventListener("resize", this.myChart.resize)
    
    			}
    		}
    	}
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    
    </style>
    

    2、效果图

    七、绘制饼图

    1、更新 HelloWorld .vue 代码,绘制饼图

    <template>
    	<div class="hello">
    		<div id="myChart" :style="{width: '50%', height: '300px'}"></div>
    	</div>
    </template>
    
    <script>
    	// 引入echarts
    	import * as echarts from 'echarts'
    	export default {
    		name: 'HelloWorld',
    		data() {
    			return {
    				myChart: null,
    				option: {
    					title: {
    						text: '某站点用户访问来源',
    						subtext: '纯属虚构',
    						x: 'center'
    					},
    					tooltip: {
    						trigger: 'item',
    						formatter: "{a} <br/>{b} : {c} ({d}%)"
    					},
    					legend: {
    						orient: 'vertical',
    						left: 'left',
    						data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    					},
    					series: [{
    						name: '访问来源',
    						type: 'pie',
    						radius: '55%',
    						center: ['50%', '60%'],
    						data: [{
    								value: 335,
    								name: '直接访问'
    							},
    							{
    								value: 310,
    								name: '邮件营销'
    							},
    							{
    								value: 234,
    								name: '联盟广告'
    							},
    							{
    								value: 135,
    								name: '视频广告'
    							},
    							{
    								value: 1548,
    								name: '搜索引擎'
    							}
    						],
    						itemStyle: {
    							emphasis: {
    								shadowBlur: 10,
    								shadowOffsetX: 0,
    								shadowColor: 'rgba(0, 0, 0, 0.5)'
    							}
    						}
    					}],
    				},
    			}
    		},
    		watch: {
    			// 监听 option 更新
    			option: {
    				// 更新处理,也可以 handler(newVal,oldVal)
    				handler(newVal) {
    					if (newVal) {
    						this.myChart.setOption(newVal)
    					}
    				},
    				//关键,对象内部属性的监听(内部有数据更新,也进行对应的watch触发)
    				deep: true
    			},
    		},
    
    		mounted() {
    			this.drawBar();
    		},
    		methods: {
    			drawBar() {
    				// 基于准备好的dom,初始化echarts实例
    				// 全局使用 echarts 
    				// this.myChart = this.$echarts.init(document.getElementById('myChart'))
    				// 调用局部的 echarts 
    				this.myChart = echarts.init(document.getElementById('myChart'))
    				// 绘制图表
    				this.myChart.setOption(this.option);
    
    				// 设置该 chart 的 resize 方法
    				window.addEventListener("resize", this.myChart.resize)
    
    			}
    		}
    	}
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    
    </style>
    

     2、效果图

    八、绘制全国地图

    1、下载 china.js ,引入到 assets/plugins/china.js

    (注意:如果china,js 报 eslint 错误,可以使用在china.js 文件头添加 /*eslint-disable*/ 忽略 eslint 检查)

    china.js 下载地址: echarts/test/data/map/js at master · apache/echarts · GitHub

    1、更新 HelloWorld.vue 代码,绘制地图

    <template>
    	<div class="hello">
    		<div id="myChart" :style="{width: '50%', height: '300px'}"></div>
    	</div>
    </template>
    
    <script>
    	// 局部引入 echarts
    	import * as echarts from 'echarts'
    	// 引入echarts
    	//let echarts = require('echarts/lib/echarts')
    	// 引入中国地图数据
    	import '@/assets/plugins/china.js' 
    	export default {
    		name: 'HelloWorld',
    		data() {
    			return {
    				myChart: null,
    				option: {
    					title: {
    						text: 'iphone销量',
    						subtext: '纯属虚构',
    						left: 'center'
    					},
    					tooltip: {
    						trigger: 'item'
    					},
    					legend: {
    						orient: 'vertical',
    						left: 'left',
    						data: ['iphone3', 'iphone4', 'iphone5']
    					},
    					visualMap: {
    						min: 0,
    						max: 2500,
    						left: 'left',
    						top: 'bottom',
    						text: ['高', '低'], // 文本,默认为数值文本
    						calculable: true
    					},
    					toolbox: {
    						show: false,
    						orient: 'vertical',
    						left: 'right',
    						top: 'center',
    						feature: {
    							dataView: {
    								readOnly: false
    							},
    							restore: {},
    							saveAsImage: {}
    						}
    					},
    					series: [{
    						itemStyle: {
    							normal: {
    								color: function(params) {
    									var colorList = [
    										'#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
    										'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
    										'#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
    									];
    									return colorList[params.dataIndex]
    								},
    
    							}
    						},
    						name: 'iphone3',
    						type: 'map',
    						mapType: 'china',
    						roam: false,
    						label: {
    							normal: {
    								show: true
    							},
    							emphasis: {
    								show: true
    							}
    						},
    						data: [{
    								name: '北京',
    								value: this.randomData()
    							},
    							{
    								name: '天津',
    								value: this.randomData()
    							},
    							{
    								name: '上海',
    								value: this.randomData()
    							},
    							{
    								name: '重庆',
    								value: this.randomData()
    							},
    							{
    								name: '河北',
    								value: this.randomData()
    							},
    							{
    								name: '河南',
    								value: this.randomData()
    							},
    							{
    								name: '云南',
    								value: this.randomData()
    							},
    							{
    								name: '辽宁',
    								value: this.randomData()
    							},
    							{
    								name: '黑龙江',
    								value: this.randomData()
    							},
    							{
    								name: '湖南',
    								value: this.randomData()
    							},
    							{
    								name: '安徽',
    								value: this.randomData()
    							},
    							{
    								name: '山东',
    								value: this.randomData()
    							},
    							{
    								name: '新疆',
    								value: this.randomData()
    							},
    							{
    								name: '江苏',
    								value: this.randomData()
    							},
    							{
    								name: '浙江',
    								value: this.randomData()
    							},
    							{
    								name: '江西',
    								value: this.randomData()
    							},
    							{
    								name: '湖北',
    								value: this.randomData()
    							},
    							{
    								name: '广西',
    								value: this.randomData()
    							},
    							{
    								name: '甘肃',
    								value: this.randomData()
    							},
    							{
    								name: '山西',
    								value: this.randomData()
    							},
    
    							{
    								name: '内蒙古',
    								value: this.randomData()
    							},
    							{
    								name: '陕西',
    								value: this.randomData()
    							},
    
    							{
    								name: '吉林',
    								value: this.randomData()
    							},
    							{
    								name: '福建',
    								value: this.randomData()
    							},
    							{
    								name: '贵州',
    								value: this.randomData()
    							},
    							{
    								name: '广东',
    								value: this.randomData()
    							},
    							{
    								name: '青海',
    								value: this.randomData()
    							},
    							{
    								name: '西藏',
    								value: this.randomData()
    							},
    							{
    								name: '四川',
    								value: this.randomData()
    							},
    							{
    								name: '宁夏',
    								value: this.randomData()
    							},
    							{
    								name: '海南',
    								value: this.randomData()
    							},
    							{
    								name: '台湾',
    								value: this.randomData()
    							},
    							{
    								name: '香港',
    								value: this.randomData()
    							},
    							{
    								name: '澳门',
    								value: this.randomData()
    							}
    						]
    					}]
    				},
    			}
    
    		},
    		watch: {
    			// 监听 option 更新
    			option: {
    				// 更新处理,也可以 handler(newVal,oldVal)
    				handler(newVal) {
    					if (newVal) {
    						this.myChart.setOption(newVal)
    					}
    				},
    				//关键,对象内部属性的监听(内部有数据更新,也进行对应的watch触发)
    				deep: true
    			},
    		},
    
    		mounted() {
    			this.drawBar();
    		},
    		methods: {
    			drawBar() {
    				// 基于准备好的dom,初始化echarts实例
    				// 全局使用 echarts 
    				// this.myChart = this.$echarts.init(document.getElementById('myChart'))
    				// 调用局部的 echarts 
    				this.myChart = echarts.init(document.getElementById('myChart'))
    				// 绘制图表
    				this.myChart.setOption(this.option);
    
    				// 设置该 chart 的 resize 方法
    				window.addEventListener("resize", this.myChart.resize)
    			},
    			
    			randomData() {
    				return Math.round(Math.random() * 1000);
    			}
    		}
    	}
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    
    </style>
    

    3、效果图

    九、绘制省地图(北京为例)

    1、下载beijing.js ,添加到assets/plugins/beijing.js

    (注意:如果beijing,js 报 eslint 错误,可以使用在china.js 文件头添加 /*eslint-disable*/ 忽略 eslint 检查)

    下载beijing.js地址:

    echarts/test/data/map/js/province at master · apache/echarts · GitHub

     

     2、更新 HelloWorld.vue 代码,绘制北京地图

    <template>
    	<div class="hello">
    		<div id="myChart" :style="{width: '50%', height: '400px'}"></div>
    	</div>
    </template>
    
    <script>
    	// 局部引入 echarts
    	import * as echarts from 'echarts'
    	// 引入echarts
    	//let echarts = require('echarts/lib/echarts')
    	// 引入中国地图数据
    	import '@/assets/plugins/beijing.js'
    	export default {
    		name: 'HelloWorld',
    		data() {
    			return {
    				myChart: null,
    				option: {
    					title: {
    						text: '北京地图',
    						subtext: '-。-'
    					},
    					tooltip: {
    						trigger: 'item',
    						formatter: function(a) {
    							return a[2];
    						}
    					},
    					legend: {
    						orient: 'vertical',
    						x: 'right',
    						data: ['数据名称']
    					},
    					dataRange: {
    						min: 0,
    						max: 1000,
    						color: ['orange', 'yellow'],
    						text: ['高', '低'], // 文本,默认为数值文本
    						calculable: true
    					},
    					series: [{
    						name: '数据名称',
    						type: 'map',
    						mapType: '北京',
    						selectedMode: 'single',
    						itemStyle: {
    							normal: {
    								label: {
    									show: true
    								}
    							},
    							emphasis: {
    								label: {
    									show: true
    								}
    							}
    						},
    						data: [{
    								name: '怀柔区',
    								value: Math.round(Math.random() * 1000)
    							},
    							{
    								name: '延庆县',
    								value: Math.round(Math.random() * 1000)
    							},
    							{
    								name: '密云县',
    								value: Math.round(Math.random() * 1000)
    							},
    							{
    								name: '昌平区',
    								value: Math.round(Math.random() * 1000)
    							},
    							{
    								name: '平谷区',
    								value: Math.round(Math.random() * 1000)
    							},
    							{
    								name: '顺义区',
    								value: Math.round(Math.random() * 1000)
    							},
    							{
    								name: '门头沟区',
    								value: Math.round(Math.random() * 1000)
    							},
    							{
    								name: '海淀区',
    								value: Math.round(Math.random() * 1000)
    							},
    							{
    								name: '朝阳区',
    								value: Math.round(Math.random() * 1000)
    							},
    							{
    								name: '石景山区',
    								value: Math.round(Math.random() * 1000)
    							},
    							{
    								name: '西城区',
    								value: Math.round(Math.random() * 1000)
    							},
    							{
    								name: '东城区',
    								value: Math.round(Math.random() * 1000)
    							},
    							{
    								name: '宣武区',
    								value: Math.round(Math.random() * 1000)
    							},
    							{
    								name: '丰台区',
    								value: Math.round(Math.random() * 1000)
    							},
    							{
    								name: '房山区',
    								value: Math.round(Math.random() * 1000)
    							},
    							{
    								name: '通州区',
    								value: Math.round(Math.random() * 1000)
    							},
    							{
    								name: '大兴区',
    								value: Math.round(Math.random() * 1000)
    							},
    
    						]
    					}]
    				},
    			}
    
    		},
    		watch: {
    			// 监听 option 更新
    			option: {
    				// 更新处理,也可以 handler(newVal,oldVal)
    				handler(newVal) {
    					if (newVal) {
    						this.myChart.setOption(newVal)
    					}
    				},
    				//关键,对象内部属性的监听(内部有数据更新,也进行对应的watch触发)
    				deep: true
    			},
    		},
    
    		mounted() {
    			this.drawBar();
    		},
    		methods: {
    			drawBar() {
    				// 基于准备好的dom,初始化echarts实例
    				// 全局使用 echarts 
    				// this.myChart = this.$echarts.init(document.getElementById('myChart'))
    				// 调用局部的 echarts 
    				this.myChart = echarts.init(document.getElementById('myChart'))
    				// 绘制图表
    				this.myChart.setOption(this.option);
    
    				// 设置该 chart 的 resize 方法
    				window.addEventListener("resize", this.myChart.resize)
    			},
    		}
    	}
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    
    </style>
    

    3、效果图

     十、绘制世界地图

    注意:也可以在:

    1、下载 world.js,添加到assets/plugins/world.js

    (注意:如果world,js 报 eslint 错误,可以使用在china.js 文件头添加 /*eslint-disable*/ 忽略 eslint 检查)

    下载world.js地址: echarts/world.js at master · apache/echarts · GitHub

    2、在 public中添加一个 jsons/world.json,然后,更新 HelloWorld.vue 代码,绘制地图

    这里添加了一个 axios 进行 json 加载(npm install axios -S)

    <template>
    	<div class="hello">
    		<div id="myChart" :style="{width: '50%', height: '400px'}"></div>
    	</div>
    </template>
    
    <script>
    	// 局部引入 echarts
    	import * as echarts from 'echarts'
    	// 引入echarts
    	//let echarts = require('echarts/lib/echarts')
    	// 引入中国地图数据
    	import '@/assets/plugins/world.js'
    	import axios from 'axios'
    	export default {
    		name: 'HelloWorld',
    		data() {
    			return {
    				myChart: null,
    				option: {
    
    				}
    			}
    		},
    		watch: {
    			// 监听 option 更新
    			option: {
    				// 更新处理,也可以 handler(newVal,oldVal)
    				handler(newVal) {
    					if (newVal) {
    						this.myChart.setOption(newVal)
    					}
    				},
    				//关键,对象内部属性的监听(内部有数据更新,也进行对应的watch触发)
    				deep: true
    			},
    		},
    
    		mounted() {
    			this.getWorld();
    		},
    		methods: {
    			getWorld() {
    
    				axios.get('jsons/world.json').then((res) => {
    					let namemap = res.data.namemap
    					let dataArr = res.data.dataArr
    					this.drawMap(namemap, dataArr)
    				})
    			},
    			drawMap(name, data) {
    				// 基于准备好的dom,初始化echarts实例
    				let chart = echarts.init(document.getElementById('myChart'))
    				// 监听屏幕变化自动缩放图表
    				window.addEventListener('resize', function() {
    					chart.resize()
    				})
    				// 绘制图表
    				chart.setOption({
    					// 图表主标题
    					title: {
    						text: '世界地图', // 主标题文本,支持使用 \n 换行
    						top: 10, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
    						left: 'center', // 值: 'left', 'center', 'right' 同上
    						textStyle: { // 文本样式
    							fontSize: 24,
    							fontWeight: 600,
    							color: '#000'
    						}
    					},
    					grid: {
    						width: '100%',
    						height: '100%',
    						left: '0%',
    						right: '0%',
    						bottom: '0%',
    						containLabel: true
    					},
    					// 提示框组件
    					tooltip: {
    						trigger: 'item', // 触发类型, 数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用
    						// 提示框浮层内容格式器,支持字符串模板和回调函数两种形式
    						// 使用函数模板  传入的数据值 -> value: number | Array
    						formatter: function(val) {
    							if (val.data == null) return;
    							return val.data.name + ': ' + val.data.value
    						}
    					},
    					// 视觉映射组件
    					visualMap: {
    						min: 0,
    						max: 10000,
    						text: ['max', 'min'],
    						realtime: false,
    						calculable: true,
    						color: ['#0064d0', '#c3e0ff'],
    					},
    					series: [{
    						type: 'map', // 类型
    						// 系列名称,用于tooltip的显示,legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
    						name: '世界地图',
    						mapType: 'world', // 地图类型
    						// 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move' 设置成 true 为都开启
    						roam: true,
    						// 图形上的文本标签
    						label: {
    							show: false // 是否显示对应地名
    						},
    						zoom: 1.2,
    						// 地图区域的多边形 图形样式
    						itemStyle: {
    							// areaColor: '#7B68EE', // 地图区域的颜色 如果设置了visualMap,areaColor属性将不起作用
    							borderWidth: 0.5, // 描边线宽 为 0 时无描边
    							borderColor: '#000', // 图形的描边颜色 支持的颜色格式同 color,不支持回调函数
    							borderType: 'solid' // 描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'
    						},
    						// 高亮状态下的多边形和标签样式
    						emphasis: {
    							label: {
    								show: true, // 是否显示标签
    								color: '#fff' // 文字的颜色 如果设置为 'auto',则为视觉映射得到的颜色,如系列色
    							},
    							itemStyle: {
    								areaColor: '#FF6347' // 地图区域的颜色
    							}
    						},
    						// 自定义地区的名称映射
    						nameMap: name,
    						// 地图系列中的数据内容数组 数组项可以为单个数值
    						data: data
    					}]
    				})
    
    			},
    		}
    	}
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    
    </style>
    

    3、效果图

    展开全文
  • uCharts是一个高性能的跨平台图表库,支持H5、APP、小程序(微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、360小程序)、Vue、Taro等更多支持canvas的框架平台,支持饼图、圆环图、线图...
  • 创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图,同时支持任意维度的堆积和多图表混合展现。</p><p>...
  • Echarts 3D地图图表

    千次阅读 2019-07-30 09:07:52
    需求:实现如图所示的3D地图图表 (1)原本使用的highcharts没有3d地图的功能,搜索插件也没有可替代的方案,选择echarts理由是在地图方面百度拥有毋庸置疑的实力 ... (2)通过代码可以轻易写出例子的效果,但是想...
  • ChartCube 图表魔方是:AntV 在线图表制作工具拖拽之间快速搞定图表制作工具,无论你是设计师,产品经理,还是开发都可以使用此工具配置你需要的图表效果。本次发布在既统计图表之后,我们新增了地理空间域数据可视...
  • Echarts数据可视化图表案例:包括柱图,饼图,折线图,地图等数据展示图表;案例下载后直接使用webstrom或idea打开,在编辑器内打开html
  • 地图叠加图表展示

    2020-04-23 21:11:18
    通常我们获取到的表格、属性表信息较多不易的进行数据表达,这样我们都会采用图表的形式进行分类统治便于用户读取信息,比如常用到的折线图、柱状图、散点图以及饼图而对于图表更对用Echarts,结合Echarts图表有几种...
  • antv,图表地图

    千次阅读 2020-07-27 15:55:15
    在这里补充一种新的图表地图框架,虽然做得不如echarts强大,适合快速开发节奏,让前端程序员在除了echarts以外还可以多一种选择。 antv antv是蚂蚁金服团队打造的图表地图框架(用过antd的同学应该知道这个团队)...
  • 第七章 绘制3D图表和统计地图

    千次阅读 2022-03-28 10:48:02
    第七章 绘制3D图表和统计地图 这节课主要学习了如何使用mplot3d工具包绘制3D图表,然后介绍了使用anima tion模块制作动画,最后学习了使用basemap工具包绘制统计地图等。 下来是课堂练习的一些例题: import ...
  • matplotlib不仅专注于二维图表的绘制,也具有绘制3D图表、统计地图的功能,并将这些功能分别封装到工具包mpl_toolkits.mplot3d。mpl_toolkits.basemap中,另外还可以结合animation模块给图表添加动画效果。 matplt ...
  • 实现在Echarts地图的tooltip提示框中绘制图表 最近遇到一个需求是需要在地图中,鼠标点击或者停留在地图中某一片区域时,该区域显示亮高和显示tooltip提示框信息,但是难点在于需要在tooltip提示框中再绘制一层图表...
  • vue引入echarts图表根据接口请求获取数据 下载echarts npm i echarts -S main.js引入echarts Vue.use(echarts); Vue.prototype.$echarts = echarts; 1.html 命名id 在带有id的盒子上进行绘制图表 <div class=...
  • ECharts,缩写来自 Enterprise Charts,商业级数据图表,是百度的一个开源的数据可视化工具,一个纯 Javascript 的图表库。目前很多商业项目都在使用,不但好用而且是免费。 #二、数据接口从腾讯新闻得到 #三、直接...
  • 这次呢,我想讲讲地图可视化的内容,以前我也写过用Python的内置库绘制地图,但总感觉不够美观。如何才能在短时间内制作漂亮的可视化地图呢,我觉得Python+可视化工具是不错的选择。 以下动态可视化地图就是J哥亲手...
  • 60种数据可视化图表总结

    千次阅读 2022-05-17 21:17:39
    可视化图表种类如此之多,什么场景下应该用什么图表展示,是一个让人头秃的难题。 数据可视化的爱好者Severino Ribecca,他在自己的网站上收录了 60 种可视化图表样式以及它们分别适用于什么样的场景,并且推荐了...
  • 效果图 完整代码在最下面 基本效果是,左侧默认显示最大占比的区域,旋转到右侧,同时两条线的起点是左侧扇形区域 上下两点,两条线的终点是右侧扇形的上下两点。 ...实现思路,两条线是div定位实现的,这里利用...
  • 像这样:这样,还有这样,话不多说,下来介绍如何做出这些图表吧。电脑端进入这个网站https://lbs.amap.com(高德开放平台)打开网站之后找到这个位置,然后点击进去,出现如下界面,按指示注册:点击『自定义地图』...
  • 帆软图表切换接口和图标轮播接口

    千次阅读 2018-12-18 13:38:48
    图表切换接口(超链) http://help.finereport.com/doc-view-2330.html 图标轮播接口 http://help.finereport.com/doc-view-2300.html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,985
精华内容 7,994
关键字:

地图接图表