【bigo】猫头鹰图表库开发总结 #25

daisy0123 · 2021-03-11T08:35:11Z

猫头鹰图表库开发总结

背景

由于之前使用的开源v-charts (https://v-charts.js.org/#/) 不再有人维护且官网文档展示不了图表，echarts只能使用v4版本以下，故近一月来开发了猫头鹰图表库包（基于echarts）。
技术栈：vue + iview ui库 + echarts 图表库
支持基础图（线图，柱图，柱线图，条形图，堆积图），高级计算图（维度交叉图，差异计算图，多纵向y轴图），支持KMB，percent格式化。支持label展示峰值谷值最新值等。

过程

初始化项目

npm初始化
npm init owl-chart-component

创建.babelrc

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "targets": "ie >= 8"
    }]
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 3
    }],
    ["import", {
      "libraryName": "view-design",
      "libraryDirectory": "src/components"
    }]
  ]
}

创建.eslintrc.js、.gitignore、.eslintignore、LICENCE、editorconfig、.npmignore、.npmrc

创建webpack构建

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

function resolve (dir) {
  return path.join(__dirname, '.', dir);
}

module.exports = {
  entry: './examples/main.js',
  mode: 'development',
  devtool: 'source-map',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index.js'
  },
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      vue$: 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    port: '8099',
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('examples'), resolve('src')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              esModule: false
            }
          },
          'less-loader'
        ]
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: [resolve('node_modules')],
        options: {
          presets: ['@babel/preset-env']
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              esModule: false
            }
          }
        ]
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: resolve('examples/index.html'),
      inject: true
    }),
    new VueLoaderPlugin()
  ]
};

package.json所需依赖

"devDependencies": {
  "@babel/core": "^7.12.10",
  "@babel/eslint-parser": "^7.13.4",
  "@babel/plugin-transform-runtime": "^7.12.10",
  "@babel/preset-env": "^7.12.11",
  "@babel/runtime": "^7.12.5",
  "@babel/runtime-corejs3": "^7.12.5",
  "@rollup/plugin-commonjs": "^17.1.0",
  "@rollup/plugin-node-resolve": "^11.2.0",
  "babel-loader": "^8.2.2",
  "babel-plugin-import": "^1.13.3",
  "css-loader": "^5.0.1",
  "echarts": "^5.0.2",
  "eslint": "^7.17.0",
  "eslint-config-standard": "^16.0.2",
  "eslint-friendly-formatter": "^4.0.1",
  "eslint-loader": "^4.0.2",
  "eslint-plugin-vue": "^7.4.1",
  "file-loader": "^6.2.0",
  "html-webpack-plugin": "^5.0.0-alpha.6",
  "husky": "^4.3.8",
  "less": "^4.0.0",
  "less-loader": "^7.2.1",
  "lint-staged": "^10.5.3",
  "lodash": "^4.17.20",
  "numerify": "^1.2.9",
  "prettier": "^2.2.1",
  "rollup": "^2.39.0",
  "rollup-plugin-babel": "^4.4.0",
  "rollup-plugin-less": "^1.1.3",
  "rollup-plugin-terser": "^7.0.2",
  "rollup-plugin-vue": "^5.1.9",
  "style-loader": "^2.0.0",
  "view-design": "^4.5.0",
  "vue": "^2.6.12",
  "vue-loader": "^15.9.6",
  "vue-style-loader": "^4.1.2",
  "vue-template-compiler": "^2.6.12",
  "webpack": "^5.12.2",
  "webpack-cli": "^4.3.1",
  "webpack-dev-server": "^3.11.1"
},

搭建开发环境和测试文件

package script脚本

"dev": "webpack serve --inline --progress --config ./webpack.config.js",

新建examples目录
包含App.vue,index.html,main.js
新建src目录存放源代码
包含assets（样式文件，静态文件），component（组件文件库）

实现过程

设计图：

打包

创建 build目录，config.js打包文件配置，rollup.config.js打包配置
config.js

module.exports = {
  pkgList: [
    {
      type: 'cjs',
      suffix: '.js',
      src: 'src/index.js',
      dist: 'lib/index'
    },
    {
      type: 'cjs',
      suffix: '.js',
      src: 'src/component/chart/core.js',
      dist: 'lib/chart/core'
    },
    ...
  ]
};

rollup.config.js

const { nodeResolve } = require('@rollup/plugin-node-resolve');
const commonjs = require('@rollup/plugin-commonjs');
const babel = require('rollup-plugin-babel');
const vue = require('rollup-plugin-vue');
const less = require('rollup-plugin-less');
const { terser } = require('rollup-plugin-terser');
const { pkgList } = require('./config');
const packageJson = require('../package.json');

const banner = name => (
  '/*!\n' +
    ` * ${name} v${packageJson.version}\n` +
    ` * (c) 2020-${new Date().getFullYear()} ${packageJson.author}\n` +
    ' * Released under the MIT License.\n' +
    ' */\n'
);


const pkgExports = [];

