From f8f10c4af904849d562b3a4b68a6ee1da9c82d3b Mon Sep 17 00:00:00 2001 From: quietcoder <1642965215@qq.com> Date: Mon, 25 Dec 2017 20:43:34 +0800 Subject: [PATCH] =?UTF-8?q?feat(chart):=20=E6=96=B0=E5=A2=9E=E4=BB=AA?= =?UTF-8?q?=E8=A1=A8=E7=9B=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/candle.md | 11 +- docs/gauge.md | 341 ++++++++++++++++++++++ docs/sidebar.md | 1 + examples/data/gauge.js | 90 ++++++ examples/data/index.js | 4 +- examples/pages/chart.vue | 4 +- src/component-list.js | 3 +- src/index.es.js | 5 +- src/packages/gauge/index.js | 13 + src/packages/gauge/main.js | 106 +++++++ src/packages/index/index.js | 5 +- test/index.js | 6 +- test/load/cdn/gauge/index.html | 48 +++ test/load/webpack/guage/App.vue | 36 +++ test/load/webpack/guage/index.js | 8 + test/load/webpack/guage/webpack.config.js | 51 ++++ 16 files changed, 721 insertions(+), 11 deletions(-) create mode 100644 docs/gauge.md create mode 100644 examples/data/gauge.js create mode 100644 src/packages/gauge/index.js create mode 100644 src/packages/gauge/main.js create mode 100644 test/load/cdn/gauge/index.html create mode 100644 test/load/webpack/guage/App.vue create mode 100644 test/load/webpack/guage/index.js create mode 100644 test/load/webpack/guage/webpack.config.js diff --git a/docs/candle.md b/docs/candle.md index d4504a6..92b3b56 100644 --- a/docs/candle.md +++ b/docs/candle.md @@ -1,6 +1,6 @@ ### K线图 - + #### 简单K线图 @@ -244,7 +244,7 @@ } this.chartSettings = { showMA: true, - showVOL: true + showVol: true } } } @@ -308,13 +308,14 @@ } this.chartSettings = { showMA: true, - showVOL: true, + showVol: true, labelMap: { MA5: 'ma5' }, legendName: { '日K': 'day k' - } + }, + showDataZoom: true } } } @@ -452,6 +453,8 @@ #### settings 配置项 +| 配置项 | 简介 | 类型 | 备注 | +| --- | --- | --- | --- | | dimension | 维度 | String | 默认为 columns[0] | | metrics | 指标 | Array | 默认为 [columns[1] ~ columns[5]] | | digit | 设置数据类型为percent时保留的位数 | Number | 默认为2 | diff --git a/docs/gauge.md b/docs/gauge.md new file mode 100644 index 0000000..ea47b53 --- /dev/null +++ b/docs/gauge.md @@ -0,0 +1,341 @@ +### 仪表盘 + + + +#### 指标维度配置 + + + + + + +#### 设置数据类型 + + + + + + +#### 设置指标别名与单位 + + + + + + +#### 设置多表盘及修改样式 + + + + + + + +#### settings 配置项 + +| 配置项 | 简介 | 类型 | 备注 | +| --- | --- | --- | --- | +| dimension | 维度 | String | 默认 columns[0] | +| metrics | 指标 | String | 默认 columns[1] | +| dataType | 数据类型 | Object | - | +| digit | 设置数据类型为percent时保留的位数 | Number | 默认为2 | +| labelMap | 设置指标的别名 | Object | - | +| seriesMap | 附加到 series 中的设置 | Object | - | +| dataName | 表盘上显示的单位 | Object | - | + +> 备注1： 通过 seriesMap，可以为每一个仪表设置样式，具体样式的配置可以参考[文档](http://echarts.baidu.com/option.html#series-gauge) diff --git a/docs/sidebar.md b/docs/sidebar.md index 208ac8e..7b934bb 100644 --- a/docs/sidebar.md +++ b/docs/sidebar.md @@ -16,6 +16,7 @@ - [热力图](/heatmap) - [散点图](/scatter) - [K线图](/candle) + - [仪表盘](/gauge) - 其他 - [事件监听](/event) - [图表切换](/toggle) diff --git a/examples/data/gauge.js b/examples/data/gauge.js new file mode 100644 index 0000000..fe7ab25 --- /dev/null +++ b/examples/data/gauge.js @@ -0,0 +1,90 @@ +export default { + name: '仪表盘', + type: 'gauge', + data: [ + { + name: '简单仪表盘', + data: { + columns: ['type', 'value'], + rows: [ + { type: '油量', value: 123 } + ] + }, + settings: {} + }, + { + name: '设置指标维度', + data: { + columns: ['a', 'b', 'type', 'value'], + rows: [ + { type: '油量', value: 123, a: 1, b: 2 } + ] + }, + settings: { + dimension: 'type', + metrics: 'value' + } + }, + { + name: '设置数据类型', + data: { + columns: ['type', 'value'], + rows: [ + { type: '油量', value: 0.12 } + ] + }, + settings: { + dataType: { + '油量': 'percent' + }, + seriesMap: { + '油量': { + min: 0, + max: 1 + } + } + } + }, + { + name: '设置别名', + data: { + columns: ['type', 'value'], + rows: [ + { type: 'speed', value: 123 } + ] + }, + settings: { + labelMap: { + speed: '速度' + }, + dataName: { + speed: 'km/h' + } + } + }, + { + name: '多个仪表盘', + data: { + columns: ['type', 'value'], + rows: [ + { type: '油量', value: 2343 }, + { type: '速度', value: 123 } + ] + }, + settings: { + seriesMap: { + '油量': { + radius: 90, + center: ['25%', '55%'], + min: 0, + max: 10000 + }, + '速度': { + radius: 90, + center: ['75%', '55%'] + } + } + } + } + ] +} diff --git a/examples/data/index.js b/examples/data/index.js index c8662fb..d1e2e19 100644 --- a/examples/data/index.js +++ b/examples/data/index.js @@ -12,6 +12,7 @@ import sankey from './sankey' import heatmap from './heatmap' import scatter from './scatter' import candle from './candle' +import gauge from './gauge' export default { bar, @@ -27,5 +28,6 @@ export default { sankey, heatmap, scatter, - candle + candle, + gauge } diff --git a/examples/pages/chart.vue b/examples/pages/chart.vue index 5fbd8c9..2a803b5 100644 --- a/examples/pages/chart.vue +++ b/examples/pages/chart.vue @@ -38,6 +38,7 @@ import VeSankey from '../../src/packages/sankey' import VeHeatmap from '../../src/packages/heatmap' import VeScatter from '../../src/packages/scatter' import VeCandle from '../../src/packages/candle' +import VeGauge from '../../src/packages/gauge' import CHART_DATA from '../data' export default { @@ -81,7 +82,8 @@ export default { VeSankey, VeHeatmap, VeScatter, - VeCandle + VeCandle, + VeGauge } } diff --git a/src/component-list.js b/src/component-list.js index 07fd54b..976e5d4 100644 --- a/src/component-list.js +++ b/src/component-list.js @@ -14,5 +14,6 @@ module.exports = { VeSankey: { src: 'src/packages/sankey/index.js', dist: 'lib/sankey' }, Veheatmap: { src: 'src/packages/heatmap/index.js', dist: 'lib/heatmap' }, VeScatter: { src: 'src/packages/scatter/index.js', dist: 'lib/scatter' }, - VeCandle: { src: 'src/packages/candle/index.js', dist: 'lib/candle' } + VeCandle: { src: 'src/packages/candle/index.js', dist: 'lib/candle' }, + VeGauge: { src: 'src/packages/gauge/index.js', dist: 'lib/gauge' } } diff --git a/src/index.es.js b/src/index.es.js index 8086b62..c57fa26 100644 --- a/src/index.es.js +++ b/src/index.es.js @@ -13,6 +13,7 @@ import VeSankey from './packages/sankey' import VeHeatmap from './packages/heatmap' import VeScatter from './packages/scatter' import VeCandle from './packages/candle' +import VeGauge from './packages/gauge' const components = [ VeBar, @@ -29,7 +30,8 @@ const components = [ VeSankey, VeHeatmap, VeScatter, - VeCandle + VeCandle, + VeGauge ] function install (Vue, _) { @@ -54,5 +56,6 @@ export { VeHeatmap, VeScatter, VeCandle, + VeGauge, install } diff --git a/src/packages/gauge/index.js b/src/packages/gauge/index.js new file mode 100644 index 0000000..7a36a07 --- /dev/null +++ b/src/packages/gauge/index.js @@ -0,0 +1,13 @@ +import echarts from '../../echarts-base' +import 'echarts/lib/chart/gauge' +import { gauge } from './main' +import Core from '../../core' + +export default { + name: 'VeGauge', + mixins: [Core], + created () { + this.chartHandler = gauge + this.echartsLib = echarts + } +} diff --git a/src/packages/gauge/main.js b/src/packages/gauge/main.js new file mode 100644 index 0000000..200892a --- /dev/null +++ b/src/packages/gauge/main.js @@ -0,0 +1,106 @@ +import { isObject, getFormated } from '../../utils' + +function getTooltip (args) { + const { tooltipFormatter, dataType, digit } = args + return { + formatter (options) { + const { + seriesName, + data: { + value, + name + } + } = options + if (tooltipFormatter) { + return tooltipFormatter.apply(null, arguments) + } + const tpl = [] + tpl.push(`${seriesName}: `) + tpl.push(`${getFormated(value, dataType[seriesName], digit)} ${name}`) + return tpl.join('') + } + } +} + +function getSeries (args) { + const { + rows, + dimension, + metrics, + digit, + dataType, + labelMap, + seriesMap, + dataName + } = args + + const series = rows.map(row => { + const label = row[dimension] + const seriesItem = seriesMap[label] + const result = { + type: 'gauge', + name: labelMap[label] != null ? labelMap[label] : label, + data: [ + { + name: dataName[label] || '', + value: row[metrics] + } + ], + detail: { + formatter (v) { + return getFormated(v, dataType[label], digit) + } + }, + axisLabel: { + formatter (v) { + return getFormated(v, dataType[label], digit) + } + } + } + + if (seriesItem) { + Object.keys(seriesItem).forEach(key => { + if (isObject(result[key])) { + Object.assign(result[key], seriesItem[key]) + } else { + result[key] = seriesItem[key] + } + }) + } + + return result + }) + + return series +} + +export const gauge = (columns, rows, settings, extra) => { + const { + dimension = columns[0], + metrics = columns[1], + digit = 2, + dataType = {}, + labelMap = {}, + seriesMap = {}, + dataName = {} + } = settings + + const { tooltipFormatter, tooltipVisible } = extra + + const tooltip = tooltipVisible && getTooltip({ + tooltipFormatter, + dataType + }) + + const series = getSeries({ + rows, + dimension, + metrics, + digit, + dataType, + labelMap, + seriesMap, + dataName + }) + return { tooltip, series } +} diff --git a/src/packages/index/index.js b/src/packages/index/index.js index 4fb37f8..cd4ce68 100755 --- a/src/packages/index/index.js +++ b/src/packages/index/index.js @@ -13,6 +13,7 @@ import VeSankey from '../sankey' import VeHeatmap from '../heatmap' import VeScatter from '../scatter' import VeCandle from '../candle' +import VeGauge from '../gauge' const components = [ VeBar, @@ -29,7 +30,8 @@ const components = [ VeSankey, VeHeatmap, VeScatter, - VeCandle + VeCandle, + VeGauge ] function install (Vue, _) { @@ -57,5 +59,6 @@ export default { VeSankey, VeScatter, VeCandle, + VeGauge, install } diff --git a/test/index.js b/test/index.js index 19b09c6..63005bb 100644 --- a/test/index.js +++ b/test/index.js @@ -19,7 +19,8 @@ import { VeSankey, VeHeatmap, VeScatter, - VeCandle + VeCandle, + VeGauge } from '../lib/index.esm' const comps = { @@ -36,7 +37,8 @@ const comps = { sankey: VeSankey, heatmap: VeHeatmap, scatter: VeScatter, - candle: VeCandle + candle: VeCandle, + gauge: VeGauge } let box let vm = {} diff --git a/test/load/cdn/gauge/index.html b/test/load/cdn/gauge/index.html new file mode 100644 index 0000000..5b93dd5 --- /dev/null +++ b/test/load/cdn/gauge/index.html @@ -0,0 +1,48 @@ + + + + + + + Document + + +
+ + +
+ + + + + + diff --git a/test/load/webpack/guage/App.vue b/test/load/webpack/guage/App.vue new file mode 100644 index 0000000..cbb6a89 --- /dev/null +++ b/test/load/webpack/guage/App.vue @@ -0,0 +1,36 @@ + + + diff --git a/test/load/webpack/guage/index.js b/test/load/webpack/guage/index.js new file mode 100644 index 0000000..e1d5dcd --- /dev/null +++ b/test/load/webpack/guage/index.js @@ -0,0 +1,8 @@ +import Vue from 'vue' +import App from './App' + +/* eslint-disable no-new */ +new Vue({ + el: '#app', + render: h => h(App) +}) diff --git a/test/load/webpack/guage/webpack.config.js b/test/load/webpack/guage/webpack.config.js new file mode 100644 index 0000000..424b363 --- /dev/null +++ b/test/load/webpack/guage/webpack.config.js @@ -0,0 +1,51 @@ +const webpack = require('webpack') +const path = require('path') +const HtmlWebpackPlugin = require('html-webpack-plugin') + +module.exports = { + entry: { + app: './index.js' + }, + output: { + path: path.resolve(__dirname, '../dist'), + filename: 'index.js', + publicPath: '/' + }, + resolve: { + extensions: ['.js', '.vue'] + }, + devServer: { + port: '8180', + hot: true, + stats: 'errors-only' + }, + module: { + rules: [ + { + test: /\.vue$/, + loader: 'vue-loader' + }, + { + test: /\.js$/, + loader: 'babel-loader' + }, + { + test: /\.css$/, + use: ['style-loader', 'css-loader'] + } + ] + }, + plugins: [ + new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: '"development"' + } + }), + new webpack.HotModuleReplacementPlugin(), + new HtmlWebpackPlugin({ + filename: 'index.html', + template: '../index.html', + inject: true + }) + ] +}