2. 程式人生 > 其它 >echarts遷移圖動態載入

echarts遷移圖動態載入

阿新 • • 發佈：2021-06-20

遷移圖

獲取遷移城市的經緯度

可以呼叫高德的介面，實現根據地名找尋經緯度的方法

#!/usr/bin/env python3
#-*- coding:utf-8 -*-
'''
利用高德地圖api實現地址和經緯度的轉換
'''
import requests

def geocode(address):
        parameters = {'address': address, 'key': 'your key'}
        base = 'http://restapi.amap.com/v3/geocode/geo'
        response = requests.get(base, parameters)
        answer 
 
= response.json()
        print(answer)
        if answer['geocodes']==[]:
            print("null")
        else:
            print(address + "的經緯度：", answer['geocodes'][0]['location'])
        str=answer['geocodes'][0]['location']
        list=str.split(',')
        newlist=[]
        for it in list:
            newlist.append(float(it))
        
 
print(newlist)

if __name__=='__main__':
        #address = input("請輸入地址:")
        address = '邯鄲'
        geocode(address)

輸出對應的格式化形式，如下

    var myecharts = null;
    var geoCoordMap = {
  "東臺": [
    120.67086,
    32.765772
  ],
  "東海": [
    118.77406,
    34.528021
  ],
  "豐縣": [
    116.595391,
    
 
34.693906
  ],
  "豐涇村": [
    120.557053,
    31.500551
  ],
  "雲龍區": [
    117.25156,
    34.253167
  ],
  "儀徵市": [
    119.184766,
    32.272258
  ],
  "六合區": [
    118.821401,
    32.322247
  ],
  "吳中區": [
    120.631898,
    31.264212
  ],
  "吳江": [
    120.640272,
    30.976323
  ],
  "大豐": [
    120.686455,
    33.241831
  ],
  "太倉": [
    121.125358,
    31.441361
  ],
  "宜興": [
    119.804423,
    31.362399
  ],
  "寶應縣": [
    119.360729,
    33.240392
  ],
  "宿城區": [
    118.242534,
    33.963029
  ],
  "宿豫區": [
    118.330782,
    33.946822
  ],
  "宿遷沭陽": [
    118.275198,
    33.963232
  ],
  "宿遷泗陽": [
    118.275198,
    33.963232
  ],
  "常州市": [
    119.973987,
    31.810689
  ],
  "常熟": [
    120.757951,
    31.649566
  ],
  "建鄴區": [
    118.731694,
    32.003552
  ],
  "開發區": [
    105.204857,
    37.514206
  ],
  "徐州": [
    117.284124,
    34.205768
  ],
  "徐州雲龍區": [
    117.25156,
    34.253167
  ],
  "揚州市開發區": [
    119.427323,
    32.337737
  ],
  "新沂市": [
    118.354537,
    34.36958
  ],
  "崑山": [
    120.974177,
    31.341479
  ],
  "棲霞區": [
    118.909246,
    32.096228
  ],
  "江都區": [
    119.569989,
    32.434672
  ],
  "沛縣": [
    116.937532,
    34.721656
  ],
  "沛縣*": [
    116.937532,
    34.721656
  ],
  "泉山區": [
    117.193805,
    34.244258
  ],
  "泗陽縣": [
    118.703038,
    33.72314
  ],
  "泰興": [
    119.92869,
    32.13105
  ],
  "浦口區": [
    118.627895,
    32.059093
  ],
  "淮陰區": [
    119.034725,
    33.631893
  ],
  "玄武區": [
    118.797861,
    32.048687
  ],
  "鹽都區": [
    120.153898,
    33.338094
  ],
  "睢寧縣": [
    117.941563,
    33.912598
  ],
  "蘇州高新區": [
    120.433904,
    31.329341
  ],
  "賈汪區": [
    117.466687,
    34.435506
  ],
  "賈汪區(全市)": [
    117.466687,
    34.435506
  ],
  "賈汪區(全市）": [
    117.466687,
    34.435506
  ],
  "連雲區": [
    119.338788,
    34.760249
  ],
  "邗江區": [
    119.398015,
    32.377528
  ],
  "邳州市": [
    118.012531,
    34.338888
  ],
  "金湖縣": [
    119.020585,
    33.025433
  ],
  "銅山區": [
    117.169421,
    34.1807
  ],
  "鎮江市": [
    119.425836,
    32.187849
  ],
  "阜寧": [
    119.8295,
    33.776645
  ],
  "靖江": [
    120.265519,
    31.99775
  ],
  "高淳區": [
    118.892085,
    31.328471
  ],
  "鼓樓區": [
    114.348307,
    34.788561
  ]
};