pkgList.forEach(item => {
  pkgExports.push({
    input: item.src,
    output: {
      exports: 'named',
      format: item.type,
      sourcemap: false,
      file: item.dist+item.suffix,
      globals: {
        lodash: 'lodash',
        echarts: 'echarts',
        numerify: 'numerify'
      },
      banner: banner(item.name+item.suffix)
    },
    plugins: [
      nodeResolve({
        extensions: ['.js', '.vue']
      }),
      less(),
      vue({
        css: true,
        compileTemplate: true
      }),
      commonjs(),
      babel({
        exclude: '**/node_modules/**',
        runtimeHelpers: true
      }),
      terser()
    ],
    external: id => /(^(echarts|numerify|lodash|view-design)$)/.test(id)
  });
});

module.exports = pkgExports;

package.json 添加打包命令

  "build": "rm -f -r lib && rollup -wc build/rollup.config.js"

发布

切换需要发布包的源，若是npm源，则注册账号，后npm login，登录后，则npm publish

部分效果图

组件使用说明

引入依赖包

由于该包依赖lodash，echarts，numerify，view-design，故需提前安装

npm install lodash echarts numerify view-design -s

使用

在main文件中

import OwlChart from '@bigo/owl-chart-component';

Vue.use(OwlChart);

<owl-chart
  :key="renderKey"
  :data="options"
  :width="width"
  :height="height"
  :group="groupId"
/>

参数说明

参数名	说明	类型	是否必要	默认值
data	图表数据，可支持单图表，多图表，格式为type, chartData,dataOptions，具体参数见下文	Array,Object	是	-
chartOptions	图表统一样式，用于自定义图表样式，具体参数见下文	Object	否	-
eOptions	echarts的配置	Object	否	-
width	图表宽度	String,Number	否	-
height	图表高度	String,Number	否	400
computeH	多图的时候是否平分height高度	Boolean	否	false
group	组名，用于多图联动	String	否	-
chartEvent	事件{click: clickFunc}	Object	否	-

data-type说明

可选值	说明
line	线图
bar	柱图
pie	饼图
bar-line	柱线图
infeed-bar	条形图
bar-accumulate	堆积柱图
infeed-bar-accumulate	堆积条形图
line-accumulate-area	堆积面积图
scatter	散点图
tree	树图

data-chartData说明

参数名	说明	类型	是否必要	默认值
columns	列指标	Array	是	-
rows	数据	Array	是	-

data-dataOptions说明

参数名	说明	类型	是否必要	默认值
dimension	维度	Array	否	取chartData.columns的第一个值
metrics	指标	Array	否	取chartData.columns的除第一个值外的其他值
percentOptions	指标百分比选项	Object	否	格式{[指标A]: true}
rightCols	右y轴指标说明	Array	否	-
labelMap	维度指标别名	Object	否	-
dataShowLabel	label展示索引Object	否	{peak（峰值）: [], valley（谷值）:[], new（最新值）: []}
showOriginalValue	展示原值指标集合（存有高级计算）	Array	否	-
showLine	柱线图成为线的指标集合	Array	否	-
scatterConfig	散点图配置	Object	否	-

data-dataOptions-scatterConfig说明

参数名	说明	类型	是否必要	可选值	默认值
xAxisFieldType	x轴数值类型	String	否	int/string	int
sizeMetric	尺寸指标	String	否	-	-
colorMetric	颜色指标	String	否	-	-
sizeMin	尺寸指标最小值	Number	否	-	-
sizeMax	尺寸指标最大值	Number	否	-	-
colorMin	颜色指标最小值	Number	否	-	-
colorMax	颜色指标最大值	Number	否	-	-

chartOptions说明

由于猫头鹰配表支持自定义图表样式，目前只根据猫头鹰的样式配置支持，其他功能可先自行通过配置eOptions改变echarts图样式与配置

参数名	说明	类型	是否必要	例子
label	标签	Object	否	{show: 是否展示（0/1）, format: 展示小数点位（[0-4]）}
yAxis	Y轴	Object	否	{nameShow: 左侧指标是否展示, leftMin: 左y轴最小值, leftMax: 左y轴最大值, rightMin: 右y轴最小值, rightMax: 右y轴最大值}
pie	饼图配置	Object	否	{pieLabel: 标签格式（value/percent）}
dataZoom	区域缩放	Object	否	{show: 是否展示（0/1）}
scatterSetting	散点图配置	Object	否	{color: 颜色（none）, step: 颜色梯度(0[0-10])}

有问题和可优化处欢迎大家多多指导

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

【bigo】猫头鹰图表库开发总结 #25

【bigo】猫头鹰图表库开发总结 #25

daisy0123 commented Mar 11, 2021 •

edited

Loading

【bigo】猫头鹰图表库开发总结 #25

【bigo】猫头鹰图表库开发总结 #25

Comments

daisy0123 commented Mar 11, 2021 • edited Loading

猫头鹰图表库开发总结

背景

过程

初始化项目

搭建开发环境和测试文件

实现过程

打包

发布

部分效果图

组件使用说明

引入依赖包

使用

参数说明

data-type说明

data-chartData说明

data-dataOptions说明

data-dataOptions-scatterConfig说明

chartOptions说明

有问题和可优化处欢迎大家多多指导

daisy0123 commented Mar 11, 2021 •

edited

Loading