├── .eslintignore ├── .npmrc ├── config ├── prod.env.js ├── test.env.js ├── dev.env.js └── index.js ├── images └── china-map.png ├── .vscode └── settings.json ├── test ├── unit │ ├── .eslintrc │ ├── specs │ │ └── Hello.spec.js │ ├── index.js │ └── karma.conf.js └── e2e │ ├── specs │ └── test.js │ ├── custom-assertions │ └── elementCount.js │ ├── runner.js │ └── nightwatch.conf.js ├── .editorconfig ├── .postcssrc.js ├── src ├── store │ ├── index.js │ └── modules │ │ └── ChinaMap.js ├── main.js └── components │ └── index.vue ├── index.html ├── .babelrc ├── .gitignore ├── .eslintrc.js ├── static └── data │ └── heatChinaRealData.json ├── package.json └── README.md /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | # China Mirror 2 | registry=https://registry.npmmirror.com 3 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /images/china-map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengchuu/vue-china-map/HEAD/images/china-map.png -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "window.title": "${rootName}${separator}${dirty}${activeEditorShort}${separator}${profileName}${separator}${appName}" 3 | } 4 | -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "globals": { 6 | "expect": true, 7 | "sinon": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const devEnv = require('./dev.env') 4 | 5 | module.exports = merge(devEnv, { 6 | NODE_ENV: '"testing"' 7 | }) 8 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import ChinaMap from './modules/ChinaMap' 4 | 5 | Vue.use(Vuex) 6 | 7 | export default new Vuex.Store({ 8 | modules: { 9 | ChinaMap 10 | } 11 | }) 12 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Index from './components/index.vue' 3 | import store from './store/index' 4 | 5 | let ChinaMap = new Vue({ 6 | el: '#app', 7 | store, 8 | template: '', 9 | components: {Index} 10 | }) 11 | 12 | Vue.use(ChinaMap) 13 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue + Vuex + Axios + ECharts 画一个动态更新的中国地图 6 | 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["istanbul"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /test/unit/specs/Hello.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import HelloWorld from '@/components/HelloWorld' 3 | 4 | describe('HelloWorld.vue', () => { 5 | it('should render correct contents', () => { 6 | const Constructor = Vue.extend(HelloWorld) 7 | const vm = new Constructor().$mount() 8 | expect(vm.$el.querySelector('.hello h1').textContent) 9 | .to.equal('Welcome to Your Vue.js App') 10 | }) 11 | }) 12 | -------------------------------------------------------------------------------- /test/unit/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | Vue.config.productionTip = false 4 | 5 | // require all test files (files that ends with .spec.js) 6 | const testsContext = require.context('./specs', true, /\.spec$/) 7 | testsContext.keys().forEach(testsContext) 8 | 9 | // require all src files except main.js for coverage. 10 | // you can also change this to match only the subset of files that 11 | // you want coverage for. 12 | const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/) 13 | srcContext.keys().forEach(srcContext) 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | node_modules/ 3 | 4 | # Build outputs 5 | dist/ 6 | lib/ 7 | coverage/ 8 | 9 | # Test reports 10 | test/unit/coverage/ 11 | test/e2e/reports/ 12 | 13 | # Cache folders 14 | .sass-cache/ 15 | temp/ 16 | undefined/ 17 | 18 | # Editor directories and files 19 | .idea/ 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | 25 | # System files 26 | .DS_Store 27 | Thumbs.db 28 | 29 | # Environment configuration files 30 | .env.local 31 | .env.*.local 32 | 33 | # Log files 34 | npm-debug.log* 35 | yarn-debug.log* 36 | yarn-error.log* 37 | selenium-debug.log* 38 | 39 | # Package lock files 40 | package-lock.json 41 | -------------------------------------------------------------------------------- /test/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // For authoring Nightwatch tests, see 2 | // http://nightwatchjs.org/guide#usage 3 | 4 | module.exports = { 5 | 'default e2e tests': function (browser) { 6 | // automatically uses dev Server port from /config.index.js 7 | // default: http://localhost:8080 8 | // see nightwatch.conf.js 9 | const devServer = browser.globals.devServerURL 10 | 11 | browser 12 | .url(devServer) 13 | .waitForElementVisible('#app', 5000) 14 | .assert.elementPresent('.hello') 15 | .assert.containsText('h1', 'Welcome to Your Vue.js App') 16 | .assert.elementCount('img', 1) 17 | .end() 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 13 | extends: 'standard', 14 | // required to lint *.vue files 15 | plugins: [ 16 | 'html' 17 | ], 18 | // add your custom rules here 19 | 'rules': { 20 | // allow paren-less arrow functions 21 | 'arrow-parens': 0, 22 | // allow async-await 23 | 'generator-star-spacing': 0, 24 | // allow debugger during development 25 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /test/e2e/custom-assertions/elementCount.js: -------------------------------------------------------------------------------- 1 | // A custom Nightwatch assertion. 2 | // the name of the method is the filename. 3 | // can be used in tests like this: 4 | // 5 | // browser.assert.elementCount(selector, count) 6 | // 7 | // for how to write custom assertions see 8 | // http://nightwatchjs.org/guide#writing-custom-assertions 9 | exports.assertion = function (selector, count) { 10 | this.message = 'Testing if element <' + selector + '> has count: ' + count 11 | this.expected = count 12 | this.pass = function (val) { 13 | return val === this.expected 14 | } 15 | this.value = function (res) { 16 | return res.value 17 | } 18 | this.command = function (cb) { 19 | var self = this 20 | return this.api.execute(function (selector) { 21 | return document.querySelectorAll(selector).length 22 | }, [selector], function (res) { 23 | cb.call(self, res) 24 | }) 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /test/unit/karma.conf.js: -------------------------------------------------------------------------------- 1 | // This is a karma config file. For more details see 2 | // http://karma-runner.github.io/0.13/config/configuration-file.html 3 | // we are also using it with karma-webpack 4 | // https://github.com/webpack/karma-webpack 5 | 6 | var webpackConfig = require('../../build/webpack.test.conf') 7 | 8 | module.exports = function (config) { 9 | config.set({ 10 | // to run in additional browsers: 11 | // 1. install corresponding karma launcher 12 | // http://karma-runner.github.io/0.13/config/browsers.html 13 | // 2. add it to the `browsers` array below. 14 | browsers: ['PhantomJS'], 15 | frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'], 16 | reporters: ['spec', 'coverage'], 17 | files: ['./index.js'], 18 | preprocessors: { 19 | './index.js': ['webpack', 'sourcemap'] 20 | }, 21 | webpack: webpackConfig, 22 | webpackMiddleware: { 23 | noInfo: true 24 | }, 25 | coverageReporter: { 26 | dir: './coverage', 27 | reporters: [ 28 | { type: 'lcov', subdir: '.' }, 29 | { type: 'text-summary' } 30 | ] 31 | } 32 | }) 33 | } 34 | -------------------------------------------------------------------------------- /test/e2e/runner.js: -------------------------------------------------------------------------------- 1 | // 1. start the dev server using production config 2 | process.env.NODE_ENV = 'testing' 3 | var server = require('../../build/dev-server.js') 4 | 5 | server.ready.then(() => { 6 | // 2. run the nightwatch test suite against it 7 | // to run in additional browsers: 8 | // 1. add an entry in test/e2e/nightwatch.conf.json under "test_settings" 9 | // 2. add it to the --env flag below 10 | // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox` 11 | // For more information on Nightwatch's config file, see 12 | // http://nightwatchjs.org/guide#settings-file 13 | var opts = process.argv.slice(2) 14 | if (opts.indexOf('--config') === -1) { 15 | opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js']) 16 | } 17 | if (opts.indexOf('--env') === -1) { 18 | opts = opts.concat(['--env', 'chrome']) 19 | } 20 | 21 | var spawn = require('cross-spawn') 22 | var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' }) 23 | 24 | runner.on('exit', function (code) { 25 | server.close() 26 | process.exit(code) 27 | }) 28 | 29 | runner.on('error', function (err) { 30 | server.close() 31 | throw err 32 | }) 33 | }) 34 | -------------------------------------------------------------------------------- /test/e2e/nightwatch.conf.js: -------------------------------------------------------------------------------- 1 | require('babel-register') 2 | var config = require('../../config') 3 | 4 | // http://nightwatchjs.org/gettingstarted#settings-file 5 | module.exports = { 6 | src_folders: ['test/e2e/specs'], 7 | output_folder: 'test/e2e/reports', 8 | custom_assertions_path: ['test/e2e/custom-assertions'], 9 | 10 | selenium: { 11 | start_process: true, 12 | server_path: require('selenium-server').path, 13 | host: '127.0.0.1', 14 | port: 4444, 15 | cli_args: { 16 | 'webdriver.chrome.driver': require('chromedriver').path 17 | } 18 | }, 19 | 20 | test_settings: { 21 | default: { 22 | selenium_port: 4444, 23 | selenium_host: 'localhost', 24 | silent: true, 25 | globals: { 26 | devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port) 27 | } 28 | }, 29 | 30 | chrome: { 31 | desiredCapabilities: { 32 | browserName: 'chrome', 33 | javascriptEnabled: true, 34 | acceptSslCerts: true 35 | } 36 | }, 37 | 38 | firefox: { 39 | desiredCapabilities: { 40 | browserName: 'firefox', 41 | javascriptEnabled: true, 42 | acceptSslCerts: true 43 | } 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 2 | 'use strict' 3 | // Template version: 1.1.3 4 | // see http://vuejs-templates.github.io/webpack for documentation. 5 | 6 | const path = require('path') 7 | 8 | module.exports = { 9 | build: { 10 | env: require('./prod.env'), 11 | index: path.resolve(__dirname, '../dist/index.html'), 12 | assetsRoot: path.resolve(__dirname, '../dist'), 13 | assetsSubDirectory: 'static', 14 | assetsPublicPath: './', 15 | productionSourceMap: true, 16 | // Gzip off by default as many popular static hosts such as 17 | // Surge or Netlify already gzip all static assets for you. 18 | // Before setting to `true`, make sure to: 19 | // npm install --save-dev compression-webpack-plugin 20 | productionGzip: false, 21 | productionGzipExtensions: ['js', 'css'], 22 | // Run the build command with an extra argument to 23 | // View the bundle analyzer report after build finishes: 24 | // `npm run build --report` 25 | // Set to `true` or `false` to always turn it on or off 26 | bundleAnalyzerReport: process.env.npm_config_report 27 | }, 28 | dev: { 29 | env: require('./dev.env'), 30 | port: process.env.PORT || 8080, 31 | autoOpenBrowser: true, 32 | assetsSubDirectory: 'static', 33 | assetsPublicPath: '/', 34 | proxyTable: {}, 35 | // CSS Sourcemaps off by default because relative paths are "buggy" 36 | // with this option, according to the CSS-Loader README 37 | // (https://github.com/webpack/css-loader#sourcemaps) 38 | // In our experience, they generally work as expected, 39 | // just be aware of this issue when enabling this option. 40 | cssSourceMap: false 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /static/data/heatChinaRealData.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"name": "海门", "value": 9}, 3 | {"name": "鄂尔多斯", "value": 12}, 4 | {"name": "招远", "value": 12}, 5 | {"name": "舟山", "value": 12}, 6 | {"name": "南通", "value": 23}, 7 | {"name": "拉萨", "value": 24}, 8 | {"name": "云浮", "value": 24}, 9 | {"name": "梅州", "value": 25}, 10 | {"name": "文登", "value": 25}, 11 | {"name": "上海", "value": 25}, 12 | {"name": "攀枝花", "value": 25}, 13 | {"name": "烟台", "value": 28}, 14 | {"name": "福州", "value": 29}, 15 | {"name": "瓦房店", "value": 30}, 16 | {"name": "即墨", "value": 30}, 17 | {"name": "抚顺", "value": 31}, 18 | {"name": "玉溪", "value": 31}, 19 | {"name": "张家口", "value": 31}, 20 | {"name": "阳泉", "value": 31}, 21 | {"name": "莱州", "value": 32}, 22 | {"name": "湖州", "value": 32}, 23 | {"name": "汕头", "value": 32}, 24 | {"name": "昆山", "value": 33}, 25 | {"name": "宁波", "value": 33}, 26 | {"name": "江阴", "value": 37}, 27 | {"name": "蓬莱", "value": 37}, 28 | {"name": "韶关", "value": 38}, 29 | {"name": "嘉峪关", "value": 38}, 30 | {"name": "广州", "value": 38}, 31 | {"name": "延安", "value": 38}, 32 | {"name": "太原", "value": 39}, 33 | {"name": "清远", "value": 39}, 34 | {"name": "中山", "value": 39}, 35 | {"name": "昆明", "value": 39}, 36 | {"name": "寿光", "value": 40}, 37 | {"name": "盘锦", "value": 40}, 38 | {"name": "长治", "value": 41}, 39 | {"name": "深圳", "value": 41}, 40 | {"name": "珠海", "value": 42}, 41 | {"name": "宿迁", "value": 43}, 42 | {"name": "咸阳", "value": 43}, 43 | {"name": "铜川", "value": 44}, 44 | {"name": "平度", "value": 44}, 45 | {"name": "佛山", "value": 44}, 46 | {"name": "海口", "value": 44}, 47 | {"name": "江门", "value": 45}, 48 | {"name": "章丘", "value": 45}, 49 | {"name": "肇庆", "value": 46}, 50 | {"name": "大连", "value": 47}, 51 | {"name": "临汾", "value": 47}, 52 | {"name": "吴江", "value": 47}, 53 | {"name": "石嘴山", "value": 49}, 54 | {"name": "沈阳", "value": 50}, 55 | {"name": "苏州", "value": 50}, 56 | {"name": "茂名", "value": 50}, 57 | {"name": "嘉兴", "value": 51}, 58 | {"name": "西宁", "value": 57}, 59 | {"name": "宜宾", "value": 58}, 60 | {"name": "呼和浩特", "value": 58}, 61 | {"name": "成都", "value": 58}, 62 | {"name": "大同", "value": 58}, 63 | {"name": "镇江", "value": 59}, 64 | {"name": "桂林", "value": 59}, 65 | {"name": "张家界", "value": 59}, 66 | {"name": "宜兴", "value": 59}, 67 | {"name": "北海", "value": 60}, 68 | {"name": "西安", "value": 61}, 69 | {"name": "金坛", "value": 62}, 70 | {"name": "东营", "value": 62}, 71 | {"name": "牡丹江", "value": 63}, 72 | {"name": "遵义", "value": 63}, 73 | {"name": "绍兴", "value": 63}, 74 | {"name": "扬州", "value": 64}, 75 | {"name": "常州", "value": 64}, 76 | {"name": "潍坊", "value": 65}, 77 | {"name": "重庆", "value": 66}, 78 | {"name": "台州", "value": 67}, 79 | {"name": "南京", "value": 67}, 80 | {"name": "乌鲁木齐", "value": 84}, 81 | {"name": "枣庄", "value": 84}, 82 | {"name": "杭州", "value": 84}, 83 | {"name": "淄博", "value": 85}, 84 | {"name": "鞍山", "value": 86}, 85 | {"name": "溧阳", "value": 86}, 86 | {"name": "库尔勒", "value": 86}, 87 | {"name": "安阳", "value": 90}, 88 | {"name": "开封", "value": 90}, 89 | {"name": "济南", "value": 92}, 90 | {"name": "德阳", "value": 93}, 91 | {"name": "温州", "value": 95}, 92 | {"name": "九江", "value": 96}, 93 | {"name": "邯郸", "value": 98}, 94 | {"name": "大庆", "value": 279} 95 | ] 96 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-china-map", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project.", 5 | "author": "Cheng ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js", 11 | "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", 12 | "e2e": "node test/e2e/runner.js", 13 | "test": "npm run unit && npm run e2e", 14 | "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" 15 | }, 16 | "dependencies": { 17 | "axios": "^0.17.1", 18 | "echarts": "^3.7.2", 19 | "element-ui": "^2.0.3", 20 | "less": "^2.7.3", 21 | "less-loader": "^4.0.5", 22 | "vue": "^2.5.2", 23 | "vue-echarts-v3": "^1.0.15", 24 | "vue-router": "^3.0.1", 25 | "vuex": "^3.0.1" 26 | }, 27 | "devDependencies": { 28 | "autoprefixer": "^7.1.2", 29 | "babel-core": "^6.22.1", 30 | "babel-eslint": "^7.1.1", 31 | "babel-loader": "^7.1.1", 32 | "babel-plugin-component": "^0.10.1", 33 | "babel-plugin-istanbul": "^4.1.1", 34 | "babel-plugin-transform-runtime": "^6.22.0", 35 | "babel-preset-env": "^1.3.2", 36 | "babel-preset-stage-2": "^6.22.0", 37 | "babel-register": "^6.22.0", 38 | "chai": "^4.1.2", 39 | "chalk": "^2.0.1", 40 | "chromedriver": "^2.27.2", 41 | "connect-history-api-fallback": "^1.3.0", 42 | "copy-webpack-plugin": "^4.0.1", 43 | "cross-env": "^5.0.1", 44 | "cross-spawn": "^5.0.1", 45 | "css-loader": "^0.28.0", 46 | "eslint": "^3.19.0", 47 | "eslint-config-standard": "^10.2.1", 48 | "eslint-friendly-formatter": "^3.0.0", 49 | "eslint-loader": "^1.7.1", 50 | "eslint-plugin-html": "^3.0.0", 51 | "eslint-plugin-import": "^2.7.0", 52 | "eslint-plugin-node": "^5.2.0", 53 | "eslint-plugin-promise": "^3.4.0", 54 | "eslint-plugin-standard": "^3.0.1", 55 | "eventsource-polyfill": "^0.9.6", 56 | "express": "^4.14.1", 57 | "extract-text-webpack-plugin": "^3.0.0", 58 | "file-loader": "^1.1.4", 59 | "friendly-errors-webpack-plugin": "^1.6.1", 60 | "html-webpack-plugin": "^2.30.1", 61 | "http-proxy-middleware": "^0.17.3", 62 | "inject-loader": "^3.0.0", 63 | "karma": "^1.4.1", 64 | "karma-coverage": "^1.1.1", 65 | "karma-mocha": "^1.3.0", 66 | "karma-phantomjs-launcher": "^1.0.2", 67 | "karma-phantomjs-shim": "^1.4.0", 68 | "karma-sinon-chai": "^1.3.1", 69 | "karma-sourcemap-loader": "^0.3.7", 70 | "karma-spec-reporter": "0.0.31", 71 | "karma-webpack": "^2.0.2", 72 | "mocha": "^3.2.0", 73 | "nightwatch": "^0.9.12", 74 | "opn": "^5.1.0", 75 | "optimize-css-assets-webpack-plugin": "^3.2.0", 76 | "ora": "^1.2.0", 77 | "phantomjs-prebuilt": "^2.1.14", 78 | "portfinder": "^1.0.13", 79 | "rimraf": "^2.6.0", 80 | "sass-loader": "^6.0.6", 81 | "selenium-server": "^3.0.1", 82 | "semver": "^5.3.0", 83 | "shelljs": "^0.7.6", 84 | "sinon": "^4.0.0", 85 | "sinon-chai": "^2.8.0", 86 | "url-loader": "^0.5.8", 87 | "vue-loader": "^13.3.0", 88 | "vue-style-loader": "^3.0.1", 89 | "vue-template-compiler": "^2.5.2", 90 | "webpack": "^3.8.1", 91 | "webpack-bundle-analyzer": "^2.9.0", 92 | "webpack-dev-middleware": "^1.12.0", 93 | "webpack-hot-middleware": "^2.18.2", 94 | "webpack-merge": "^4.1.0" 95 | }, 96 | "engines": { 97 | "node": ">= 4.0.0", 98 | "npm": ">= 3.0.0" 99 | }, 100 | "browserslist": [ 101 | "> 1%", 102 | "last 2 versions", 103 | "not ie <= 8" 104 | ] 105 | } 106 | -------------------------------------------------------------------------------- /src/components/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 11 | 12 | 159 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue + Vuex + Axios + ECharts 画一个动态更新的中国地图 2 | 3 | ![中国地图闪闪发光](./images/china-map.png) 4 | 5 | 📢 注意：该分支处于维护状态，目前在 Node.js 14.x 版本中可稳定运行。建议使用 [NVM](https://github.com/nvm-sh/nvm) (Node Version Manager) 来管理 Node.js 版本，方便在不同项目间切换版本。 6 | 7 | ## 一、生成项目及安装插件 8 | 9 | ```bash 10 | # 安装 Vue CLI 11 | npm install vue-cli -g 12 | # 初始化项目 13 | vue init webpack vue-china-map 14 | # 切到目录下 15 | cd vue-china-map 16 | # 安装项目依赖 17 | npm install 18 | # 安装 Vuex 19 | npm install vuex --save 20 | # 安装 Axios 21 | npm install axios --save 22 | # 安装 ECharts 23 | npm install echarts --save 24 | ``` 25 | 26 | ## 二、项目结构 27 | 28 | ```plain 29 | ├── index.html 30 | ├── main.js 31 | ├── components 32 | │ └── index.vue 33 | └── store 34 | ├── index.js # 组装模块及导出 `store` 的文件 35 | └── modules 36 | └── ChinaMap.js # 中国地图 Vuex 模块 37 | ``` 38 | 39 | ## 三、引入中国地图并绘制基本的图表 40 | 41 | 3.1 按需求引入与中国地图相关的 ECharts 图表和组件。 42 | 43 | ```javascript 44 | // 主模块 45 | let echarts = require('echarts/lib/echarts') 46 | // 散点图 47 | require('echarts/lib/chart/scatter') 48 | // 散点图放大 49 | require('echarts/lib/chart/effectScatter') 50 | // 地图 51 | require('echarts/lib/chart/map') 52 | // 图例 53 | require('echarts/lib/component/legend') 54 | // 提示框 55 | require('echarts/lib/component/tooltip') 56 | // 地图 GEO 57 | require('echarts/lib/component/geo') 58 | ``` 59 | 60 | 3.2 引入中国地图 JavaScript 文件，会自动注册地图；也可以通过 Axios 方式引入 JSON 文件，需要**手动注册** `echarts.registerMap('china', chinaJson.data)`。 61 | 62 | ```javascript 63 | // 中国地图 JavaScript 文件 64 | require('echarts/map/js/china') 65 | ``` 66 | 67 | 3.3 准备一个有固定宽高的 DOM 容器并在 `mounted` 里面初始化一个 ECharts 实例。 68 | 69 | DOM 容器： 70 | 71 | ```javascript 72 | 75 | ``` 76 | 77 | 初始化 ECharts 实例： 78 | 79 | ```javascript 80 | let chinaMap = echarts.init(document.getElementById('china-map')) 81 | ``` 82 | 83 | 3.4 设置初始化的空白地图，这里需要设置很多 ECharts 参数，参考 [ECharts 配置项手册](https://echarts.apache.org/zh/option.html)。 84 | 85 | ```javascript 86 | chinaMap.setOption({ 87 |   backgroundColor: '#272D3A', 88 |   // 标题 89 |   title: { 90 |     text: '中国地图闪闪发光', 91 |     left: 'center', 92 |     textStyle: { 93 |       color: '#fff' 94 |     } 95 |   }, 96 |   // 地图上圆点的提示 97 |   tooltip: { 98 |     trigger: 'item', 99 |     formatter: function (params) { 100 |       return params.name + ' : ' + params.value[2]; 101 |     } 102 |   }, 103 |   // 图例按钮，点击可选择哪些不显示 104 |   legend: { 105 |     orient: 'vertical', 106 |     left: 'left', 107 |     top: 'bottom', 108 |     data: ['地区热度', 'top5'], 109 |     textStyle: { 110 |       color: '#fff' 111 |     } 112 |   }, 113 |   // 地理坐标系组件 114 |   geo: { 115 |     map: 'china', 116 |     label: { 117 |       // `true` 会显示城市名 118 |       emphasis: { 119 |         show: false 120 |       } 121 |     }, 122 |     itemStyle: { 123 |       // 地图背景色 124 |       normal: { 125 |         areaColor: '#465471', 126 |         borderColor: '#282F3C' 127 |       }, 128 |       // 悬浮时 129 |       emphasis: { 130 |         areaColor: '#8796B4' 131 |       } 132 |     } 133 |   }, 134 |   // 系列列表 135 |   series: [ 136 |     { 137 |       name: '地区热度', 138 |       // 表的类型，这里是散点 139 |       type: 'scatter', 140 |       // 使用地理坐标系，通过 `geoIndex` 指定相应的地理坐标系组件 141 |       coordinateSystem: 'geo', 142 |       data: [], 143 |       // 标记的大小 144 |       symbolSize: 12, 145 |       // 鼠标悬浮的时候在圆点上显示数值 146 |       label: { 147 |         normal: { 148 |           show: false 149 |         }, 150 |         emphasis: { 151 |           show: false 152 |         } 153 |       }, 154 |       itemStyle: { 155 |         normal: { 156 |           color: '#ddb926' 157 |         }, 158 |         // 鼠标悬浮的时候圆点样式变化 159 |         emphasis: { 160 |           borderColor: '#fff', 161 |           borderWidth: 1 162 |         } 163 |       } 164 |     }, 165 |     { 166 |       name: 'top5', 167 |       // 表的类型，这里是散点 168 |       type: 'effectScatter', 169 |       // 使用地理坐标系，通过 `geoIndex` 指定相应的地理坐标系组件 170 |       coordinateSystem: 'geo', 171 |       data: [], 172 |       // 标记的大小 173 |       symbolSize: 12, 174 |       showEffectOn: 'render', 175 |       rippleEffect: { 176 |         brushType: 'stroke' 177 |       }, 178 |       hoverAnimation: true, 179 |       label: { 180 |         normal: { 181 |           show: false 182 |         } 183 |       }, 184 |       itemStyle: { 185 |         normal: { 186 |           color: '#f4e925', 187 |           shadowBlur: 10, 188 |           shadowColor: '#333' 189 |         } 190 |       }, 191 |       zlevel: 1 192 |     } 193 |   ] 194 | }) 195 | ``` 196 | 197 | ## 四、配置 Vuex 管理和分发数据 198 | 199 | 4.1 在 `ChinaMap.js` 中引入 Vuex 和 Axios。 200 | 201 | ```javascript 202 | import axios from 'axios' 203 | ``` 204 | 205 | 4.2 设置必要的变量。 206 | 207 | ```javascript 208 | const state = { 209 | geoCoordMap: {'香港特别行政区': [114.08, 22.2], '澳门特别行政区': [113.33, 22.13], '台北': [121.5, 25.03]/*等等*/}, 210 | // 发光的城市 211 | showCityNumber: 5, 212 | showCount: 0, 213 | // 是否需要 Loading 214 | isLoading: true 215 | } 216 | ``` 217 | 218 | 4.3 在 `actions` 中抓取后台数据并更新地图。 219 | 220 | ```javascript 221 | const actions = { 222 | fetchHeatChinaRealData ({state, commit}, chartsObj) { 223 | axios.get('static/data/heatChinaRealData.json') 224 | .then( 225 | (res) => { 226 | let data = res.data 227 | let paleData = ((state, data) => { 228 | let arr = [] 229 | let len = data.length 230 | while (len--) { 231 | let geoCoord = state.geoCoordMap[data[len].name] 232 | if (geoCoord) { 233 | arr.push({ 234 | name: data[len].name, 235 | value: geoCoord.concat(data[len].value) 236 | }) 237 | } 238 | } 239 | return arr 240 | })(state, data) 241 | let lightData = paleData.sort((a, b) => { 242 | return b.value - a.value 243 | }).slice(0, state.showCityNumber) 244 | chartsObj.setOption({ 245 | series: [ 246 | { 247 | name: '地区热度', 248 | data: paleData 249 | }, 250 | { 251 | name: 'top5', 252 | data: lightData 253 | } 254 | ] 255 | }) 256 | } 257 | ) 258 | } 259 | } 260 | ``` 261 | 262 | 此时 `npm run dev` 已经可以看到中国地图上闪闪的黄色小点点。 263 | 264 | 若想动态展示，可以在 `index.vue` 中 `mounted` 下面加上： 265 | 266 | ```javascript 267 | chinaMap.showLoading(showLoadingDefault) 268 | this.$store.commit('openLoading') 269 | this.$store.dispatch('fetchHeatChinaRealData', chinaMap) 270 | setInterval(() => { 271 | this.$store.dispatch('fetchHeatChinaRealData', chinaMap) 272 | }, 1000) 273 | ``` 274 | 275 | 在 `ChinaMap.js` 中 `actions` 的 `mutations` 中 `fetchHeatChinaRealData` 修改： 276 | 277 | ```javascript 278 | let lightData = paleData.sort((a, b) => { 279 | return b.value - a.value 280 | }).slice(0 + state.showCount, state.showCityNumber + state.showCount) 281 | if (state.isLoading) { 282 | chartsObj.hideLoading() 283 | commit('closeLoading') 284 | } 285 | ``` 286 | 287 | ## 五、其它 288 | 289 | 5.1 别忘了在 `main.js` 里面引入 Vuex。 290 | 291 | ```javascript 292 | import Vue from 'vue' 293 | import Index from './components/index.vue' 294 | import store from './store/index' 295 | 296 | let ChinaMap = new Vue({ 297 | el: '#app', 298 | store, 299 | template: '', 300 | components: {Index} 301 | }) 302 | 303 | Vue.use(ChinaMap) 304 | ``` 305 | 306 | 5.2 案例代码 307 | 308 | GitHub：[https://github.com/chengchuu/vue-china-map](https://github.com/chengchuu/vue-china-map) 309 | -------------------------------------------------------------------------------- /src/store/modules/ChinaMap.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | const state = { 4 | geoCoordMap: {'香港特别行政区': [114.08, 22.2], '澳门特别行政区': [113.33, 22.13], '台北': [121.5, 25.03], '基隆': [121.73, 25.13], '台中': [120.67, 24.15], '台南': [120.2, 23.0], '宜兰县': [121.75, 24.77], '桃园县': [121.3, 24.97], '苗栗县': [120.8, 24.53], '台中县': [120.72, 24.25], '彰化县': [120.53, 24.08], '南投县': [120.67, 23.92], '云林县': [120.53, 23.72], '台南县': [120.32, 23.32], '高雄县': [120.37, 22.63], '屏东县': [120.48, 22.67], '台东县': [121.15, 22.75], '花莲县': [121.6, 23.98], '澎湖县': [119.58, 23.58], '石家庄': [114.52, 38.05], '唐山': [118.2, 39.63], '秦皇岛': [119.6, 39.93], '邯郸': [114.48, 36.62], '邢台': [114.48, 37.07], '保定': [115.47, 38.87], '张家口': [114.88, 40.82], '承德': [117.93, 40.97], '沧州': [116.83, 38.3], '廊坊': [116.7, 39.52], '衡水': [115.68, 37.73], '太原': [112.55, 37.87], '大同': [113.3, 40.08], '阳泉': [113.57, 37.85], '长治': [113.12, 36.2], '晋城': [112.83, 35.5], '朔州': [112.43, 39.33], '晋中': [112.75, 37.68], '运城': [110.98, 35.02], '忻州': [112.73, 38.42], '临汾': [111.52, 36.08], '吕梁': [111.13, 37.52], '呼和浩特': [111.73, 40.83], '包头': [109.83, 40.65], '乌海': [106.82, 39.67], '赤峰': [118.92, 42.27], '通辽': [122.27, 43.62], '鄂尔多斯': [109.8, 39.62], '呼伦贝尔': [119.77, 49.22], '巴彦淖尔': [107.42, 40.75], '乌兰察布': [113.12, 40.98], '兴安盟': [122.05, 46.08], '锡林郭勒盟': [116.07, 43.95], '阿拉善盟': [105.67, 38.83], '沈阳': [123.43, 41.8], '大连': [121.62, 38.92], '鞍山': [122.98, 41.1], '抚顺': [123.98, 41.88], '本溪': [123.77, 41.3], '丹东': [124.38, 40.13], '锦州': [121.13, 41.1], '营口': [122.23, 40.67], '阜新': [121.67, 42.02], '辽阳': [123.17, 41.27], '盘锦': [122.07, 41.12], '铁岭': [123.83, 42.28], '朝阳': [120.45, 41.57], '葫芦岛': [120.83, 40.72], '长春': [125.32, 43.9], '吉林': [126.55, 43.83], '四平': [124.35, 43.17], '辽源': [125.13, 42.88], '通化': [125.93, 41.73], '白山': [126.42, 41.93], '松原': [124.82, 45.13], '白城': [122.83, 45.62], '延边朝鲜族自治州': [129.5, 42.88], '哈尔滨': [126.53, 45.8], '齐齐哈尔': [123.95, 47.33], '鸡西': [130.97, 45.3], '鹤岗': [130.27, 47.33], '双鸭山': [131.15, 46.63], '大庆': [125.03, 46.58], '伊春': [128.9, 47.73], '佳木斯': [130.37, 46.82], '七台河': [130.95, 45.78], '牡丹江': [129.6, 44.58], '黑河': [127.48, 50.25], '绥化': [126.98, 46.63], '大兴安岭地区': [124.12, 50.42], '南京': [118.78, 32.07], '无锡': [120.3, 31.57], '徐州': [117.18, 34.27], '常州': [119.95, 31.78], '苏州': [120.58, 31.3], '南通': [120.88, 31.98], '连云港': [119.22, 34.6], '淮安': [119.02, 33.62], '盐城': [120.15, 33.35], '扬州': [119.4, 32.4], '镇江': [119.45, 32.2], '泰州': [119.92, 32.45], '宿迁': [118.28, 33.97], '杭州': [120.15, 30.28], '宁波': [121.55, 29.88], '温州': [120.7, 28.0], '嘉兴': [120.75, 30.75], '湖州': [120.08, 30.9], '绍兴': [120.57, 30.0], '金华': [119.65, 29.08], '衢州': [118.87, 28.93], '舟山': [122.2, 30.0], '台州': [121.43, 28.68], '丽水': [119.92, 28.45], '合肥': [117.25, 31.83], '芜湖': [118.38, 31.33], '蚌埠': [117.38, 32.92], '淮南': [117.0, 32.63], '马鞍山': [118.5, 31.7], '淮北': [116.8, 33.95], '铜陵': [117.82, 30.93], '安庆': [117.05, 30.53], '黄山': [118.33, 29.72], '滁州': [118.32, 32.3], '阜阳': [115.82, 32.9], '宿州': [116.98, 33.63], '巢湖': [117.87, 31.6], '六安': [116.5, 31.77], '亳州': [115.78, 33.85], '池州': [117.48, 30.67], '宣城': [118.75, 30.95], '福州': [119.3, 26.08], '厦门': [118.08, 24.48], '莆田': [119.0, 25.43], '三明': [117.62, 26.27], '泉州': [118.67, 24.88], '漳州': [117.65, 24.52], '南平': [118.17, 26.65], '龙岩': [117.03, 25.1], '宁德': [119.52, 26.67], '南昌': [115.85, 28.68], '景德镇': [117.17, 29.27], '萍乡': [113.85, 27.63], '九江': [116.0, 29.7], '新余': [114.92, 27.82], '鹰潭': [117.07, 28.27], '赣州': [114.93, 25.83], '吉安': [114.98, 27.12], '宜春': [114.38, 27.8], '抚州': [116.35, 28.0], '上饶': [117.97, 28.45], '济南': [116.98, 36.67], '青岛': [120.38, 36.07], '淄博': [118.05, 36.82], '枣庄': [117.32, 34.82], '东营': [118.67, 37.43], '烟台': [121.43, 37.45], '潍坊': [119.15, 36.7], '济宁': [116.58, 35.42], '泰安': [117.08, 36.2], '威海': [122.12, 37.52], '日照': [119.52, 35.42], '莱芜': [117.67, 36.22], '临沂': [118.35, 35.05], '德州': [116.3, 37.45], '聊城': [115.98, 36.45], '滨州': [117.97, 37.38], '郑州': [113.62, 34.75], '开封': [114.3, 34.8], '洛阳': [112.45, 34.62], '平顶山': [113.18, 33.77], '安阳': [114.38, 36.1], '鹤壁': [114.28, 35.75], '新乡': [113.9, 35.3], '焦作': [113.25, 35.22], '济源': [112.58, 35.07], '濮阳': [115.03, 35.77], '许昌': [113.85, 34.03], '漯河': [114.02, 33.58], '三门峡': [111.2, 34.78], '南阳': [112.52, 33.0], '商丘': [115.65, 34.45], '信阳': [114.07, 32.13], '周口': [114.65, 33.62], '驻马店': [114.02, 32.98], '神农架林区': [110.67, 31.75], '武汉': [114.3, 30.6], '黄石': [115.03, 30.2], '十堰': [110.78, 32.65], '宜昌': [111.28, 30.7], '鄂州': [114.88, 30.4], '荆门': [112.2, 31.03], '孝感': [113.92, 30.93], '荆州': [112.23, 30.33], '黄冈': [114.87, 30.45], '咸宁': [114.32, 29.85], '随州': [113.37, 31.72], '恩施土家族苗族自治州': [109.47, 30.3], '仙桃': [113.45, 30.37], '潜江': [112.88, 30.42], '天门': [113.17, 30.67], '长沙': [112.93, 28.23], '株洲': [113.13, 27.83], '湘潭': [112.93, 27.83], '衡阳': [112.57, 26.9], '邵阳': [111.47, 27.25], '岳阳': [113.12, 29.37], '常德': [111.68, 29.05], '张家界': [110.47, 29.13], '益阳': [112.32, 28.6], '郴州': [113.02, 25.78], '永州': [111.62, 26.43], '怀化': [110.0, 27.57], '娄底': [112.0, 27.73], '湘西土家族苗族自治州': [109.73, 28.32], '广州': [113.5107, 23.2196], '韶关': [113.6, 24.82], '深圳': [114.05, 22.55], '珠海': [113.57, 22.27], '汕头': [116.68, 23.35], '佛山': [113.12, 23.02], '江门': [113.08, 22.58], '湛江': [110.35, 21.27], '茂名': [110.92, 21.67], '肇庆': [112.47, 23.05], '惠州': [114.42, 23.12], '梅州': [116.12, 24.28], '汕尾': [115.37, 22.78], '河源': [114.7, 23.73], '阳江': [111.98, 21.87], '清远': [113.03, 23.7], '东莞': [113.75, 23.05], '中山': [113.38, 22.52], '潮州': [116.62, 23.67], '揭阳': [116.37, 23.55], '云浮': [112.03, 22.92], '南宁': [108.37, 22.82], '柳州': [109.42, 24.33], '防城港': [108.35, 21.7], '来宾': [109.23, 23.73], '崇左': [107.37, 22.4], '桂林': [110.28, 25.28], '梧州': [111.27, 23.48], '北海': [109.12, 21.48], '钦州': [108.62, 21.95], '贵港': [109.6, 23.1], '玉林': [110.17, 22.63], '百色': [106.62, 23.9], '贺州': [111.55, 24.42], '河池': [108.07, 24.7], '海口': [110.32, 20.03], '三亚': [109.5, 18.25], '五指山': [109.52, 18.78], '琼海': [110.47, 19.25], '儋州': [109.57, 19.52], '文昌': [110.8, 19.55], '万宁': [110.4, 18.8], '东方': [108.63, 19.1], '定安县': [110.32, 19.7], '屯昌县': [110.1, 19.37], '澄迈县': [110.0, 19.73], '临高县': [109.68, 19.92], '白沙黎族自治县': [109.45, 19.23], '昌江黎族自治县': [109.05, 19.25], '乐东黎族自治县': [109.17, 18.75], '陵水黎族自治县': [110.03, 18.5], '保亭黎族苗族自治县': [109.7, 18.63], '琼中黎族苗族自治县': [109.83, 19.03], '成都': [104.07, 30.67], '自贡': [104.78, 29.35], '攀枝花': [101.72, 26.58], '泸州': [105.43, 28.87], '德阳': [104.38, 31.13], '绵阳': [104.73, 31.47], '广元': [105.83, 32.43], '遂宁': [105.57, 30.52], '内江': [105.05, 29.58], '乐山': [103.77, 29.57], '南充': [106.08, 30.78], '眉山': [103.83, 30.05], '宜宾': [104.62, 28.77], '广安': [106.63, 30.47], '达州': [107.5, 31.22], '雅安': [103.0, 29.98], '巴中': [106.77, 31.85], '资阳': [104.65, 30.12], '阿坝藏族羌族自治州': [102.22, 31.9], '甘孜藏族自治州': [101.97, 30.05], '凉山彝族自治州': [102.27, 27.9], '贵阳': [106.63, 26.65], '六盘水': [104.83, 26.6], '遵义': [106.92, 27.73], '安顺': [105.95, 26.25], '铜仁': [109.18, 27.72], '毕节': [105.28, 27.3], '黔东南苗族侗族自治州': [107.97, 26.58], '黔南布依族苗族自治州': [107.52, 26.27], '昆明': [102.72, 25.05], '曲靖': [103.8, 25.5], '玉溪': [102.55, 24.35], '保山': [99.17, 25.12], '昭通': [103.72, 27.33], '丽江': [100.23, 26.88], '临沧': [100.08, 23.88], '楚雄彝族自治州': [101.55, 25.03], '红河哈尼族彝族自治州': [103.4, 23.37], '文山壮族苗族自治州': [104.25, 23.37], '西双版纳傣族自治州': [100.8, 22.02], '大理白族自治州': [100.23, 25.6], '德宏傣族景颇族自治州': [98.58, 24.43], '怒江傈僳族自治州': [98.85, 25.85], '迪庆藏族自治州': [99.7, 27.83], '拉萨': [91.13, 29.65], '山南地区': [91.77, 29.23], '日喀则': [88.88, 29.27], '那曲地区': [92.07, 31.48], '阿里地区': [80.1, 32.5], '西安': [108.93, 34.27], '铜川': [108.93, 34.9], '宝鸡': [107.13, 34.37], '咸阳': [108.7, 34.33], '渭南': [109.5, 34.5], '延安': [109.48, 36.6], '汉中': [107.02, 33.07], '榆林': [109.73, 38.28], '安康': [109.02, 32.68], '商洛': [109.93, 33.87], '兰州': [103.82, 36.07], '嘉峪关': [98.27, 39.8], '金昌': [102.18, 38.5], '白银': [104.18, 36.55], '天水': [105.72, 34.58], '武威': [102.63, 37.93], '张掖': [100.45, 38.93], '平凉': [106.67, 35.55], '酒泉': [98.52, 39.75], '庆阳': [107.63, 35.73], '定西': [104.62, 35.58], '陇南': [104.92, 33.4], '临夏回族自治州': [103.22, 35.6], '甘南藏族自治州': [102.92, 34.98], '西宁': [101.78, 36.62], '黄南藏族自治州': [102.02, 35.52], '海南藏族自治州': [100.62, 36.28], '果洛藏族自治州': [100.23, 34.48], '玉树藏族自治州': [97.02, 33.0], '海西蒙古族藏族自治州': [97.37, 37.37], '北京': [116.4, 39.9], '天津': [117.2, 39.12], '上海': [121.47, 31.23], '重庆': [106.55, 29.57], '海北藏族自治州': [100.9, 36.97], '银川': [106.28, 38.47], '石嘴山': [106.38, 39.02], '吴忠': [106.2, 37.98], '固原': [106.28, 36.0], '中卫': [105.18, 37.52], '乌鲁木齐': [87.62, 43.82], '克拉玛依': [84.87, 45.6], '吐鲁番': [89.17, 42.95], '哈密地区': [93.52, 42.83], '昌吉回族自治州': [87.3, 44.02], '博尔塔拉蒙古自治州': [82.07, 44.9], '巴音郭楞蒙古自治州': [86.15, 41.77], '阿克苏地区': [80.27, 41.17], '喀什地区': [75.98, 39.47], '和田地区': [79.92, 37.12], '伊犁哈萨克自治州': [81.32, 43.92], '塔城地区': [82.98, 46.75], '阿勒泰地区': [88.13, 47.85], '石河子': [86.03, 44.3], '阿拉尔': [81.28, 40.55], '图木舒克': [79.13, 39.85], '五家渠': [87.53, 44.17], '大理': [99.97, 25.42]}, 5 | showCityNumber: 5, 6 | showCount: 0, 7 | isLoading: true 8 | } 9 | 10 | const getters = {} 11 | 12 | const actions = { 13 | fetchHeatChinaRealData ({state, commit}, chartsObj) { 14 | axios.get('static/data/heatChinaRealData.json') 15 | .then( 16 | (res) => { 17 | let data = res.data 18 | let paleData = ((state, data) => { 19 | let arr = [] 20 | let len = data.length 21 | while (len--) { 22 | let geoCoord = state.geoCoordMap[data[len].name] 23 | if (geoCoord) { 24 | arr.push({ 25 | name: data[len].name, 26 | value: geoCoord.concat(data[len].value) 27 | }) 28 | } 29 | } 30 | return arr 31 | })(state, data) 32 | let lightData = paleData.sort((a, b) => { 33 | return b.value - a.value 34 | }).slice(0 + state.showCount, state.showCityNumber + state.showCount) 35 | if (state.isLoading) { 36 | chartsObj.hideLoading() 37 | commit('closeLoading') 38 | } 39 | chartsObj.setOption({ 40 | series: [ 41 | { 42 | name: '地区热度', 43 | data: paleData 44 | }, 45 | { 46 | name: 'top5', 47 | data: lightData 48 | } 49 | ] 50 | }) 51 | commit('addCount') 52 | } 53 | ) 54 | } 55 | } 56 | 57 | const mutations = { 58 | closeLoading (state) { 59 | state.isLoading = false 60 | }, 61 | openLoading (state) { 62 | state.isLoading = true 63 | }, 64 | addCount (state) { 65 | state.showCount ++ 66 | // Test 67 | if (state.showCount >= 70) { 68 | state.showCount = 1 69 | } 70 | } 71 | } 72 | 73 | export default { 74 | state, 75 | getters, 76 | actions, 77 | mutations 78 | } 79 | --------------------------------------------------------------------------------