基礎圖表的設定

var planePath = 'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705';

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = geoCoordMap[dataItem[0].name];
                var toCoord = geoCoordMap[dataItem[1].name];
                if (fromCoord && toCoord) {
                    res.push([{
                        coord: fromCoord
                    }, {
                        coord: toCoord
                    }]);
                }
            }
            return res;
        };

        var color = ['#3ed4ff', '#ffa022', '#a6c84c','#d71345','#8552a1','#deab8a'];
        var series=[];

        var option = {
            backgroundColor: '#080a20',
            title: {
                left: 'left',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                top: 'bottom',
                left: 'right',
                data: [],
                textStyle: {
                    color: '#fff'
                },
                selectedMode: 'single'
            },
            geo: {
                map: 'china',
                zoom: 1.2,
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#142957',
                        borderColor: '#0692a4'
                    },
                    emphasis: {
                        areaColor: '#0b1c2d'
                    }
                }
            },
            series: series
        };
View Code

進行非同步互動載入資料

其中data.one|two|three等的格式為：

{
  "five": [
    [
      {
        "name": "連雲區"
      },
      {
        "name": "連雲區",
        "value": 200
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "高淳區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "建鄴區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "鼓樓區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "浦口區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "六合區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "泰興",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "泗陽縣",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "阜寧",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "東臺",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "江都區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "寶應縣",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "邗江區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "儀徵市",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "徐州雲龍區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "開發區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "豐縣",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "沛縣*",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "銅山區",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "睢寧縣",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "新沂市",
        "value": 55
      }
    ],
    [
      {
        "name": "連雲區"
      },
      {
        "name": "賈汪區",
        "value": 55
      }
    ]
  ],
  "four": [
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "金湖縣",
        "value": 200
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "連雲區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "浦口區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "泰興",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "鹽都區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "寶應縣",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "鎮江市",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "常熟",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "開發區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "豐縣",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "沛縣*",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "銅山區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "睢寧縣",
        "value": 55
      }
    ]
  ],
  "name": [
    "草履蚧",
    "麻皮蝽",
    "扁刺蛾",
    "人紋汙燈蛾",
    "霜天蛾",
    "楊扇舟蛾"
  ],
  "one": [
    [
      {
        "name": "徐州"
      },
      {
        "name": "徐州",
        "value": 200
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "雲龍區",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "鼓樓區",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "泉山區",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "開發區",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "豐縣",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "沛縣",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "銅山區",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "睢寧縣",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "邳州市",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "新沂市",
        "value": 55
      }
    ],
    [
      {
        "name": "徐州"
      },
      {
        "name": "賈汪區(全市）",
        "value": 55
      }
    ]
  ],
  "six": [
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "金湖縣",
        "value": 200
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "泰興",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "靖江",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "江都區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "徐州雲龍區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "鼓樓區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "泉山區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "開發區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "豐縣",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "沛縣",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "銅山區",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "睢寧縣",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "邳州市",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "新沂市",
        "value": 55
      }
    ],
    [
      {
        "name": "金湖縣"
      },
      {
        "name": "賈汪區(全市)",
        "value": 55
      }
    ]
  ],
  "three": [
    [
      {
        "name": "東海"
      },
      {
        "name": "東海",
        "value": 200
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "泰興",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "宿遷泗陽",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "宿城區",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "江都區",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "雲龍區",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "鼓樓區",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "開發區",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "豐縣",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "沛縣",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "銅山區",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "睢寧縣",
        "value": 55
      }
    ],
    [
      {
        "name": "東海"
      },
      {
        "name": "新沂市",
        "value": 55
      }
    ]
  ],
  "two": [
    [
      {
        "name": "宜興"
      },
      {
        "name": "宜興",
        "value": 200
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "常州市",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "淮陰區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "金湖縣",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "浦口區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "六合區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "玄武區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "棲霞區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "靖江",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "宿遷沭陽",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "宿城區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "宿豫區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "阜寧",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "大豐",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "東臺",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "江都區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "寶應縣",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "揚州市開發區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "鎮江市",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "常熟",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "吳中區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "崑山",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "吳江",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "蘇州高新區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "太倉",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "豐涇村",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "徐州",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "雲龍區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "鼓樓區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "泉山區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "開發區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "豐縣",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "沛縣",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "銅山區",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "睢寧縣",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "邳州市",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "新沂市",
        "value": 55
      }
    ],
    [
      {
        "name": "宜興"
      },
      {
        "name": "賈汪區(全市)",
        "value": 55
      }
    ]
  ]
}
View Code

