• JQuery+webpack+echarts构建可视化开发环境

      数据可视化就越来越受重视，而一般的可视化的需求可能仅仅只是一个大屏展示，这就意味着我们没必要为一个大屏展示的项目引入一整套前端框架，而是使用jq就够了，因为成本最低，开发上手最快，接下来就分享下最近研究的jq+webpack+echarts构建的可视化开发环境
      首先是我的项目结构
    转存失败重新上传取消
      语法使用es6编写，关于es6的配置就不多说了
      可视化用echarts还是比较方便，在这之前也看了一点d3.js，相比较而言，echarts还是简单很多，首先安装echarts

    npm install echarts --save

      这是入口文件app.js（非常简单的入口文件，把可视化展示的逻辑放在echarts.js里去写，这里的app.js只是给webpack提供一个依赖图创建的入口）

    1. import './scripts/echarts.js'
    2. import './style/main.less'

      接下来是webpack的配置文件

    1. const webpack = require('webpack')
    2. const echarts = require('echarts')
    3. const HtmlWebpackPlugin = require('html-webpack-plugin')
    4. const path = require('path')
    5.  
    6. module.exports = {
    7.   context: path.resolve(__dirname, './'),
    8.  
    9.   entry: {
    10.     app: './src/app.js'
    11.   },
    12.  
    13.   output: {
    14.     path: path.resolve(__dirname, 'public'),
    15.     filename: '[name].js'
    16.   },
    17.  
    18.   devServer: {
    19.     contentBase: "./public",
    20.     historyApiFallback: true,
    21.     inline: true,
    22.     hot: true,
    23.   },
    24.  
    25.   module: {
    26.     loaders: [
    27.       {
    28.         test: /\.js$/,
    29.         loader: 'babel-loader',
    30.         exclude: /^node_modules$/,
    31.       },
    32.       {
    33.         test: /\.less$/,
    34.         loader: 'style-loader!css-loader!less-loader',
    35.         exclude: /^node_modules$/,
    36.       },
    37.       {
    38.         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    39.         loader: 'url-loader',
    40.         options: {
    41.           limit: 10000
    42.         }
    43.       }
    44.     ]
    45.   },
    46.  
    47.   plugins: [
    48.     new webpack.ProvidePlugin({
    49.       $: 'jquery',
    50.       _: 'lodash'
    51.     }),
    52.     new webpack.HotModuleReplacementPlugin(),
    53.     new HtmlWebpackPlugin({
    54.       template: "./src/index.html",
    55.       inject: true,
    56.       favicon: path.resolve(__dirname, './favicon.ico')
    57.     })
    58.   ]
    59.  
    60. }

      项目使用的是jq，webpack.ProvidePlugin可直接引入依赖，但是记得一定要先安装jq(lodash也是)

    npm install jquery --save -dev

      模板文件就是index.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.   <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
    8.   <title>Echarts</title>
    9. </head>
    10. <body>
    11.   <div id="echartsDom"></div>
    12. </body>
    13. </html>

      可以看到我们为echarts准备的id为echartsDom的DOM节点，webpack里面HtmlWebpackPlugin也有相应的配置，为了美观，浏览器title的图标也从阿里矢量图标库找了一个图片，等项目跑起来的时候可以看到，这些都是在HtmlWebpackPlugin里面去配置。接下来就是我们的echarts.js了

    1. const echarts = require('echarts')
    2. const echartsDom = $('#echartsDom')[0]
    3.  
    4. const resizeWorldMapContainer = () => {
    5.   echartsDom.style.width = window.innerWidth + 'px';
    6.   echartsDom.style.height = window.innerHeight + 'px';
    7. };
    8.  
    9. resizeWorldMapContainer();
    10.  
    11. const myEcharts = echarts.init(echartsDom)
    12.  
    13. myEcharts.setOption({
    14.   title: {
    15.     text: '监控大屏',
    16.     textStyle: {
    17.       color: 'rgba(255, 255, 255, 0.7)'
    18.     },
    19.     left: 'center',
    20.     top: '10px'
    21.   },
    22.   tooltip: {
    23.  
    24.   },
    25.   legend: {
    26.     x: '25%',
    27.     bottom: '2%',
    28.     textStyle: {
    29.       color: '#ffd285',
    30.     },
    31.     data: [
    32.       {
    33.         name: '合肥',
    34.         textStyle: {
    35.           color: 'red'
    36.         }
    37.       },
    38.       {
    39.         name: '芜湖',
    40.         icon: 'circle',
    41.         textStyle: {
    42.           color: 'red'
    43.         }
    44.       },
    45.       {
    46.         name: '马鞍山',
    47.         icon: 'circle',
    48.         textStyle: {
    49.           color: 'red'
    50.         }
    51.       }
    52.     ]
    53.   },
    54.   grid: {
    55.     left: '10%',
    56.     right: '45%',
    57.     bottom: '15%',
    58.     containLabel: false
    59.   },
    60.   xAxis: {
    61.     type: 'category',
    62.     axisLine: {
    63.       onZero: false,
    64.       lineStyle: {
    65.         color: '#fff'
    66.       }
    67.     },
    68.     axisTick: {
    69.       "show": true,
    70.     },
    71.     axisLabel: {
    72.       textStyle: {
    73.         color: '#ffd285'
    74.       }
    75.     },
    76.     splitArea: {
    77.       show: true
    78.     },
    79.     boundaryGap: true,
    80.     data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    81.   },
    82.   yAxis: {
    83.     "axisLine": {
    84.       lineStyle: {
    85.         color: '#c0576d'
    86.       }
    87.     },
    88.     splitLine: {
    89.       show: true,
    90.       lineStyle: {
    91.         color: '#c0576d'
    92.       }
    93.     },
    94.     "axisTick": {
    95.       show: true
    96.     },
    97.     axisLabel: {
    98.       textStyle: {
    99.         color: '#ffd285'
    100.       }
    101.     },
    102.     type: 'value'
    103.   },
    104.   series: [
    105.     {
    106.       name: '合肥',
    107.       smooth: true,
    108.       type: 'line',
    109.       lineStyle: {
    110.         normal: {
    111.           color: '#ffff00',
    112.           opacity: 10
    113.         }
    114.       },
    115.       itemStyle: {
    116.         normal: {
    117.           color: '#ff6600'
    118.         },
    119.         emphasis: {
    120.           color: '#ff6600'
    121.         }
    122.       },
    123.       areaStyle: {
    124.         normal: {
    125.           color: '#ff6600'
    126.         },
    127.       },
    128.       symbolSize: 8,
    129.       data: [10, 50, 39, 50, 120, 82, 80],
    130.       markPoint: {
    131.         label: {
    132.           normal: {
    133.             show: true,
    134.             color: '#ff0066'
    135.           },
    136.           emphasis: {
    137.             show: true,
    138.             color: '#ff9900'
    139.           }
    140.         },
    141.         data: [{
    142.           name: '最大值',
    143.           type: 'min'
    144.         }]
    145.       }
    146.     },
    147.     {
    148.       name: '芜湖',
    149.       smooth: true,
    150.       type: 'bar',
    151.       symbolSize: 8,
    152.       data: [70, 50, 50, 87, 90, 80, 70]
    153.     }, 
    154.     {
    155.       name: '马鞍山',
    156.       smooth: true,
    157.       type: 'bar',
    158.       symbolSize: 8,
    159.       data: [290, 200, 20, 132, 15, 200, 90]
    160.     },
    161.     {
    162.       type: 'pie',
    163.       name: '饼图',
    164.       center: ['83%', '20%'],
    165.       radius: ['15%', '20%'],
    166.       tooltip: {
    167.         trigger: 'item',
    168.         formatter: "{a} 
      {b} : {c} ({d}%)"
    169.       },
    170.       label: {
    171.         normal: {
    172.           position: 'center'
    173.         },
    174.         emphasis: {
    175.           show: true,
    176.           color: '#ff6600',
    177.         }
    178.       },
    179.       data: [
    180.         {
    181.           value: 335,
    182.           name: '污染来源分析',
    183.           itemStyle: {
    184.             normal: {
    185.                 color: '#ffd285'
    186.             }
    187.           },
    188.           tooltip: {
    189.             trigger: 'item',
    190.             formatter: "{a} 
      {b} : {c} ({d}%)"
    191.           },
    192.           label: {
    193.             normal: {
    194.               formatter: '{d} %',
    195.               textStyle: {
    196.                 color: '#ffd285',
    197.                 fontSize: 20
    198.               }
    199.             }
    200.           }
    201.         }, 
    202.         {
    203.           value: 180,
    204.           name: '占位',
    205.           tooltip: {
    206.             show: false
    207.           },
    208.           itemStyle: {
    209.             normal: {
    210.               color: '#404A59'
    211.             }
    212.           },
    213.           label: {
    214.             normal: {
    215.               textStyle: {
    216.                 color: '#ffd285',
    217.               },
    218.               formatter: '\n汽车尾气'
    219.             }
    220.           }
    221.         }
    222.       ]
    223.     },
    224.     {
    225.       type: 'pie',
    226.       center: ['83%', '50%'],
    227.       radius: ['15%', '20%'],
    228.       name: '饼图',
    229.       tooltip: {
    230.         trigger: 'item',
    231.         formatter: "{a} 
      {b} : {c} ({d}%)"
    232.       },
    233.       data: [
    234.         {
    235.           value: 335,
    236.           name: '直接访问',
    237.           itemStyle: {
    238.             normal: {
    239.               color: '#FF3300'
    240.             }
    241.           }
    242.         }, 
    243.         {
    244.           value: 310,
    245.           name: '邮件营销',
    246.           itemStyle: {
    247.             normal: {
    248.               color: '#FFFF00'
    249.             }
    250.           }
    251.         }, 
    252.         {
    253.           value: 234,
    254.           name: '联盟广告',
    255.           itemStyle: {
    256.             normal: {
    257.               color: '#00FF00'
    258.             }
    259.           }
    260.         }, 
    261.         {
    262.           value: 135,
    263.           name: '视频广告',
    264.           itemStyle: {
    265.             normal: {
    266.               color: '#1E90FF'
    267.             }
    268.           }
    269.         }, 
    270.         {
    271.           value: 1548,
    272.           name: '搜索引擎',
    273.           itemStyle: {
    274.             normal: {
    275.               color: '#ADFF2F'
    276.             }
    277.           }
    278.         }
    279.       ]
    280.     }
    281.   ]
    282. })
    283.  
    284. window.onresize = () => {
    285.   resizeWorldMapContainer();
    286.   myEcharts.resize();
    287. };

      可以看到这个文件是非常长的，因为我把一个大屏里面所有图形的option都放在这里面去设置，这样其实是不便于调试的，比较好的方案还是在布局的时候根据可视化的设计图，将不同的图，比如折线图，饼图甚至是地图的分别分成不同的模块，不同的模块对应不同的dom节点，然后在index.html的文件里去排版好这些dom节点的布局，使得每一个图形都只有一个单独的js文件，方便调试，看起来也十分清爽，因为时间有限，我就只放在了这一个文件里，dom节点也只创建了一个，有兴趣的同学可以自行尝试做一下
      这是package.json

    1. {
    2.   "name": "my_echarts",
    3.   "version": "1.0.0",
    4.   "description": "",
    5.   "main": "app.js",
    6.   "scripts": { "dev": "rm -rf ./public && webpack-dev-server --inline --progress --config webpack.config.js", "build": "webpack" },
    7.   "author": "",
    8.   "license": "ISC",
    9.   "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.1", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "css-loader": "^0.28.7", "html-webpack-plugin": "^2.30.1", "jquery": "^3.2.1", "less": "^2.7.3", "less-loader": "^4.0.5", "raw-loader": "^0.5.1", "style-loader": "^0.19.1", "webpack": "^3.10.0", "webpack-dev-server": "^2.9.7" },
    10.   "dependencies": { "echarts": "^3.8.5" } }

      启动项目npm run dev

  • 相关阅读:
    『力扣刷题本』:移除链表元素
    成电860考研专业课考前划重点-学长课程音频转文字-用科大讯飞花钱买的-三万五千字
    pat 1145
    【选型】JAVA生成PPT及选型
    【浅学Java】排序大全
    CTF简介
    MFC中字符串string类型和CString类型互转方法
    智谱API调用
    入职字节外包一个月，我离职了
    UVA-548 树 题解答案代码 算法竞赛入门经典第二版
  • 原文地址：https://blog.csdn.net/m0_72431373/article/details/127772140