├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .postcssrc.js
├── README.md
├── build
├── build.js
├── check-versions.js
├── logo.png
├── utils.js
├── vue-loader.conf.js
├── webpack.base.conf.js
├── webpack.dev.conf.js
└── webpack.prod.conf.js
├── config
├── dev.env.js
├── index.js
└── prod.env.js
├── index.html
├── mineType.js
├── package.json
├── server.js
├── src
├── App.vue
├── api
│ └── index.js
├── assets
│ ├── css
│ │ └── reset.css
│ ├── img
│ │ ├── density.png
│ │ ├── drawtool_bar-11286ddf48e5d36fafefb42a9e62ffe22bf5e70ea63a9fd442e2c833cc24774e.svg
│ │ └── loca.png
│ └── logo.png
├── components
│ ├── Date.vue
│ ├── Hello.vue
│ └── freeDate.js
├── config.js
├── element.js
├── fonts
│ ├── demo.css
│ ├── demo_fontclass.html
│ ├── demo_symbol.html
│ ├── demo_unicode.html
│ ├── iconfont.css
│ ├── iconfont.eot
│ ├── iconfont.js
│ ├── iconfont.svg
│ ├── iconfont.ttf
│ └── iconfont.woff
├── main.js
├── router
│ └── index.js
├── utils
│ └── convert.js
└── views
│ ├── Map
│ ├── data.js
│ ├── index.vue
│ └── map.js
│ └── NotFound
│ └── index.vue
├── static
├── 0001.png
├── DrawingManager_min.css
├── DrawingManager_min.js
├── GeoUtils_min.js
├── Heatmap_min.js
├── MarkerClusterer_min.js
├── RectangleZoom_min.js
├── TextIconOverlay_min.1.js
├── TextIconOverlay_min.js
├── logo.png
├── m0.png
└── quan.png
└── yarn.lock
/.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-vue-jsx", "transform-runtime"]
12 | }
13 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = crlf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /build/
2 | /config/
3 | /dist/
4 | /*.js
5 |
6 | DrawingManager_min.js
7 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | // https://eslint.org/docs/user-guide/configuring
2 |
3 | module.exports = {
4 | root: true,
5 | parserOptions: {
6 | parser: 'babel-eslint',
7 | },
8 | env: {
9 | browser: true,
10 | },
11 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
12 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
13 | extends: ['plugin:vue/essential', 'airbnb-base'],
14 | // required to lint *.vue files
15 | plugins: ['vue'],
16 | // check if imports actually resolve
17 | settings: {
18 | 'import/resolver': {
19 | webpack: {
20 | config: 'build/webpack.base.conf.js',
21 | },
22 | },
23 | },
24 | // add your custom rules here
25 | rules: {
26 | // don't require .vue extension when importing
27 | 'import/extensions': [
28 | 'error',
29 | 'always',
30 | {
31 | js: 'never',
32 | vue: 'never',
33 | },
34 | ],
35 | // allow optionalDependencies
36 | 'import/no-extraneous-dependencies': [
37 | 'error',
38 | {
39 | optionalDependencies: ['test/unit/index.js'],
40 | },
41 | ],
42 | // allow debugger during development
43 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
44 | 'no-console': 0,
45 | 'linebreak-style': 0,
46 | 'no-unused-vars': 0,
47 | 'arrow-parens': ['error', 'always'],
48 | 'no-mixed-operators': 'off',
49 | 'max-len': [
50 | 'error',
51 | {
52 | code: 100,
53 | ignorePattern: '<.*>$',
54 | ignoreComments: true,
55 | ignoreTrailingComments: true,
56 | ignoreUrls: true,
57 | ignoreStrings: true,
58 | ignoreTemplateLiterals: true,
59 | ignoreRegExpLiterals: true,
60 | },
61 | ],
62 | },
63 | };
64 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | /dist/
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Editor directories and files
9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 |
--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 |
3 | module.exports = {
4 | "plugins": {
5 | "postcss-import": {},
6 | "postcss-url": {},
7 | // to edit target browsers: use "browserslist" field in package.json
8 | "autoprefixer": {}
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-echarts-heatmap
2 |
3 | > A Vue.js project
4 |
5 | ## Build Setup
6 |
7 | ``` bash
8 | # install dependencies
9 | npm install
10 |
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 |
14 | # build for production with minification
15 | npm run build
16 |
17 | # build for production and view the bundle analyzer report
18 | npm run build --report
19 | ```
20 |
21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
22 |
23 | ## 百度地图API文档
24 |
25 | http://lbsyun.baidu.com/index.php?title=jspopular
26 |
27 | ## 官方参考示例地址
28 |
29 | http://lbsyun.baidu.com/jsdemo.htm#a2_1
30 |
--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | require('./check-versions')()
3 |
4 | process.env.NODE_ENV = 'production'
5 |
6 | const ora = require('ora')
7 | const rm = require('rimraf')
8 | const path = require('path')
9 | const chalk = require('chalk')
10 | const webpack = require('webpack')
11 | const config = require('../config')
12 | const webpackConfig = require('./webpack.prod.conf')
13 |
14 | const spinner = ora('building for production...')
15 | spinner.start()
16 |
17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18 | if (err) throw err
19 | webpack(webpackConfig, (err, stats) => {
20 | spinner.stop()
21 | if (err) throw err
22 | process.stdout.write(stats.toString({
23 | colors: true,
24 | modules: false,
25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
26 | chunks: false,
27 | chunkModules: false
28 | }) + '\n\n')
29 |
30 | if (stats.hasErrors()) {
31 | console.log(chalk.red(' Build failed with errors.\n'))
32 | process.exit(1)
33 | }
34 |
35 | console.log(chalk.cyan(' Build complete.\n'))
36 | console.log(chalk.yellow(
37 | ' Tip: built files are meant to be served over an HTTP server.\n' +
38 | ' Opening index.html over file:// won\'t work.\n'
39 | ))
40 | })
41 | })
42 |
--------------------------------------------------------------------------------
/build/check-versions.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const chalk = require('chalk')
3 | const semver = require('semver')
4 | const packageConfig = require('../package.json')
5 | const shell = require('shelljs')
6 |
7 | function exec (cmd) {
8 | return require('child_process').execSync(cmd).toString().trim()
9 | }
10 |
11 | const versionRequirements = [
12 | {
13 | name: 'node',
14 | currentVersion: semver.clean(process.version),
15 | versionRequirement: packageConfig.engines.node
16 | }
17 | ]
18 |
19 | if (shell.which('npm')) {
20 | versionRequirements.push({
21 | name: 'npm',
22 | currentVersion: exec('npm --version'),
23 | versionRequirement: packageConfig.engines.npm
24 | })
25 | }
26 |
27 | module.exports = function () {
28 | const warnings = []
29 |
30 | for (let i = 0; i < versionRequirements.length; i++) {
31 | const mod = versionRequirements[i]
32 |
33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
34 | warnings.push(mod.name + ': ' +
35 | chalk.red(mod.currentVersion) + ' should be ' +
36 | chalk.green(mod.versionRequirement)
37 | )
38 | }
39 | }
40 |
41 | if (warnings.length) {
42 | console.log('')
43 | console.log(chalk.yellow('To use this template, you must update following to modules:'))
44 | console.log()
45 |
46 | for (let i = 0; i < warnings.length; i++) {
47 | const warning = warnings[i]
48 | console.log(' ' + warning)
49 | }
50 |
51 | console.log()
52 | process.exit(1)
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/build/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WQone/vue-echarts-heatmap/2428ae8b2a57c8f9752de458669b9b2d4584d31f/build/logo.png
--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const path = require('path')
3 | const config = require('../config')
4 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
5 | const packageConfig = require('../package.json')
6 |
7 | exports.assetsPath = function (_path) {
8 | const assetsSubDirectory = process.env.NODE_ENV === 'production'
9 | ? config.build.assetsSubDirectory
10 | : config.dev.assetsSubDirectory
11 |
12 | return path.posix.join(assetsSubDirectory, _path)
13 | }
14 |
15 | exports.cssLoaders = function (options) {
16 | options = options || {}
17 |
18 | const cssLoader = {
19 | loader: 'css-loader',
20 | options: {
21 | sourceMap: options.sourceMap
22 | }
23 | }
24 |
25 | const postcssLoader = {
26 | loader: 'postcss-loader',
27 | options: {
28 | sourceMap: options.sourceMap
29 | }
30 | }
31 |
32 | // generate loader string to be used with extract text plugin
33 | function generateLoaders (loader, loaderOptions) {
34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
35 |
36 | if (loader) {
37 | loaders.push({
38 | loader: loader + '-loader',
39 | options: Object.assign({}, loaderOptions, {
40 | sourceMap: options.sourceMap
41 | })
42 | })
43 | }
44 |
45 | // Extract CSS when that option is specified
46 | // (which is the case during production build)
47 | if (options.extract) {
48 | return ExtractTextPlugin.extract({
49 | use: loaders,
50 | fallback: 'vue-style-loader'
51 | })
52 | } else {
53 | return ['vue-style-loader'].concat(loaders)
54 | }
55 | }
56 |
57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html
58 | return {
59 | css: generateLoaders(),
60 | postcss: generateLoaders(),
61 | less: generateLoaders('less'),
62 | sass: generateLoaders('sass', { indentedSyntax: true }),
63 | scss: generateLoaders('sass'),
64 | stylus: generateLoaders('stylus'),
65 | styl: generateLoaders('stylus')
66 | }
67 | }
68 |
69 | // Generate loaders for standalone style files (outside of .vue)
70 | exports.styleLoaders = function (options) {
71 | const output = []
72 | const loaders = exports.cssLoaders(options)
73 |
74 | for (const extension in loaders) {
75 | const loader = loaders[extension]
76 | output.push({
77 | test: new RegExp('\\.' + extension + '$'),
78 | use: loader
79 | })
80 | }
81 |
82 | return output
83 | }
84 |
85 | exports.createNotifierCallback = () => {
86 | const notifier = require('node-notifier')
87 |
88 | return (severity, errors) => {
89 | if (severity !== 'error') return
90 |
91 | const error = errors[0]
92 | const filename = error.file && error.file.split('!').pop()
93 |
94 | notifier.notify({
95 | title: packageConfig.name,
96 | message: severity + ': ' + error.name,
97 | subtitle: filename || '',
98 | icon: path.join(__dirname, 'logo.png')
99 | })
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const utils = require('./utils')
3 | const config = require('../config')
4 | const isProduction = process.env.NODE_ENV === 'production'
5 | const sourceMapEnabled = isProduction
6 | ? config.build.productionSourceMap
7 | : config.dev.cssSourceMap
8 |
9 | module.exports = {
10 | loaders: utils.cssLoaders({
11 | sourceMap: sourceMapEnabled,
12 | extract: isProduction
13 | }),
14 | cssSourceMap: sourceMapEnabled,
15 | cacheBusting: config.dev.cacheBusting,
16 | transformToRequire: {
17 | video: ['src', 'poster'],
18 | source: 'src',
19 | img: 'src',
20 | image: 'xlink:href'
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const path = require('path')
3 | const utils = require('./utils')
4 | const config = require('../config')
5 | const vueLoaderConfig = require('./vue-loader.conf')
6 |
7 | function resolve (dir) {
8 | return path.join(__dirname, '..', dir)
9 | }
10 |
11 | const createLintingRule = () => ({
12 | test: /\.(js|vue)$/,
13 | loader: 'eslint-loader',
14 | enforce: 'pre',
15 | include: [resolve('src'), resolve('test')],
16 | options: {
17 | formatter: require('eslint-friendly-formatter'),
18 | emitWarning: !config.dev.showEslintErrorsInOverlay
19 | }
20 | })
21 |
22 | module.exports = {
23 | context: path.resolve(__dirname, '../'),
24 | entry: {
25 | app: './src/main.js'
26 | },
27 | output: {
28 | path: config.build.assetsRoot,
29 | filename: '[name].js',
30 | publicPath: process.env.NODE_ENV === 'production'
31 | ? config.build.assetsPublicPath
32 | : config.dev.assetsPublicPath
33 | },
34 | resolve: {
35 | extensions: ['.js', '.vue', '.json'],
36 | alias: {
37 | 'vue$': 'vue/dist/vue.esm.js',
38 | '@': resolve('src'),
39 | }
40 | },
41 | module: {
42 | rules: [
43 | ...(config.dev.useEslint ? [createLintingRule()] : []),
44 | {
45 | test: /\.vue$/,
46 | loader: 'vue-loader',
47 | options: vueLoaderConfig
48 | },
49 | {
50 | test: /\.js$/,
51 | loader: 'babel-loader',
52 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
53 | },
54 | {
55 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
56 | loader: 'url-loader',
57 | options: {
58 | limit: 10000,
59 | name: utils.assetsPath('img/[name].[hash:7].[ext]')
60 | }
61 | },
62 | {
63 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
64 | loader: 'url-loader',
65 | options: {
66 | limit: 10000,
67 | name: utils.assetsPath('media/[name].[hash:7].[ext]')
68 | }
69 | },
70 | {
71 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
72 | loader: 'url-loader',
73 | options: {
74 | limit: 10000,
75 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
76 | }
77 | }
78 | ]
79 | },
80 | node: {
81 | // prevent webpack from injecting useless setImmediate polyfill because Vue
82 | // source contains it (although only uses it if it's native).
83 | setImmediate: false,
84 | // prevent webpack from injecting mocks to Node native modules
85 | // that does not make sense for the client
86 | dgram: 'empty',
87 | fs: 'empty',
88 | net: 'empty',
89 | tls: 'empty',
90 | child_process: 'empty'
91 | }
92 | }
93 |
--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const utils = require('./utils')
3 | const webpack = require('webpack')
4 | const config = require('../config')
5 | const merge = require('webpack-merge')
6 | const path = require('path')
7 | const baseWebpackConfig = require('./webpack.base.conf')
8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
11 | const portfinder = require('portfinder')
12 |
13 | const HOST = process.env.HOST
14 | const PORT = process.env.PORT && Number(process.env.PORT)
15 |
16 | const devWebpackConfig = merge(baseWebpackConfig, {
17 | module: {
18 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
19 | },
20 | // cheap-module-eval-source-map is faster for development
21 | devtool: config.dev.devtool,
22 |
23 | // these devServer options should be customized in /config/index.js
24 | devServer: {
25 | clientLogLevel: 'warning',
26 | historyApiFallback: {
27 | rewrites: [
28 | { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
29 | ],
30 | },
31 | hot: true,
32 | contentBase: false, // since we use CopyWebpackPlugin.
33 | compress: true,
34 | host: HOST || config.dev.host,
35 | port: PORT || config.dev.port,
36 | open: config.dev.autoOpenBrowser,
37 | overlay: config.dev.errorOverlay
38 | ? { warnings: false, errors: true }
39 | : false,
40 | publicPath: config.dev.assetsPublicPath,
41 | proxy: config.dev.proxyTable,
42 | quiet: true, // necessary for FriendlyErrorsPlugin
43 | watchOptions: {
44 | poll: config.dev.poll,
45 | }
46 | },
47 | plugins: [
48 | new webpack.DefinePlugin({
49 | 'process.env': require('../config/dev.env')
50 | }),
51 | new webpack.HotModuleReplacementPlugin(),
52 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
53 | new webpack.NoEmitOnErrorsPlugin(),
54 | // https://github.com/ampedandwired/html-webpack-plugin
55 | new HtmlWebpackPlugin({
56 | filename: 'index.html',
57 | template: 'index.html',
58 | inject: true
59 | }),
60 | // copy custom static assets
61 | new CopyWebpackPlugin([
62 | {
63 | from: path.resolve(__dirname, '../static'),
64 | to: config.dev.assetsSubDirectory,
65 | ignore: ['.*']
66 | }
67 | ])
68 | ]
69 | })
70 |
71 | module.exports = new Promise((resolve, reject) => {
72 | portfinder.basePort = process.env.PORT || config.dev.port
73 | portfinder.getPort((err, port) => {
74 | if (err) {
75 | reject(err)
76 | } else {
77 | // publish the new Port, necessary for e2e tests
78 | process.env.PORT = port
79 | // add port to devServer config
80 | devWebpackConfig.devServer.port = port
81 |
82 | // Add FriendlyErrorsPlugin
83 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
84 | compilationSuccessInfo: {
85 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
86 | },
87 | onErrors: config.dev.notifyOnErrors
88 | ? utils.createNotifierCallback()
89 | : undefined
90 | }))
91 |
92 | resolve(devWebpackConfig)
93 | }
94 | })
95 | })
96 |
--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const path = require('path')
3 | const utils = require('./utils')
4 | const webpack = require('webpack')
5 | const config = require('../config')
6 | const merge = require('webpack-merge')
7 | const baseWebpackConfig = require('./webpack.base.conf')
8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
13 |
14 | const env = require('../config/prod.env')
15 |
16 | const webpackConfig = merge(baseWebpackConfig, {
17 | module: {
18 | rules: utils.styleLoaders({
19 | sourceMap: config.build.productionSourceMap,
20 | extract: true,
21 | usePostCSS: true
22 | })
23 | },
24 | devtool: config.build.productionSourceMap ? config.build.devtool : false,
25 | output: {
26 | path: config.build.assetsRoot,
27 | filename: utils.assetsPath('js/[name].[chunkhash].js'),
28 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
29 | },
30 | plugins: [
31 | // http://vuejs.github.io/vue-loader/en/workflow/production.html
32 | new webpack.DefinePlugin({
33 | 'process.env': env
34 | }),
35 | new UglifyJsPlugin({
36 | uglifyOptions: {
37 | compress: {
38 | warnings: false
39 | }
40 | },
41 | sourceMap: config.build.productionSourceMap,
42 | parallel: true
43 | }),
44 | // extract css into its own file
45 | new ExtractTextPlugin({
46 | filename: utils.assetsPath('css/[name].[contenthash].css'),
47 | // Setting the following option to `false` will not extract CSS from codesplit chunks.
48 | // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
49 | // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
50 | // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
51 | allChunks: true,
52 | }),
53 | // Compress extracted CSS. We are using this plugin so that possible
54 | // duplicated CSS from different components can be deduped.
55 | new OptimizeCSSPlugin({
56 | cssProcessorOptions: config.build.productionSourceMap
57 | ? { safe: true, map: { inline: false } }
58 | : { safe: true }
59 | }),
60 | // generate dist index.html with correct asset hash for caching.
61 | // you can customize output by editing /index.html
62 | // see https://github.com/ampedandwired/html-webpack-plugin
63 | new HtmlWebpackPlugin({
64 | filename: config.build.index,
65 | template: 'index.html',
66 | inject: true,
67 | minify: {
68 | removeComments: true,
69 | collapseWhitespace: true,
70 | removeAttributeQuotes: true
71 | // more options:
72 | // https://github.com/kangax/html-minifier#options-quick-reference
73 | },
74 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin
75 | chunksSortMode: 'dependency'
76 | }),
77 | // keep module.id stable when vendor modules does not change
78 | new webpack.HashedModuleIdsPlugin(),
79 | // enable scope hoisting
80 | new webpack.optimize.ModuleConcatenationPlugin(),
81 | // split vendor js into its own file
82 | new webpack.optimize.CommonsChunkPlugin({
83 | name: 'vendor',
84 | minChunks (module) {
85 | // any required modules inside node_modules are extracted to vendor
86 | return (
87 | module.resource &&
88 | /\.js$/.test(module.resource) &&
89 | module.resource.indexOf(
90 | path.join(__dirname, '../node_modules')
91 | ) === 0
92 | )
93 | }
94 | }),
95 | // extract webpack runtime and module manifest to its own file in order to
96 | // prevent vendor hash from being updated whenever app bundle is updated
97 | new webpack.optimize.CommonsChunkPlugin({
98 | name: 'manifest',
99 | minChunks: Infinity
100 | }),
101 | // This instance extracts shared chunks from code splitted chunks and bundles them
102 | // in a separate chunk, similar to the vendor chunk
103 | // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
104 | new webpack.optimize.CommonsChunkPlugin({
105 | name: 'app',
106 | async: 'vendor-async',
107 | children: true,
108 | minChunks: 3
109 | }),
110 |
111 | // copy custom static assets
112 | new CopyWebpackPlugin([
113 | {
114 | from: path.resolve(__dirname, '../static'),
115 | to: config.build.assetsSubDirectory,
116 | ignore: ['.*']
117 | }
118 | ])
119 | ]
120 | })
121 |
122 | if (config.build.productionGzip) {
123 | const CompressionWebpackPlugin = require('compression-webpack-plugin')
124 |
125 | webpackConfig.plugins.push(
126 | new CompressionWebpackPlugin({
127 | asset: '[path].gz[query]',
128 | algorithm: 'gzip',
129 | test: new RegExp(
130 | '\\.(' +
131 | config.build.productionGzipExtensions.join('|') +
132 | ')$'
133 | ),
134 | threshold: 10240,
135 | minRatio: 0.8
136 | })
137 | )
138 | }
139 |
140 | if (config.build.bundleAnalyzerReport) {
141 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
142 | webpackConfig.plugins.push(new BundleAnalyzerPlugin())
143 | }
144 |
145 | module.exports = webpackConfig
146 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | // Template version: 1.3.1
3 | // see http://vuejs-templates.github.io/webpack for documentation.
4 |
5 | const path = require('path');
6 |
7 | console.log(process.env.NODE_ENV);
8 |
9 | module.exports = {
10 | dev: {
11 | // Paths
12 | assetsSubDirectory: 'static',
13 | assetsPublicPath: '/',
14 | proxyTable: {
15 | '/api': {
16 | target: 'http://192.168.10.223/',
17 | changeOrigin: true,
18 | pathRewrite: {
19 | '^/api': '/',
20 | },
21 | },
22 | },
23 |
24 | // Various Dev Server settings
25 | host: '0.0.0.0', // can be overwritten by process.env.HOST
26 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
27 | autoOpenBrowser: false,
28 | errorOverlay: true,
29 | notifyOnErrors: true,
30 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
31 |
32 | // Use Eslint Loader?
33 | // If true, your code will be linted during bundling and
34 | // linting errors and warnings will be shown in the console.
35 | useEslint: true,
36 | // If true, eslint errors and warnings will also be shown in the error overlay
37 | // in the browser.
38 | showEslintErrorsInOverlay: false,
39 |
40 | /**
41 | * Source Maps
42 | */
43 |
44 | // https://webpack.js.org/configuration/devtool/#development
45 | devtool: 'cheap-module-eval-source-map',
46 |
47 | // If you have problems debugging vue-files in devtools,
48 | // set this to false - it *may* help
49 | // https://vue-loader.vuejs.org/en/options.html#cachebusting
50 | cacheBusting: true,
51 |
52 | cssSourceMap: true,
53 | },
54 |
55 | build: {
56 | // Template for index.html
57 | index: path.resolve(__dirname, '../dist/index.html'),
58 |
59 | // Paths
60 | assetsRoot: path.resolve(__dirname, '../dist'),
61 | assetsSubDirectory: 'static',
62 | assetsPublicPath: '/',
63 |
64 | /**
65 | * Source Maps
66 | */
67 |
68 | productionSourceMap: true,
69 | // https://webpack.js.org/configuration/devtool/#production
70 | devtool: '#source-map',
71 |
72 | // Gzip off by default as many popular static hosts such as
73 | // Surge or Netlify already gzip all static assets for you.
74 | // Before setting to `true`, make sure to:
75 | // npm install --save-dev compression-webpack-plugin
76 | productionGzip: false,
77 | productionGzipExtensions: ['js', 'css'],
78 |
79 | // Run the build command with an extra argument to
80 | // View the bundle analyzer report after build finishes:
81 | // `npm run build --report`
82 | // Set to `true` or `false` to always turn it on or off
83 | bundleAnalyzerReport: process.env.npm_config_report,
84 | },
85 | };
86 |
--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 | NODE_ENV: '"production"'
4 | }
5 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 用电人口数量展示地图
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/mineType.js:
--------------------------------------------------------------------------------
1 | const type = {
2 | '.': 'application/x-',
3 | '.tif': 'image/tiff',
4 | '.js': 'application/x-javascript',
5 | '.css': 'text/css',
6 | '.jpg': 'image/jpeg',
7 | '.png': 'image/png',
8 | '.gif': 'image/gif',
9 | };
10 |
11 | module.exports = type;
12 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-echarts-heatmap",
3 | "version": "1.0.0",
4 | "description": "A Vue.js project",
5 | "author": "wuqian <1307144731@qq.com>",
6 | "private": true,
7 | "scripts": {
8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
9 | "start": "npm run dev",
10 | "lint": "eslint --ext .js,.vue src",
11 | "build": "node build/build.js"
12 | },
13 | "dependencies": {
14 | "axios": "^0.18.0",
15 | "echarts": "^4.1.0",
16 | "element-ui": "^2.4.5",
17 | "vue": "^2.5.2",
18 | "vue-router": "^3.0.1"
19 | },
20 | "devDependencies": {
21 | "autoprefixer": "^7.1.2",
22 | "babel-core": "^6.22.1",
23 | "babel-eslint": "^8.2.1",
24 | "babel-helper-vue-jsx-merge-props": "^2.0.3",
25 | "babel-loader": "^7.1.1",
26 | "babel-plugin-syntax-jsx": "^6.18.0",
27 | "babel-plugin-transform-runtime": "^6.22.0",
28 | "babel-plugin-transform-vue-jsx": "^3.5.0",
29 | "babel-preset-env": "^1.3.2",
30 | "babel-preset-stage-2": "^6.22.0",
31 | "chalk": "^2.0.1",
32 | "copy-webpack-plugin": "^4.0.1",
33 | "css-loader": "^0.28.0",
34 | "eslint": "^4.15.0",
35 | "eslint-config-airbnb-base": "^11.3.0",
36 | "eslint-friendly-formatter": "^3.0.0",
37 | "eslint-import-resolver-webpack": "^0.8.3",
38 | "eslint-loader": "^1.7.1",
39 | "eslint-plugin-import": "^2.7.0",
40 | "eslint-plugin-vue": "^4.0.0",
41 | "extract-text-webpack-plugin": "^3.0.0",
42 | "file-loader": "^1.1.4",
43 | "friendly-errors-webpack-plugin": "^1.6.1",
44 | "html-webpack-plugin": "^2.30.1",
45 | "node-notifier": "^5.1.2",
46 | "optimize-css-assets-webpack-plugin": "^3.2.0",
47 | "ora": "^1.2.0",
48 | "portfinder": "^1.0.13",
49 | "postcss-import": "^11.0.0",
50 | "postcss-loader": "^2.0.8",
51 | "postcss-url": "^7.2.1",
52 | "rimraf": "^2.6.0",
53 | "semver": "^5.3.0",
54 | "shelljs": "^0.7.6",
55 | "uglifyjs-webpack-plugin": "^1.1.1",
56 | "url-loader": "^0.5.8",
57 | "vue-loader": "^13.3.0",
58 | "vue-style-loader": "^3.0.1",
59 | "vue-template-compiler": "^2.5.2",
60 | "webpack": "^3.6.0",
61 | "webpack-bundle-analyzer": "^2.9.0",
62 | "webpack-dev-server": "^2.9.1",
63 | "webpack-merge": "^4.1.0"
64 | },
65 | "engines": {
66 | "node": ">= 6.0.0",
67 | "npm": ">= 3.0.0"
68 | },
69 | "browserslist": [
70 | "> 1%",
71 | "last 2 versions",
72 | "not ie <= 8"
73 | ]
74 | }
75 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | const http = require('http');
2 | const fs = require('fs');
3 |
4 | const mineType = require('./mineType');
5 |
6 | const documentRoot = './dist/';
7 |
8 | const server = http.createServer((req, res) => {
9 | const url = req.url;
10 | let file = documentRoot + url;
11 |
12 | const arr = url.split('/');
13 |
14 | // console.log(arr);
15 |
16 | if (arr.length > 1 && (!arr[1] || /\?/.test(arr[1]))) {
17 | file = `${documentRoot}index.html`;
18 | } else if (arr[arr.length - 1].indexOf('.') === -1 || /\?/.test(arr[arr.length - 1])) {
19 | file = `${documentRoot}${url}index.html`;
20 | }
21 |
22 | // console.log('url', url, file, documentRoot);
23 |
24 | fs.readFile(file, (err, data) => {
25 | if (err) {
26 | res.writeHeader(404, {
27 | 'content-type': 'text/html;charset="utf-8"',
28 | });
29 | res.write('404
');
30 | res.end();
31 | } else {
32 | const nameReg = new RegExp(/(\.([^.]+))$/);
33 | const name = url.match(nameReg);
34 | if (name && mineType[name[0]]) {
35 | res.writeHeader(200, {
36 | 'content-type': `${mineType[name[0]]};charset="utf-8"`,
37 | });
38 | } else {
39 | res.writeHeader(200, {
40 | 'content-type': 'text/html;charset="utf-8"',
41 | });
42 | }
43 | res.write(data);
44 | res.end();
45 | }
46 | });
47 | }).listen(8585);
48 |
49 | console.log('------------------------------------');
50 | console.log('server run');
51 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/src/api/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * axios初始化配置
3 | * --------------------------------------
4 | * 大部分接口以这个为基础
5 | */
6 |
7 | import axios from 'axios';
8 | import { Message } from 'element-ui';
9 | import config from '../config';
10 |
11 | const instance = axios.create({
12 | baseURL: config.apiHost,
13 | withCredentials: true,
14 | params: {},
15 | });
16 |
17 | instance.interceptors.request.use((request) => {
18 | const axiosRequest = {
19 | ...request,
20 | params: {
21 | ...request.params,
22 | },
23 | };
24 | return axiosRequest;
25 | });
26 |
27 | instance.interceptors.response.use(
28 | (response) => {
29 | if (response.data.code !== '0') {
30 | Message({
31 | message: response.data.message,
32 | type: 'warning',
33 | });
34 | console.log(response.data.message);
35 | }
36 | return response;
37 | },
38 | (error) => {
39 | console.log(error.message);
40 | return Promise.reject(error);
41 | },
42 | );
43 | export default instance;
44 |
--------------------------------------------------------------------------------
/src/assets/css/reset.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by dingyiming on 2017/6/2.
3 | *
4 | * 江苏摇铃网络科技有限公司，版权所有。
5 | * Copyright (C) 2015-2017 All Rights Reserved.
6 | */
7 | html {
8 | font-size: 100px;
9 | }
10 |
11 | body {
12 | font-size: 16px;
13 | color: #666666;
14 | font-family: 'Microsoft YaHei', '微软雅黑', 'Helvetica Neue', Helvetica, Arial, 'PingFang SC',
15 | 'Hiragino Sans GB', sans-serif;
16 | overflow: hidden;
17 | }
18 |
19 | html,
20 | body {
21 | margin: 0;
22 | }
23 |
24 | input,
25 | select,
26 | textarea,
27 | label {
28 | font-family: 'Microsoft YaHei', '微软雅黑', 'Helvetica Neue', Helvetica, Arial, 'PingFang SC',
29 | 'Hiragino Sans GB', sans-serif;
30 | }
31 |
32 | a {
33 | text-decoration: none;
34 | }
35 |
36 | ul,
37 | ol {
38 | list-style: none;
39 | }
40 |
41 | html,
42 | body,
43 | div,
44 | h1,
45 | h2,
46 | h3,
47 | h4,
48 | h5,
49 | h6,
50 | p,
51 | dl,
52 | dt,
53 | dd,
54 | ol,
55 | ul,
56 | li,
57 | fieldset,
58 | form,
59 | label,
60 | input,
61 | legend,
62 | table,
63 | caption,
64 | tbody,
65 | tfoot,
66 | thead,
67 | tr,
68 | th,
69 | td,
70 | textarea,
71 | article,
72 | aside,
73 | audio,
74 | canvas,
75 | figure,
76 | footer,
77 | header,
78 | mark,
79 | menu,
80 | nav,
81 | section,
82 | time,
83 | video {
84 | margin: 0;
85 | padding: 0;
86 | }
87 |
88 | .app {
89 | min-width: 1024px;
90 | }
91 |
92 | /* 去除百度地图水印 */
93 | .BMap_cpyCtrl {
94 | display: none;
95 | }
96 | .anchorBL {
97 | display: none;
98 | }
99 |
--------------------------------------------------------------------------------
/src/assets/img/density.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WQone/vue-echarts-heatmap/2428ae8b2a57c8f9752de458669b9b2d4584d31f/src/assets/img/density.png
--------------------------------------------------------------------------------
/src/assets/img/loca.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WQone/vue-echarts-heatmap/2428ae8b2a57c8f9752de458669b9b2d4584d31f/src/assets/img/loca.png
--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WQone/vue-echarts-heatmap/2428ae8b2a57c8f9752de458669b9b2d4584d31f/src/assets/logo.png
--------------------------------------------------------------------------------
/src/components/Date.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
54 |
121 |
122 |
--------------------------------------------------------------------------------
/src/components/Hello.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{msg}}
4 |
5 |
6 |
7 |
8 |
26 |
27 |
28 |
30 |
--------------------------------------------------------------------------------
/src/components/freeDate.js:
--------------------------------------------------------------------------------
1 | // 人口数量count
2 | // 经度lng
3 | // 纬度lat
4 | // 地址
5 | // 区域名称
6 | // 等级
7 | const freeList = [
8 | {
9 | name: '元旦',
10 | date: '01-01',
11 | },
12 | {
13 | name: '情人节',
14 | date: '02-14',
15 | },
16 | {
17 | name: '妇女节',
18 | date: '03-08',
19 | },
20 | {
21 | name: '植树节',
22 | date: '03-12',
23 | },
24 | // {
25 | // name: '消费者权益日',
26 | // date: '03-12',
27 | // },
28 | {
29 | name: '劳动节',
30 | date: '05-01',
31 | num: 3,
32 | },
33 | {
34 | name: '青年节',
35 | date: '05-04',
36 | },
37 | {
38 | name: '端午节',
39 | date: '05-05',
40 | },
41 | {
42 | name: '七夕节',
43 | date: '07-07',
44 | },
45 | {
46 | name: '中秋节',
47 | date: '08-15',
48 | },
49 | {
50 | name: '国庆节',
51 | date: '10-01',
52 | num: 7,
53 | },
54 | {
55 | name: '平安夜',
56 | date: '12-24',
57 | },
58 | {
59 | name: '圣诞节',
60 | date: '12-25',
61 | },
62 | ];
63 |
64 | export default freeList;
65 |
--------------------------------------------------------------------------------
/src/config.js:
--------------------------------------------------------------------------------
1 | // 配置文件
2 | // (地址配置均以/结尾，后续无需再加)
3 |
4 | // 开发环境 (dev)
5 | let apiHost = `${location.protocol}//${location.host}/api/`;
6 |
7 | if (process.env.NODE_ENV && process.env.NODE_ENV === 'production') {
8 | apiHost = `${location.protocol}//${location.host}/api/`;
9 | }
10 |
11 | console.log(process.env.NODE_ENV);
12 |
13 | export default {
14 | apiHost,
15 | };
16 |
--------------------------------------------------------------------------------
/src/element.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import {
3 | Pagination,
4 | Dialog,
5 | Autocomplete,
6 | Dropdown,
7 | DropdownMenu,
8 | DropdownItem,
9 | Menu,
10 | Submenu,
11 | MenuItem,
12 | MenuItemGroup,
13 | Input,
14 | InputNumber,
15 | Radio,
16 | RadioGroup,
17 | RadioButton,
18 | Checkbox,
19 | CheckboxButton,
20 | CheckboxGroup,
21 | Switch,
22 | Select,
23 | Option,
24 | OptionGroup,
25 | Button,
26 | ButtonGroup,
27 | Table,
28 | TableColumn,
29 | DatePicker,
30 | TimeSelect,
31 | TimePicker,
32 | Popover,
33 | Tooltip,
34 | Breadcrumb,
35 | BreadcrumbItem,
36 | Form,
37 | FormItem,
38 | Tabs,
39 | TabPane,
40 | Tag,
41 | Tree,
42 | Alert,
43 | Slider,
44 | Icon,
45 | Row,
46 | Col,
47 | Upload,
48 | Progress,
49 | Badge,
50 | Card,
51 | Rate,
52 | Steps,
53 | Step,
54 | Carousel,
55 | CarouselItem,
56 | Collapse,
57 | CollapseItem,
58 | Cascader,
59 | ColorPicker,
60 | // Transfer,
61 | Container,
62 | Header,
63 | Aside,
64 | Main,
65 | Footer,
66 | Loading,
67 | MessageBox,
68 | Message,
69 | Notification,
70 | } from 'element-ui';
71 |
72 | import convert from './utils/convert'; // 转换
73 |
74 | Vue.prototype.convert = convert;
75 |
76 | Vue.use(Pagination);
77 | Vue.use(Dialog);
78 | Vue.use(Autocomplete);
79 | Vue.use(Dropdown);
80 | Vue.use(DropdownMenu);
81 | Vue.use(DropdownItem);
82 | Vue.use(Menu);
83 | Vue.use(Submenu);
84 | Vue.use(MenuItem);
85 | Vue.use(MenuItemGroup);
86 | Vue.use(Input);
87 | Vue.use(InputNumber);
88 | Vue.use(Radio);
89 | Vue.use(RadioGroup);
90 | Vue.use(RadioButton);
91 | Vue.use(Checkbox);
92 | Vue.use(CheckboxButton);
93 | Vue.use(CheckboxGroup);
94 | Vue.use(Switch);
95 | Vue.use(Select);
96 | Vue.use(Option);
97 | Vue.use(OptionGroup);
98 | Vue.use(Button);
99 | Vue.use(ButtonGroup);
100 | Vue.use(Table);
101 | Vue.use(TableColumn);
102 | Vue.use(DatePicker);
103 | Vue.use(TimeSelect);
104 | Vue.use(TimePicker);
105 | Vue.use(Popover);
106 | Vue.use(Tooltip);
107 | Vue.use(Breadcrumb);
108 | Vue.use(BreadcrumbItem);
109 | Vue.use(Form);
110 | Vue.use(FormItem);
111 | Vue.use(Tabs);
112 | Vue.use(TabPane);
113 | Vue.use(Tag);
114 | Vue.use(Tree);
115 | Vue.use(Alert);
116 | Vue.use(Slider);
117 | Vue.use(Icon);
118 | Vue.use(Row);
119 | Vue.use(Col);
120 | Vue.use(Upload);
121 | Vue.use(Progress);
122 | Vue.use(Badge);
123 | Vue.use(Card);
124 | Vue.use(Rate);
125 | Vue.use(Steps);
126 | Vue.use(Step);
127 | Vue.use(Carousel);
128 | Vue.use(CarouselItem);
129 | Vue.use(Collapse);
130 | Vue.use(CollapseItem);
131 | Vue.use(Cascader);
132 | Vue.use(ColorPicker);
133 | Vue.use(Container);
134 | Vue.use(Header);
135 | Vue.use(Aside);
136 | Vue.use(Main);
137 | Vue.use(Footer);
138 |
139 | Vue.use(Loading.directive);
140 |
141 | Vue.prototype.$loading = Loading.service;
142 | Vue.prototype.$msgbox = MessageBox;
143 | Vue.prototype.$alert = MessageBox.alert;
144 | Vue.prototype.$confirm = MessageBox.confirm;
145 | Vue.prototype.$prompt = MessageBox.prompt;
146 | Vue.prototype.$notify = Notification;
147 | Vue.prototype.$message = Message;
148 |
--------------------------------------------------------------------------------
/src/fonts/demo.css:
--------------------------------------------------------------------------------
1 | *{margin: 0;padding: 0;list-style: none;}
2 | /*
3 | KISSY CSS Reset
4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
7 | 特色：1. 适应中文；2. 基于最新主流浏览器。
8 | 维护：玉伯, 正淳
9 | */
10 |
11 | /** 清除内外边距 **/
12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
14 | pre, /* text formatting elements 文本格式元素 */
15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
16 | th, td /* table elements 表格元素 */ {
17 | margin: 0;
18 | padding: 0;
19 | }
20 |
21 | /** 设置默认字体 **/
22 | body,
23 | button, input, select, textarea /* for ie */ {
24 | font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
25 | }
26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; }
27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
30 |
31 | /** 重置列表元素 **/
32 | ul, ol { list-style: none; }
33 |
34 | /** 重置文本格式元素 **/
35 | a { text-decoration: none; }
36 | a:hover { text-decoration: underline; }
37 |
38 |
39 | /** 重置表单元素 **/
40 | legend { color: #000; } /* for ie6 */
41 | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
43 | /* 注：optgroup 无法扶正 */
44 |
45 | /** 重置表格元素 **/
46 | table { border-collapse: collapse; border-spacing: 0; }
47 |
48 | /* 清除浮动 */
49 | .ks-clear:after, .clear:after {
50 | content: '\20';
51 | display: block;
52 | height: 0;
53 | clear: both;
54 | }
55 | .ks-clear, .clear {
56 | *zoom: 1;
57 | }
58 |
59 | .main {
60 | padding: 30px 100px;
61 | width: 960px;
62 | margin: 0 auto;
63 | }
64 | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
65 |
66 | .helps{margin-top:40px;}
67 | .helps pre{
68 | padding:20px;
69 | margin:10px 0;
70 | border:solid 1px #e7e1cd;
71 | background-color: #fffdef;
72 | overflow: auto;
73 | }
74 |
75 | .icon_lists{
76 | width: 100% !important;
77 |
78 | }
79 |
80 | .icon_lists li{
81 | float:left;
82 | width: 100px;
83 | height:180px;
84 | text-align: center;
85 | list-style: none !important;
86 | }
87 | .icon_lists .icon{
88 | font-size: 42px;
89 | line-height: 100px;
90 | margin: 10px 0;
91 | color:#333;
92 | -webkit-transition: font-size 0.25s ease-out 0s;
93 | -moz-transition: font-size 0.25s ease-out 0s;
94 | transition: font-size 0.25s ease-out 0s;
95 |
96 | }
97 | .icon_lists .icon:hover{
98 | font-size: 100px;
99 | }
100 |
101 |
102 |
103 | .markdown {
104 | color: #666;
105 | font-size: 14px;
106 | line-height: 1.8;
107 | }
108 |
109 | .highlight {
110 | line-height: 1.5;
111 | }
112 |
113 | .markdown img {
114 | vertical-align: middle;
115 | max-width: 100%;
116 | }
117 |
118 | .markdown h1 {
119 | color: #404040;
120 | font-weight: 500;
121 | line-height: 40px;
122 | margin-bottom: 24px;
123 | }
124 |
125 | .markdown h2,
126 | .markdown h3,
127 | .markdown h4,
128 | .markdown h5,
129 | .markdown h6 {
130 | color: #404040;
131 | margin: 1.6em 0 0.6em 0;
132 | font-weight: 500;
133 | clear: both;
134 | }
135 |
136 | .markdown h1 {
137 | font-size: 28px;
138 | }
139 |
140 | .markdown h2 {
141 | font-size: 22px;
142 | }
143 |
144 | .markdown h3 {
145 | font-size: 16px;
146 | }
147 |
148 | .markdown h4 {
149 | font-size: 14px;
150 | }
151 |
152 | .markdown h5 {
153 | font-size: 12px;
154 | }
155 |
156 | .markdown h6 {
157 | font-size: 12px;
158 | }
159 |
160 | .markdown hr {
161 | height: 1px;
162 | border: 0;
163 | background: #e9e9e9;
164 | margin: 16px 0;
165 | clear: both;
166 | }
167 |
168 | .markdown p,
169 | .markdown pre {
170 | margin: 1em 0;
171 | }
172 |
173 | .markdown > p,
174 | .markdown > blockquote,
175 | .markdown > .highlight,
176 | .markdown > ol,
177 | .markdown > ul {
178 | width: 80%;
179 | }
180 |
181 | .markdown ul > li {
182 | list-style: circle;
183 | }
184 |
185 | .markdown > ul li,
186 | .markdown blockquote ul > li {
187 | margin-left: 20px;
188 | padding-left: 4px;
189 | }
190 |
191 | .markdown > ul li p,
192 | .markdown > ol li p {
193 | margin: 0.6em 0;
194 | }
195 |
196 | .markdown ol > li {
197 | list-style: decimal;
198 | }
199 |
200 | .markdown > ol li,
201 | .markdown blockquote ol > li {
202 | margin-left: 20px;
203 | padding-left: 4px;
204 | }
205 |
206 | .markdown code {
207 | margin: 0 3px;
208 | padding: 0 5px;
209 | background: #eee;
210 | border-radius: 3px;
211 | }
212 |
213 | .markdown pre {
214 | border-radius: 6px;
215 | background: #f7f7f7;
216 | padding: 20px;
217 | }
218 |
219 | .markdown pre code {
220 | border: none;
221 | background: #f7f7f7;
222 | margin: 0;
223 | }
224 |
225 | .markdown strong,
226 | .markdown b {
227 | font-weight: 600;
228 | }
229 |
230 | .markdown > table {
231 | border-collapse: collapse;
232 | border-spacing: 0px;
233 | empty-cells: show;
234 | border: 1px solid #e9e9e9;
235 | width: 95%;
236 | margin-bottom: 24px;
237 | }
238 |
239 | .markdown > table th {
240 | white-space: nowrap;
241 | color: #333;
242 | font-weight: 600;
243 |
244 | }
245 |
246 | .markdown > table th,
247 | .markdown > table td {
248 | border: 1px solid #e9e9e9;
249 | padding: 8px 16px;
250 | text-align: left;
251 | }
252 |
253 | .markdown > table th {
254 | background: #F7F7F7;
255 | }
256 |
257 | .markdown blockquote {
258 | font-size: 90%;
259 | color: #999;
260 | border-left: 4px solid #e9e9e9;
261 | padding-left: 0.8em;
262 | margin: 1em 0;
263 | font-style: italic;
264 | }
265 |
266 | .markdown blockquote p {
267 | margin: 0;
268 | }
269 |
270 | .markdown .anchor {
271 | opacity: 0;
272 | transition: opacity 0.3s ease;
273 | margin-left: 8px;
274 | }
275 |
276 | .markdown .waiting {
277 | color: #ccc;
278 | }
279 |
280 | .markdown h1:hover .anchor,
281 | .markdown h2:hover .anchor,
282 | .markdown h3:hover .anchor,
283 | .markdown h4:hover .anchor,
284 | .markdown h5:hover .anchor,
285 | .markdown h6:hover .anchor {
286 | opacity: 1;
287 | display: inline-block;
288 | }
289 |
290 | .markdown > br,
291 | .markdown > p > br {
292 | clear: both;
293 | }
294 |
295 |
296 | .hljs {
297 | display: block;
298 | background: white;
299 | padding: 0.5em;
300 | color: #333333;
301 | overflow-x: auto;
302 | }
303 |
304 | .hljs-comment,
305 | .hljs-meta {
306 | color: #969896;
307 | }
308 |
309 | .hljs-string,
310 | .hljs-variable,
311 | .hljs-template-variable,
312 | .hljs-strong,
313 | .hljs-emphasis,
314 | .hljs-quote {
315 | color: #df5000;
316 | }
317 |
318 | .hljs-keyword,
319 | .hljs-selector-tag,
320 | .hljs-type {
321 | color: #a71d5d;
322 | }
323 |
324 | .hljs-literal,
325 | .hljs-symbol,
326 | .hljs-bullet,
327 | .hljs-attribute {
328 | color: #0086b3;
329 | }
330 |
331 | .hljs-section,
332 | .hljs-name {
333 | color: #63a35c;
334 | }
335 |
336 | .hljs-tag {
337 | color: #333333;
338 | }
339 |
340 | .hljs-title,
341 | .hljs-attr,
342 | .hljs-selector-id,
343 | .hljs-selector-class,
344 | .hljs-selector-attr,
345 | .hljs-selector-pseudo {
346 | color: #795da3;
347 | }
348 |
349 | .hljs-addition {
350 | color: #55a532;
351 | background-color: #eaffea;
352 | }
353 |
354 | .hljs-deletion {
355 | color: #bd2c00;
356 | background-color: #ffecec;
357 | }
358 |
359 | .hljs-link {
360 | text-decoration: underline;
361 | }
362 |
363 | pre{
364 | background: #fff;
365 | }
366 |
367 |
368 |
369 |
370 |
371 |
--------------------------------------------------------------------------------
/src/fonts/demo_fontclass.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | IconFont
7 |
8 |
9 |
10 |
11 |
12 |
IconFont 图标
13 |
14 |
15 | -
16 |
17 |
信息
18 | .icon-ibkkj
19 |
20 |
21 | -
22 |
23 |
当前视图
24 | .icon-dangqianshitu
25 |
26 |
27 | -
28 |
29 |
地图
30 | .icon-ditu
31 |
32 |
33 | -
34 |
35 |
查看
36 | .icon-chakan
37 |
38 |
39 | -
40 |
41 |
当前位置
42 | .icon-dangqianweizhi
43 |
44 |
45 | -
46 |
47 |
查看
48 | .icon-chakan-copy
49 |
50 |
51 | -
52 |
53 |
眼睛 (2)
54 | .icon-yanjing
55 |
56 |
57 | -
58 |
59 |
当前应用
60 | .icon-application
61 |
62 |
63 | -
64 |
65 |
当前位置
66 | .icon-dangqianweizhi1
67 |
68 |
69 |
70 |
71 |
font-class引用
72 |
73 |
74 |
font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
75 |
与unicode使用方式相比，具有如下特点：
76 |
77 | - 兼容性良好，支持ie8+，及所有现代浏览器。
78 | - 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
79 | - 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
80 | - 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
81 |
82 |
使用步骤如下：
83 |
第一步：引入项目下面生成的fontclass代码：
84 |
85 |
86 |
87 |
第二步：挑选相应图标并获取类名，应用于页面：
88 |
<i class="iconfont icon-xxx"></i>
89 |
90 | "iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。
91 |
92 |
27 |
IconFont 图标
28 |
29 |
30 | -
31 |
34 |
信息
35 | #icon-ibkkj
36 |
37 |
38 | -
39 |
42 |
当前视图
43 | #icon-dangqianshitu
44 |
45 |
46 | -
47 |
50 |
地图
51 | #icon-ditu
52 |
53 |
54 | -
55 |
58 |
查看
59 | #icon-chakan
60 |
61 |
62 | -
63 |
66 |
当前位置
67 | #icon-dangqianweizhi
68 |
69 |
70 | -
71 |
74 |
查看
75 | #icon-chakan-copy
76 |
77 |
78 | -
79 |
82 |
眼睛 (2)
83 | #icon-yanjing
84 |
85 |
86 | -
87 |
90 |
当前应用
91 | #icon-application
92 |
93 |
94 | -
95 |
98 |
当前位置
99 | #icon-dangqianweizhi1
100 |
101 |
102 |
103 |
104 |
105 |
symbol引用
106 |
107 |
108 |
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章
109 | 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：
110 |
111 | - 支持多色图标了，不再受单色限制。
112 | - 通过一些技巧，支持像字体那样，通过
font-size,color来调整样式。
113 | - 兼容性较差，支持 ie9+,及现代浏览器。
114 | - 浏览器渲染svg的性能一般，还不如png。
115 |
116 |
使用步骤如下：
117 |
第一步：引入项目下面生成的symbol代码：
118 |
119 |
第二步：加入通用css代码（引入一次就行）：
120 |
<style type="text/css">
121 | .icon {
122 | width: 1em; height: 1em;
123 | vertical-align: -0.15em;
124 | fill: currentColor;
125 | overflow: hidden;
126 | }
127 | </style>
128 |
第三步：挑选相应图标并获取类名，应用于页面：
129 |
<svg class="icon" aria-hidden="true">
130 | <use xlink:href="#icon-xxx"></use>
131 | </svg>
132 |
133 |
32 |
IconFont 图标
33 |
34 |
35 | -
36 |
37 |
信息
38 | 
39 |
40 |
41 | -
42 |
43 |
当前视图
44 | 
45 |
46 |
47 | -
48 |
49 |
地图
50 | 
51 |
52 |
53 | -
54 |
55 |
查看
56 | 
57 |
58 |
59 | -
60 |
61 |
当前位置
62 | 
63 |
64 |
65 | -
66 |
67 |
查看
68 | 
69 |
70 |
71 | -
72 |
73 |
眼睛 (2)
74 | 
75 |
76 |
77 | -
78 |
79 |
当前应用
80 | 
81 |
82 |
83 | -
84 |
85 |
当前位置
86 | 
87 |
88 |
89 |
90 |
unicode引用
91 |
92 |
93 |
unicode是字体在网页端最原始的应用方式，特点是：
94 |
95 | - 兼容性最好，支持ie6+，及所有现代浏览器。
96 | - 支持按字体的方式去动态调整图标大小，颜色等等。
97 | - 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
98 |
99 |
100 | 注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式
101 |
102 |
unicode使用步骤如下：
103 |
第一步：拷贝项目下面生成的font-face
104 |
@font-face {
105 | font-family: 'iconfont';
106 | src: url('iconfont.eot');
107 | src: url('iconfont.eot?#iefix') format('embedded-opentype'),
108 | url('iconfont.woff') format('woff'),
109 | url('iconfont.ttf') format('truetype'),
110 | url('iconfont.svg#iconfont') format('svg');
111 | }
112 |
113 |
第二步：定义使用iconfont的样式
114 |
.iconfont{
115 | font-family:"iconfont" !important;
116 | font-size:16px;font-style:normal;
117 | -webkit-font-smoothing: antialiased;
118 | -webkit-text-stroke-width: 0.2px;
119 | -moz-osx-font-smoothing: grayscale;
120 | }
121 |
122 |
第三步：挑选相应图标并获取字体编码，应用于页面
123 |
<i class="iconfont">3</i>
124 |
125 |
126 | "iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。
127 |
128 |
3 |
4 |
5 |
6 |
7 |
8 | 人口分布数量/热力图
9 |
10 |
11 |
12 |
13 |
14 | 热力图
15 |
16 | -
17 |
18 | {{item}}
19 |
20 |
21 |
22 |
23 |
24 | 数量图
25 |
26 | -
27 |
28 | {{item}}
29 |
30 |
31 |
32 |
清除图形
33 |
34 |
35 |
36 |
37 |
38 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
3 |
4 |
5 |
6 |
404!
7 |
未找到该页面
8 |
请检查您输入的网址是否正确，请点击以下按钮返回主页
9 |
10 | 返回首页
11 |
12 |
13 |