獲取對應的格式的程式碼如下：

import requests
def geocode(address):
    parameters = {'address': address, 'key': '3409090984aea93d6ee622ffa4097165'}
    base = 'http://restapi.amap.com/v3/geocode/geo'
    response = requests.get(base, parameters)
    answer = response.json()
    print(answer)
    #print(address + "的經緯度：", answer['geocodes'][0]['location'])
    if answer['geocodes']==[]:
        return "null"
    str = answer['geocodes'][0]['location']
    list = str.split(',')
    newlist = []
    for it in list:
        newlist.append(float(it))
    return newlist

#獲取14中昆蟲的分佈資訊場所的遷移圖
@app.route('/getinsectlocation',methods=['GET','POST'])
def getinsectlocation():
    db = MySqLHelper()
    insects=['草履蚧','麻皮蝽','扁刺蛾','人紋汙燈蛾','霜天蛾','楊扇舟蛾']
    names=['one','two','three','four','five','six']
    result={}
    ans={}
    data=[]
    i=0
    for it in insects:
        l=[]
        start=""
        f=0
        sql="select * from insect where name='"+it+"'"
        ret, count = db.selectall(sql=sql)
        area=""
        if count != 0:
            for row in ret:
                area = row[6]
        list=area.split('、')
        for tt in list:
            if tt!="":
                if f == 0:
                    f = 1
                    start = tt
                l2=[]
                vas={"name":start}
                if start==tt:
                    vas2={"name":tt,"value":200}
                else:
                    vas2={"name":tt,"value":55}
                l2.append(vas)
                l2.append(vas2)
                l.append(l2)
        ans[names[i]]=l
        i=i+1
    ans["name"]=insects
    print(ans)
    return jsonify(ans)
View Code

前臺進行相應的資料展示

function fetchData() {

            $.post(
            "/getinsectlocation",
            function(data){

                [[data.name[0], data.one], [data.name[1], data.two], [data.name[2], data.three],[data.name[3], data.four],[data.name[4], data.five],[data.name[5], data.six]].forEach(function (item, i) {
                    //myecharts.hideLoading();
            series.push({
                name: item[0],
                type: 'lines',
                zlevel: 1,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0.7,
                    color: '#fff',
                    symbolSize: 3
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 0,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            }, {
                name: item[0],
                type: 'lines',
                zlevel: 2,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: planePath,
                    symbolSize: 15
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 1,
                        opacity: 0.4,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            }, {
                name: item[0],
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    brushType: 'stroke'
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{b}'
                    }
                },
                symbolSize: function (val) {
                    return val[2] / 8;
                },
                itemStyle: {
                    normal: {
                        color: color[i]
                    }
                },
                data: item[1].map(function (dataItem) {
                    return {
                        name: dataItem[1].name,
                        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                })
            });
        });
            option.series = series;

            // 使用指定的配置項和資料顯示圖表
            myecharts.setOption(option);

            },
            "json"
        );

    }

主函式執行順序：

(function () {

        myecharts = echarts.init($('.map .geo')[0]);
        myecharts.setOption(option);
        //myecharts.showLoading();
        fetchData();

    })();

成果展示

遇到的問題

一開始並沒有直接找出對應的city的經緯度值，而是呼叫高德的介面來獲取對應的值，再返回前端進行展示，發現請求量大之後，導致些許資料找不到，進而程式卡死

這樣前臺獲取不到資料，就無法展示；即使請求到前臺，經歷的時間也是使用者無法等待的。

解決方法：

因此，我就寫了一個測試介面，獲取到所有的昆蟲分佈城市的經緯度值，將其放到前端，並將一些找不到經緯度的city去掉，避免報錯

一頓流程走完後，資料就可以快捷的展示。

相關推薦

echarts遷移圖動態載入

遷移圖 獲取遷移城市的經緯度 可以呼叫高德的介面，實現根據地名找尋經緯度的方法

springboot動態載入Echarts柱狀圖

本文例項為大家分享了springboot動態載入Echarts柱狀圖的具體程式碼，供大家參考，具體內容如下

spring boot動態載入Echart餅狀圖

本文例項為大家分享了spring boot動態載入Echart餅狀圖的具體程式碼，供大家參考，具體內容如下

vue echarts餅圖封裝以及同一個元件2個餅圖不載入問題解決

0 環境 系統：win10前端框架：vue前端IDE：vscode 1 餅圖封裝 1 安裝echarts npminstallecharts--save

echarts動態載入資料無法更新series

技術標籤：其他vue echarts動態載入資料無法更新series 更改前 setOptions({week,ruleArr,totalData} = {}) {

ECharts繪製圖例動態變化的柱狀圖

技術標籤：echarts資料視覺化jshtml5 ECharts繪製圖例動態變化的柱狀圖 或許想要 柱狀圖 實現下面這樣的效果？

echarts折線圖資料動態渲染（調介面）

<template> <div id=\"mainw\" style=\"width: 750px; height: 400px\"></div> </template>

vue echarts實現柱狀圖動態展示

本文例項為大家分享了 echarts實現柱狀圖動態展示的具體程式碼，供大家參考，具體內容如下

echarts地圖動態載入市縣區資料

需求：需要獲取全省的資料，展示出來，並且點選可深入到各個省市區，並且滾動滾輪可以退出省級市級

動態建立echarts雷達圖

.radar {　　width: 33%;　　height: 300px;　　float: left;　　margin: 10px 0;} <div style=\"line-height: 30px;background-color: white;overflow: hidden;margin: 0 20px 15px 20px;\">

echarts資料動態載入導致記憶體洩露

　　一、問題： 　　這周開發了一個專案，需要動態載入曲線的資料，資料從右往左不斷的推進。部署測試的第二天後臺就說瀏覽器崩潰了，報out of memory錯誤。

Echarts;雷達圖；setInterval()；動態效果

<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <!-- 引入 ECharts 檔案 -->

arcgis for js 3.x 圖層載入（切片，動態載入）

適合arcgis for js 3.x 版本 <!DOCTYPE html> <html> <head> <meta charset=\"utf-8\">

echarts 折線圖 橫軸動態時間

demo：https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2  文件：https://echarts.apache.org/zh/option.html#series-line

SpringBoot整合Shiro 實現動態載入許可權

一、前言 本文小編將基於 SpringBoot 整合 Shiro實現動態uri許可權，由前端vue在頁面配置uri，Java後端動態重新整理許可權，不用重啟專案，以及在頁面分配給使用者 角色 、 按鈕 、uri 許可權後，後端動態分配許可權

SpringSecurity動態載入使用者角色許可權實現登入及鑑權功能

很多人覺得Spring Security實現登入驗證很難，我最開始學習的時候也這樣覺得。因為我好久都沒看懂我該怎麼樣將自己寫的用於接收使用者名稱密碼的Controller與Spring Security結合使用，這是一個先入為主的誤區。後來

python爬取Ajax動態載入網頁過程解析

常見的反爬機制及處理方式 1、Headers反爬蟲 ：Cookie、Referer、User-Agent 解決方案: 通過F12獲取headers,傳給requests.get()方法

vue如何實現動態載入指令碼

這篇文章主要介紹了vue如何實現動態載入指令碼,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

python+selenium+PhantomJS抓取網頁動態載入內容

環境搭建 準備工具：pyton3.5,selenium,phantomjs 我的電腦裡面已經裝好了python3.5 安裝Selenium

python GUI庫圖形介面開發之PyQt5動態載入QSS樣式檔案

在Qt中經常需要使用樣式，為了降低耦合性（與邏輯程式碼分離），我們通常會定義一個QSS檔案，然後編寫各種控制元件（QLabel，QLIneEdit，QPushButton等）的樣式，最後使用QApplication或QMainWindow來載入樣式，這樣