Browse Source
* Dependency workflow add dependency correction value * Download workflow instance map width adjustment and change "desc" field to "description" * The third-party library that builds the dependency is recommended to be placed in 'devDependencies' * Tree chart and Gantt chart style modification * The workflow instance can be deleted only when its status is success, failure, stop and pause. * change desc to description * Maximum width of tooltip is set to 500px, note the copyright number of login page * Delete copyright number * No tenant in the list of selected tenants the default is default, and the status not shown in the repair page * repair * Repair security center module prompt * Remove blank character during verification * Remove blank character during verification * Non admin users cannot create users, tenants, alarm groups, queues and worker groups * Remove CI windows detection * The value of loadaverage should be two decimal places * Add license * delete docs * update package.json * delete LICENSE * Display icon when there is no data in process definition * Worker group add IP format verification * Modify MySQL page of monitoring center * DB page rename and background color modification * IO build replace with source code * Replace ans charts with source codepull/2/head
break60
5 years ago
committed by
qiaozhanwei
35 changed files with 1294 additions and 1647 deletions
@ -0,0 +1,61 @@ |
|||||||
|
/** |
||||||
|
* 根据参数找到容器并初始化图表，然后返回一个或者一组图表实例 |
||||||
|
* @param {*} Target 图表组件类 |
||||||
|
* @param {*} el 选择器或者 DOM 对象 |
||||||
|
* @param {*} data 数据源 |
||||||
|
* @param {*} options 可选项 |
||||||
|
*/ |
||||||
|
export const init = (Target, el, data, options) => { |
||||||
|
const list = getChartContainers(el) |
||||||
|
const settings = Object.assign({}, { data }, options) |
||||||
|
const charts = list.map(element => { |
||||||
|
return new Target(element, settings) |
||||||
|
}) |
||||||
|
return charts.length === 1 ? charts[0] : charts |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 统一图表容器为 DOM 元素数组 |
||||||
|
* @param {*} el 选择器或者 DOM 对象 |
||||||
|
*/ |
||||||
|
function getChartContainers (el) { |
||||||
|
// 未传参数，直接返回
|
||||||
|
if (!el) { |
||||||
|
return |
||||||
|
} |
||||||
|
if (typeof el === 'string') { |
||||||
|
if (el.startsWith('#')) { |
||||||
|
el = document.getElementById(el.slice(1)) |
||||||
|
} else if (el.startsWith('.')) { |
||||||
|
el = document.getElementsByClassName(el.slice(1)) |
||||||
|
} else { |
||||||
|
return |
||||||
|
} |
||||||
|
} |
||||||
|
if (!el) { |
||||||
|
throw new Error('找不到对应的dom对象！') |
||||||
|
} |
||||||
|
let list |
||||||
|
if (HTMLElement.prototype.isPrototypeOf(el)) { |
||||||
|
list = new Array(el) |
||||||
|
} else { |
||||||
|
list = Array.from(el) |
||||||
|
} |
||||||
|
if (!list) { |
||||||
|
throw new Error('未找到对应的dom对象！') |
||||||
|
} |
||||||
|
return list |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 检测在指定对象中是否存在指定的属性名 |
||||||
|
* @param {Object} model 待检测模型 |
||||||
|
* @param {...any} params 待检测属性名 |
||||||
|
*/ |
||||||
|
export const checkKeyInModel = (model, ...params) => { |
||||||
|
for (const key of params) { |
||||||
|
if (!model.hasOwnProperty(key)) { |
||||||
|
throw new Error('数据格式错误！未找到指定属性：' + key) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,78 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
import echarts from 'echarts' |
||||||
|
|
||||||
|
import Line from './packages/line' |
||||||
|
import Bar from './packages/bar' |
||||||
|
import Pie from './packages/pie' |
||||||
|
import Radar from './packages/radar' |
||||||
|
import Funnel from './packages/funnel' |
||||||
|
import Scatter from './packages/scatter' |
||||||
|
import { checkKeyInModel, init } from './common' |
||||||
|
|
||||||
|
const components = { |
||||||
|
Line, |
||||||
|
Bar, |
||||||
|
Pie, |
||||||
|
Radar, |
||||||
|
Funnel, |
||||||
|
Scatter |
||||||
|
} |
||||||
|
|
||||||
|
const Chart = { |
||||||
|
// 默认配置
|
||||||
|
settings: {}, |
||||||
|
/** |
||||||
|
* 配置全局属性 |
||||||
|
* @param {Object} options 全局配置项 |
||||||
|
*/ |
||||||
|
config (options) { |
||||||
|
const { theme } = options |
||||||
|
// 注册主题
|
||||||
|
if (theme) { |
||||||
|
checkKeyInModel(theme, 'name', 'data') |
||||||
|
echarts.registerTheme(theme.name, theme.data) |
||||||
|
if (theme.default) { |
||||||
|
Chart.settings.defaultTheme = theme.name |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 注入不同组件对应方法
|
||||||
|
for (const key in components) { |
||||||
|
if (components.hasOwnProperty(key)) { |
||||||
|
Chart[key.toLowerCase()] = (el, data, options) => { |
||||||
|
return init(components[key], el, data, options) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export { |
||||||
|
Line, |
||||||
|
Bar, |
||||||
|
Pie, |
||||||
|
Radar, |
||||||
|
Funnel, |
||||||
|
Scatter |
||||||
|
} |
||||||
|
|
||||||
|
export default Chart |
||||||
|
|
||||||
|
if (typeof window !== 'undefined') { |
||||||
|
window.Chart = Chart |
||||||
|
} |
||||||
@ -0,0 +1,326 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
import Base from '../base' |
||||||
|
import { checkKeyInModel, init } from '../../common' |
||||||
|
|
||||||
|
const TYPE = 'bar' |
||||||
|
|
||||||
|
/** |
||||||
|
* 柱状图 |
||||||
|
*/ |
||||||
|
export default class Bar extends Base { |
||||||
|
/** |
||||||
|
* 单独导出时调用的初始化方法 |
||||||
|
* @param {*} el 选择器或者 DOM 对象 |
||||||
|
* @param {*} data 数据源 |
||||||
|
* @param {*} options 可选项 |
||||||
|
*/ |
||||||
|
static init (el, data, options) { |
||||||
|
return init(Bar, el, data, options) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 将用户配置转换为符合 ECharts API 格式的配置格式 |
||||||
|
*/ |
||||||
|
transform () { |
||||||
|
const { data = [] } = this.settings |
||||||
|
|
||||||
|
if (data.length === 0) { |
||||||
|
throw new Error('数据源为空！') |
||||||
|
} |
||||||
|
|
||||||
|
if (Object.keys(data[0]).length > 2) { |
||||||
|
return this.setMultipleBars() |
||||||
|
} else { |
||||||
|
this.simple = true |
||||||
|
return this.setSingleBar() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 单条柱 |
||||||
|
*/ |
||||||
|
setSingleBar () { |
||||||
|
const { |
||||||
|
// 数据
|
||||||
|
data = [], |
||||||
|
// 属性字典
|
||||||
|
keyMap = { |
||||||
|
xAxisKey: 'key', |
||||||
|
dataKey: 'value' |
||||||
|
}, |
||||||
|
// 图表标题
|
||||||
|
title = '单条柱状图' |
||||||
|
} = this.settings |
||||||
|
|
||||||
|
// x 轴对应属性名，数据值对应的属性名
|
||||||
|
const { xAxisKey, dataKey } = keyMap |
||||||
|
checkKeyInModel(data[0], xAxisKey, dataKey) |
||||||
|
|
||||||
|
const series = [{ |
||||||
|
type: TYPE, |
||||||
|
data: [] |
||||||
|
}] |
||||||
|
const xAxis = { |
||||||
|
type: 'category', |
||||||
|
data: [] |
||||||
|
} |
||||||
|
|
||||||
|
for (let i = 0; i < data.length; i++) { |
||||||
|
xAxis.data.push(data[i][xAxisKey]) |
||||||
|
series[0].data.push(data[i][dataKey]) |
||||||
|
} |
||||||
|
|
||||||
|
return { title, xAxis, series } |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 多条柱 |
||||||
|
*/ |
||||||
|
setMultipleBars () { |
||||||
|
const { |
||||||
|
// 数据
|
||||||
|
data = [], |
||||||
|
// 属性字典
|
||||||
|
keyMap = { |
||||||
|
xAxisKey: 'key', |
||||||
|
legendKey: 'typeName', |
||||||
|
dataKey: 'value' |
||||||
|
}, |
||||||
|
// 图表标题
|
||||||
|
title = '多条柱状图', |
||||||
|
// 折柱混合时，指定的折线数据索引
|
||||||
|
lineTypes |
||||||
|
} = this.settings |
||||||
|
|
||||||
|
// x 轴对应属性名，图例对应的属性名，数据值对应的属性名
|
||||||
|
const { xAxisKey, legendKey, dataKey } = keyMap |
||||||
|
// 是否使用时间轴数据
|
||||||
|
const timeline = Object.keys(data[0]).length === 4 |
||||||
|
const timelineKey = keyMap.timelineKey || 'timeline' |
||||||
|
if (timeline) { |
||||||
|
checkKeyInModel(data[0], xAxisKey, legendKey, dataKey, timelineKey) |
||||||
|
} else { |
||||||
|
checkKeyInModel(data[0], xAxisKey, legendKey, dataKey) |
||||||
|
} |
||||||
|
|
||||||
|
// 规范折柱混合索引
|
||||||
|
let lineTypeList = [] |
||||||
|
if (lineTypes) { |
||||||
|
if (!Array.isArray(lineTypes)) { |
||||||
|
lineTypeList = [lineTypes] |
||||||
|
} else { |
||||||
|
lineTypeList = lineTypes |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 时间轴默认配置
|
||||||
|
const timelineOptions = { |
||||||
|
timeline: { |
||||||
|
axisType: 'category', |
||||||
|
autoPlay: true, |
||||||
|
playInterval: 1000, |
||||||
|
data: [] |
||||||
|
}, |
||||||
|
options: [] |
||||||
|
} |
||||||
|
|
||||||
|
// 初始值
|
||||||
|
const legendData = [] |
||||||
|
const series = [] |
||||||
|
const xAxis = { |
||||||
|
type: 'category', |
||||||
|
data: [] |
||||||
|
} |
||||||
|
for (let i = 0; i < data.length; i++) { |
||||||
|
const legendItem = data[i][legendKey] |
||||||
|
const xAxisItem = data[i][xAxisKey] |
||||||
|
const dataItem = data[i][dataKey] |
||||||
|
|
||||||
|
// 图例
|
||||||
|
if (!legendData.includes(legendItem)) { |
||||||
|
legendData.push(legendItem) |
||||||
|
} |
||||||
|
|
||||||
|
// x 轴
|
||||||
|
if (!xAxis.data.includes(xAxisItem)) { |
||||||
|
xAxis.data.push(xAxisItem) |
||||||
|
} |
||||||
|
|
||||||
|
// 时间轴
|
||||||
|
if (timeline) { |
||||||
|
const timelineItem = data[i][timelineKey] |
||||||
|
// 设置时间轴 label
|
||||||
|
if (!timelineOptions.timeline.data.includes(timelineItem)) { |
||||||
|
timelineOptions.timeline.data.push(timelineItem) |
||||||
|
} |
||||||
|
// 通用的系列配置
|
||||||
|
if (!series.some(s => s.name === legendItem)) { |
||||||
|
let seriesType = TYPE |
||||||
|
if (lineTypeList.length !== 0 && lineTypeList.includes(legendItem)) { |
||||||
|
seriesType = 'line' |
||||||
|
} |
||||||
|
series.push({ |
||||||
|
name: legendItem, |
||||||
|
type: seriesType |
||||||
|
}) |
||||||
|
} |
||||||
|
// 系列数据
|
||||||
|
let targetOptions = timelineOptions.options.find(o => o._helpName === timelineItem) |
||||||
|
if (!targetOptions) { |
||||||
|
// 初始化 option
|
||||||
|
targetOptions = { |
||||||
|
_helpName: timelineItem, |
||||||
|
title: { text: title.replace('$timeline', timelineItem) }, |
||||||
|
series: [] |
||||||
|
} |
||||||
|
timelineOptions.options.push(targetOptions) |
||||||
|
} |
||||||
|
let targetSeries = targetOptions.series.find(d => d._helpName === legendItem) |
||||||
|
if (!targetSeries) { |
||||||
|
// 初始化系列数据
|
||||||
|
targetSeries = { |
||||||
|
_helpName: legendItem, |
||||||
|
data: [] |
||||||
|
} |
||||||
|
targetOptions.series.push(targetSeries) |
||||||
|
} |
||||||
|
targetSeries.data.push(dataItem) |
||||||
|
} else { |
||||||
|
// 非时间轴数据处理
|
||||||
|
let targetSeries = series.find(s => s.name === legendItem) |
||||||
|
if (!targetSeries) { |
||||||
|
let seriesType = TYPE |
||||||
|
if (lineTypeList.length !== 0 && lineTypeList.includes(legendItem)) { |
||||||
|
seriesType = 'line' |
||||||
|
} |
||||||
|
targetSeries = { |
||||||
|
name: legendItem, |
||||||
|
type: seriesType, |
||||||
|
data: [] |
||||||
|
} |
||||||
|
series.push(targetSeries) |
||||||
|
} |
||||||
|
targetSeries.data.push(dataItem) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (timeline) { |
||||||
|
return { title, xAxis, series, legendData, timelineOptions } |
||||||
|
} |
||||||
|
return { title, xAxis, series, legendData } |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 绘制图表 |
||||||
|
*/ |
||||||
|
apply () { |
||||||
|
const { title, xAxis, series, legendData, timelineOptions } = this.options |
||||||
|
const { |
||||||
|
// 是否为横向图
|
||||||
|
reverseAxis = false, |
||||||
|
// 自定义 y 轴
|
||||||
|
yAxis, |
||||||
|
// 是否为堆叠图
|
||||||
|
stack = false, |
||||||
|
// 注入配置到 series
|
||||||
|
insertSeries |
||||||
|
} = this.settings |
||||||
|
const valueAxis = { type: 'value' } |
||||||
|
let yAxisModel = reverseAxis ? xAxis : valueAxis |
||||||
|
let xAxisModel = reverseAxis ? valueAxis : xAxis |
||||||
|
// 使用自定义 y 轴覆盖
|
||||||
|
if (yAxis) { |
||||||
|
yAxisModel = yAxis |
||||||
|
} |
||||||
|
// 设置堆叠图
|
||||||
|
if (stack) { |
||||||
|
series.forEach(set => { |
||||||
|
set.stack = '总量' |
||||||
|
set.label = { |
||||||
|
normal: { |
||||||
|
show: true, |
||||||
|
position: reverseAxis ? 'insideRight' : 'insideTop' |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
let _series = series |
||||||
|
if (insertSeries && insertSeries.length && series.length) { |
||||||
|
_series = this.injectDataIntoSeries(insertSeries, _series) |
||||||
|
} |
||||||
|
|
||||||
|
// 时间轴
|
||||||
|
if (timelineOptions) { |
||||||
|
let opts = { |
||||||
|
baseOption: { |
||||||
|
timeline: timelineOptions.timeline, |
||||||
|
tooltip: { |
||||||
|
trigger: 'axis' |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
top: 80, |
||||||
|
bottom: 100, |
||||||
|
containLabel: true |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
x: 'right', |
||||||
|
data: legendData |
||||||
|
}, |
||||||
|
xAxis: xAxisModel, |
||||||
|
yAxis: yAxisModel, |
||||||
|
series: _series |
||||||
|
}, |
||||||
|
options: timelineOptions.options |
||||||
|
} |
||||||
|
|
||||||
|
this.echart.setOption(opts, true) |
||||||
|
this.echart.clear() |
||||||
|
this.echart.setOption(opts, true) |
||||||
|
} else { |
||||||
|
// 简单图表标题为空时，图表垂直居中
|
||||||
|
const top = !title && this.simple ? '3%' : 60 |
||||||
|
|
||||||
|
let opts = { |
||||||
|
title: { |
||||||
|
text: title |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'axis' |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
left: '3%', |
||||||
|
right: '4%', |
||||||
|
bottom: '3%', |
||||||
|
top, |
||||||
|
containLabel: true |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
data: legendData |
||||||
|
}, |
||||||
|
xAxis: xAxisModel, |
||||||
|
yAxis: yAxisModel, |
||||||
|
series: _series |
||||||
|
} |
||||||
|
|
||||||
|
this.echart.setOption(opts, true) |
||||||
|
this.echart.clear() |
||||||
|
this.echart.setOption(opts, true) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,76 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
import echarts from 'echarts' |
||||||
|
import Chart from '../index' |
||||||
|
|
||||||
|
export default class Base { |
||||||
|
constructor (element, settings) { |
||||||
|
this.settings = settings |
||||||
|
const options = this.transform() |
||||||
|
if (options) { |
||||||
|
this.options = options |
||||||
|
if (settings.theme) { |
||||||
|
// 使用已经注册的自定义主题
|
||||||
|
this.echart = echarts.init(element, settings.theme) |
||||||
|
} else if (Chart.settings.defaultTheme) { |
||||||
|
// 使用全局配置的主题
|
||||||
|
this.echart = echarts.init(element, Chart.settings.defaultTheme) |
||||||
|
} else { |
||||||
|
this.echart = echarts.init(element) |
||||||
|
} |
||||||
|
// 响应窗口 resize 事件
|
||||||
|
window.addEventListener('resize', () => this.echart.resize()) |
||||||
|
this.apply() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 刷新数据 |
||||||
|
* @param {*} data 图表数据 |
||||||
|
*/ |
||||||
|
setData (data) { |
||||||
|
if (data && data.length !== 0) { |
||||||
|
this.settings.data = data |
||||||
|
this.options = this.transform() |
||||||
|
this.apply() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
injectDataIntoSeries (data, series) { |
||||||
|
data.forEach(o => { |
||||||
|
if (o.index === 'all') { |
||||||
|
delete o.index |
||||||
|
series = series.map(item => { |
||||||
|
return Object.assign({}, item, o) |
||||||
|
}) |
||||||
|
} else if (o.index === 'start') { |
||||||
|
delete o.index |
||||||
|
series[0] = Object.assign({}, series[0], o) |
||||||
|
} else if (o.index === 'end') { |
||||||
|
delete o.index |
||||||
|
series[series.length - 1] = Object.assign({}, series[series.length - 1], o) |
||||||
|
} else if (Array.isArray(o.index)) { |
||||||
|
for (const i of o.index) { |
||||||
|
if (series[i]) { |
||||||
|
series[i] = Object.assign({}, series[i], o) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
return series |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,144 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
import Base from '../base' |
||||||
|
import { checkKeyInModel, init } from '../../common' |
||||||
|
|
||||||
|
const TYPE = 'funnel' |
||||||
|
|
||||||
|
/** |
||||||
|
* 漏斗图 |
||||||
|
*/ |
||||||
|
export default class Funnel extends Base { |
||||||
|
/** |
||||||
|
* 单独导出时调用的初始化方法 |
||||||
|
* @param {*} el 选择器或者 DOM 对象 |
||||||
|
* @param {*} data 数据源 |
||||||
|
* @param {*} options 可选项 |
||||||
|
*/ |
||||||
|
static init (el, data, options) { |
||||||
|
return init(Funnel, el, data, options) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 将用户配置转换为符合 ECharts API 格式的配置格式 |
||||||
|
*/ |
||||||
|
transform () { |
||||||
|
const { |
||||||
|
// 数据
|
||||||
|
data = [], |
||||||
|
// 标题
|
||||||
|
title = '漏斗图', |
||||||
|
// 属性字典
|
||||||
|
keyMap = { |
||||||
|
textKey: 'key', |
||||||
|
dataKey: 'value' |
||||||
|
} |
||||||
|
} = this.settings |
||||||
|
|
||||||
|
if (data.length === 0) { |
||||||
|
throw new Error('数据源为空！') |
||||||
|
} |
||||||
|
|
||||||
|
// 文本对应属性名，数据值对应的属性名
|
||||||
|
const { textKey, dataKey } = keyMap |
||||||
|
checkKeyInModel(data[0], textKey, dataKey) |
||||||
|
|
||||||
|
const legendData = [] |
||||||
|
const series = [{ |
||||||
|
type: TYPE, |
||||||
|
left: '10%', |
||||||
|
top: 60, |
||||||
|
bottom: 60, |
||||||
|
width: '80%', |
||||||
|
min: 0, |
||||||
|
max: 100, |
||||||
|
minSize: '0%', |
||||||
|
maxSize: '100%', |
||||||
|
sort: 'descending', |
||||||
|
gap: 2, |
||||||
|
label: { |
||||||
|
normal: { |
||||||
|
show: true, |
||||||
|
position: 'inside' |
||||||
|
}, |
||||||
|
emphasis: { |
||||||
|
textStyle: { |
||||||
|
fontSize: 20 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
labelLine: { |
||||||
|
normal: { |
||||||
|
length: 10, |
||||||
|
lineStyle: { |
||||||
|
width: 1, |
||||||
|
type: 'solid' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
itemStyle: { |
||||||
|
normal: { |
||||||
|
borderColor: '#fff', |
||||||
|
borderWidth: 1 |
||||||
|
} |
||||||
|
}, |
||||||
|
data: [] |
||||||
|
}] |
||||||
|
|
||||||
|
// 填充数据
|
||||||
|
for (let i = 0; i < data.length; i++) { |
||||||
|
const element = data[i] |
||||||
|
const { [dataKey]: value, [textKey]: name, ...other } = element |
||||||
|
const item = { |
||||||
|
value, |
||||||
|
name, |
||||||
|
...other, |
||||||
|
_raw: element |
||||||
|
} |
||||||
|
series[0].data.push(item) |
||||||
|
} |
||||||
|
return { title, series, legendData } |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 绘制图表 |
||||||
|
*/ |
||||||
|
apply () { |
||||||
|
let { title, series, legendData } = this.options |
||||||
|
|
||||||
|
// 注入配置到series
|
||||||
|
let { insertSeries } = this.settings |
||||||
|
let _series = series |
||||||
|
if (insertSeries && insertSeries.length && series.length) { |
||||||
|
_series = this.injectDataIntoSeries(insertSeries, _series) |
||||||
|
} |
||||||
|
|
||||||
|
this.echart.setOption({ |
||||||
|
title: { |
||||||
|
text: title |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: '{a} <br/>{b} : {c}%' |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
data: legendData |
||||||
|
}, |
||||||
|
series: _series |
||||||
|
}, true) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,204 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
import Base from '../base' |
||||||
|
import { checkKeyInModel, init } from '../../common' |
||||||
|
|
||||||
|
const TYPE = 'line' |
||||||
|
|
||||||
|
/** |
||||||
|
* 折线图 |
||||||
|
*/ |
||||||
|
export default class Line extends Base { |
||||||
|
/** |
||||||
|
* 单独导出时调用的初始化方法 |
||||||
|
* @param {*} el 选择器或者 DOM 对象 |
||||||
|
* @param {*} data 数据源 |
||||||
|
* @param {*} options 可选项 |
||||||
|
*/ |
||||||
|
static init (el, data, options) { |
||||||
|
return init(Line, el, data, options) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 将用户配置转换为符合 ECharts API 格式的配置格式 |
||||||
|
*/ |
||||||
|
transform () { |
||||||
|
const { data = [] } = this.settings |
||||||
|
|
||||||
|
if (data.length === 0) { |
||||||
|
throw new Error('数据源为空！') |
||||||
|
} |
||||||
|
|
||||||
|
if (Object.keys(data[0]).length > 2) { |
||||||
|
return this.setMultipleLines() |
||||||
|
} else { |
||||||
|
this.simple = true |
||||||
|
return this.setSingleLine() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 单条折线 |
||||||
|
*/ |
||||||
|
setSingleLine () { |
||||||
|
const { |
||||||
|
// 数据
|
||||||
|
data = [], |
||||||
|
// 属性字典
|
||||||
|
keyMap = { |
||||||
|
xAxisKey: 'key', |
||||||
|
dataKey: 'value' |
||||||
|
}, |
||||||
|
// 图表标题
|
||||||
|
title = '单条折线图' |
||||||
|
} = this.settings |
||||||
|
|
||||||
|
// x 轴对应属性名，数据值对应的属性名
|
||||||
|
const { xAxisKey, dataKey } = keyMap |
||||||
|
checkKeyInModel(data[0], xAxisKey, dataKey) |
||||||
|
|
||||||
|
const series = [{ |
||||||
|
type: TYPE, |
||||||
|
data: [] |
||||||
|
}] |
||||||
|
const xAxis = { |
||||||
|
type: 'category', |
||||||
|
data: [] |
||||||
|
} |
||||||
|
|
||||||
|
for (let i = 0; i < data.length; i++) { |
||||||
|
xAxis.data.push(data[i][xAxisKey]) |
||||||
|
series[0].data.push(data[i][dataKey]) |
||||||
|
} |
||||||
|
|
||||||
|
return { title, xAxis, series } |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 多条折线 |
||||||
|
*/ |
||||||
|
setMultipleLines () { |
||||||
|
const { |
||||||
|
// 数据
|
||||||
|
data = [], |
||||||
|
// 属性字典
|
||||||
|
keyMap = { |
||||||
|
xAxisKey: 'key', |
||||||
|
legendKey: 'typeName', |
||||||
|
dataKey: 'value' |
||||||
|
}, |
||||||
|
// 图表标题
|
||||||
|
title = '多条折线图' |
||||||
|
} = this.settings |
||||||
|
|
||||||
|
// x 轴对应属性名，图例对应的属性名，数据值对应的属性名
|
||||||
|
const { xAxisKey, legendKey, dataKey } = keyMap |
||||||
|
checkKeyInModel(data[0], xAxisKey, legendKey, dataKey) |
||||||
|
|
||||||
|
const legendData = [] |
||||||
|
const series = [] |
||||||
|
const xAxis = { |
||||||
|
type: 'category', |
||||||
|
data: [] |
||||||
|
} |
||||||
|
|
||||||
|
for (let i = 0; i < data.length; i++) { |
||||||
|
const legendItem = data[i][legendKey] |
||||||
|
const xAxisItem = data[i][xAxisKey] |
||||||
|
const dataItem = data[i][dataKey] |
||||||
|
|
||||||
|
// 图例
|
||||||
|
if (!legendData.includes(legendItem)) { |
||||||
|
legendData.push(legendItem) |
||||||
|
} |
||||||
|
|
||||||
|
// x 轴
|
||||||
|
if (!xAxis.data.includes(xAxisItem)) { |
||||||
|
xAxis.data.push(xAxisItem) |
||||||
|
} |
||||||
|
|
||||||
|
// 系列
|
||||||
|
let targetSeries = series.find(s => s.name === legendItem) |
||||||
|
if (!targetSeries) { |
||||||
|
targetSeries = { |
||||||
|
name: legendItem, |
||||||
|
type: TYPE, |
||||||
|
data: [] |
||||||
|
} |
||||||
|
series.push(targetSeries) |
||||||
|
} |
||||||
|
targetSeries.data.push(dataItem) |
||||||
|
} |
||||||
|
|
||||||
|
return { title, xAxis, series, legendData } |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 绘制图表 |
||||||
|
*/ |
||||||
|
apply () { |
||||||
|
const { title, xAxis, series, legendData = [] } = this.options |
||||||
|
const { |
||||||
|
// 是否为横向图
|
||||||
|
reverseAxis = false, |
||||||
|
// 自定义 y 轴
|
||||||
|
yAxis, |
||||||
|
// 注入配置到 series
|
||||||
|
insertSeries |
||||||
|
} = this.settings |
||||||
|
const valueAxis = { type: 'value' } |
||||||
|
let yAxisModel = reverseAxis ? xAxis : valueAxis |
||||||
|
let xAxisModel = reverseAxis ? valueAxis : xAxis |
||||||
|
// 使用自定义 y 轴覆盖
|
||||||
|
if (yAxis) { |
||||||
|
yAxisModel = yAxis |
||||||
|
} |
||||||
|
// 简单图表标题为空时，图表垂直居中
|
||||||
|
const top = !title && this.simple ? '3%' : 60 |
||||||
|
|
||||||
|
let _series = series |
||||||
|
if (insertSeries && insertSeries.length && series.length) { |
||||||
|
_series = this.injectDataIntoSeries(insertSeries, _series) |
||||||
|
} |
||||||
|
|
||||||
|
let opts = { |
||||||
|
title: { |
||||||
|
text: title |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'axis' |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
left: '3%', |
||||||
|
right: '4%', |
||||||
|
bottom: '3%', |
||||||
|
top, |
||||||
|
containLabel: true |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
data: legendData |
||||||
|
}, |
||||||
|
xAxis: xAxisModel, |
||||||
|
yAxis: yAxisModel, |
||||||
|
series: _series |
||||||
|
} |
||||||
|
|
||||||
|
this.echart.setOption(opts, true) |
||||||
|
this.echart.clear() |
||||||
|
this.echart.setOption(opts, true) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,121 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
import Base from '../base' |
||||||
|
import { checkKeyInModel, init } from '../../common' |
||||||
|
|
||||||
|
const TYPE = 'pie' |
||||||
|
|
||||||
|
/** |
||||||
|
* 饼图 |
||||||
|
*/ |
||||||
|
export default class Pie extends Base { |
||||||
|
/** |
||||||
|
* 单独导出时调用的初始化方法 |
||||||
|
* @param {*} el 选择器或者 DOM 对象 |
||||||
|
* @param {*} data 数据源 |
||||||
|
* @param {*} options 可选项 |
||||||
|
*/ |
||||||
|
static init (el, data, options) { |
||||||
|
return init(Pie, el, data, options) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 将用户配置转换为符合 ECharts API 格式的配置格式 |
||||||
|
*/ |
||||||
|
transform () { |
||||||
|
const { |
||||||
|
// 数据
|
||||||
|
data = [], |
||||||
|
// 标题
|
||||||
|
title = '饼图', |
||||||
|
// 是否环形图
|
||||||
|
ring = false, |
||||||
|
// 属性字典
|
||||||
|
keyMap = { |
||||||
|
textKey: 'key', |
||||||
|
dataKey: 'value' |
||||||
|
} |
||||||
|
} = this.settings |
||||||
|
|
||||||
|
if (data.length === 0) { |
||||||
|
throw new Error('数据源为空！') |
||||||
|
} |
||||||
|
|
||||||
|
// 文本对应属性名，数据值对应的属性名
|
||||||
|
const { textKey, dataKey } = keyMap |
||||||
|
checkKeyInModel(data[0], textKey, dataKey) |
||||||
|
|
||||||
|
const legendData = [] |
||||||
|
let radius = ring ? ['50%', '70%'] : '60%' |
||||||
|
let center = title ? ['50%', '60%'] : ['50%', '50%'] |
||||||
|
const series = [{ |
||||||
|
radius: radius, |
||||||
|
center: center, |
||||||
|
type: TYPE, |
||||||
|
data: [] |
||||||
|
}] |
||||||
|
|
||||||
|
// 填充数据
|
||||||
|
for (let i = 0; i < data.length; i++) { |
||||||
|
const element = data[i] |
||||||
|
const { [dataKey]: value, [textKey]: name, ...other } = element |
||||||
|
const item = { |
||||||
|
value, |
||||||
|
name, |
||||||
|
...other, |
||||||
|
_raw: element |
||||||
|
} |
||||||
|
series[0].data.push(item) |
||||||
|
} |
||||||
|
return { title, series, legendData } |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 绘制图表 |
||||||
|
*/ |
||||||
|
apply () { |
||||||
|
let { title, series, legendData } = this.options |
||||||
|
|
||||||
|
// 注入配置到series
|
||||||
|
let { insertSeries } = this.settings |
||||||
|
let _series = series |
||||||
|
if (insertSeries && insertSeries.length && series.length) { |
||||||
|
_series = this.injectDataIntoSeries(insertSeries, _series) |
||||||
|
} |
||||||
|
|
||||||
|
let opts = { |
||||||
|
title: { |
||||||
|
text: title, |
||||||
|
x: 'center' |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: 'item', |
||||||
|
formatter: '{b} : {c} ({d}%)' |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
orient: 'vertical', |
||||||
|
left: 'left', |
||||||
|
data: legendData |
||||||
|
}, |
||||||
|
series: _series |
||||||
|
} |
||||||
|
|
||||||
|
this.echart.setOption(opts, true) |
||||||
|
this.echart.clear() |
||||||
|
this.echart.setOption(opts, true) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,129 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
import Base from '../base' |
||||||
|
import { checkKeyInModel, init } from '../../common' |
||||||
|
|
||||||
|
const TYPE = 'radar' |
||||||
|
|
||||||
|
/** |
||||||
|
* 雷达图 |
||||||
|
*/ |
||||||
|
export default class Radar extends Base { |
||||||
|
/** |
||||||
|
* 单独导出时调用的初始化方法 |
||||||
|
* @param {*} el 选择器或者 DOM 对象 |
||||||
|
* @param {*} data 数据源 |
||||||
|
* @param {*} options 可选项 |
||||||
|
*/ |
||||||
|
static init (el, data, options) { |
||||||
|
return init(Radar, el, data, options) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 将用户配置转换为符合 ECharts API 格式的配置格式 |
||||||
|
*/ |
||||||
|
transform () { |
||||||
|
const { |
||||||
|
// 数据
|
||||||
|
data = [], |
||||||
|
// 图表标题
|
||||||
|
title = '雷达图', |
||||||
|
// 属性字典
|
||||||
|
keyMap = { |
||||||
|
textKey: 'key', |
||||||
|
legendKey: 'typeName', |
||||||
|
dataKey: 'value' |
||||||
|
} |
||||||
|
} = this.settings |
||||||
|
|
||||||
|
if (data.length === 0) { |
||||||
|
throw new Error('数据源为空！') |
||||||
|
} |
||||||
|
|
||||||
|
// 文本对应属性名，图例对应的属性名，数据值对应的属性名
|
||||||
|
const { textKey, legendKey, dataKey } = keyMap |
||||||
|
checkKeyInModel(data[0], textKey, legendKey, dataKey) |
||||||
|
|
||||||
|
const legendData = [] |
||||||
|
const seriesData = [] |
||||||
|
const indicator = [] |
||||||
|
|
||||||
|
// 设置图例并初始化数据系列
|
||||||
|
for (let i = 0; i < data.length; i++) { |
||||||
|
const legendItem = data[i][legendKey] |
||||||
|
const textItem = data[i][textKey] |
||||||
|
const dataItem = data[i][dataKey] |
||||||
|
|
||||||
|
// 图例
|
||||||
|
if (!legendData.includes(legendItem)) { |
||||||
|
legendData.push(legendItem) |
||||||
|
} |
||||||
|
|
||||||
|
// 系列
|
||||||
|
let targetSeries = seriesData.find(s => s.name === legendItem) |
||||||
|
if (!targetSeries) { |
||||||
|
targetSeries = { |
||||||
|
name: legendItem, |
||||||
|
value: [], |
||||||
|
_raw: [] |
||||||
|
} |
||||||
|
seriesData.push(targetSeries) |
||||||
|
} |
||||||
|
targetSeries.value.push(dataItem) |
||||||
|
targetSeries._raw.push(data[i]) |
||||||
|
|
||||||
|
// 指标
|
||||||
|
let targetIndicator = indicator.find(i => i.name === textItem) |
||||||
|
if (!targetIndicator) { |
||||||
|
indicator.push({ name: textItem }) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return { title, seriesData, legendData, indicator } |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 绘制图表 |
||||||
|
*/ |
||||||
|
apply () { |
||||||
|
const { title, seriesData, legendData = [], indicator } = this.options |
||||||
|
this.echart.setOption({ |
||||||
|
title: { |
||||||
|
text: title |
||||||
|
}, |
||||||
|
tooltip: {}, |
||||||
|
legend: { |
||||||
|
data: legendData |
||||||
|
}, |
||||||
|
radar: { |
||||||
|
name: { |
||||||
|
textStyle: { |
||||||
|
color: '#fff', |
||||||
|
backgroundColor: '#999', |
||||||
|
borderRadius: 3, |
||||||
|
padding: [3, 5] |
||||||
|
} |
||||||
|
}, |
||||||
|
indicator |
||||||
|
}, |
||||||
|
series: [{ |
||||||
|
type: TYPE, |
||||||
|
data: seriesData |
||||||
|
}] |
||||||
|
}, true) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,149 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
import Base from '../base' |
||||||
|
import { checkKeyInModel, init } from '../../common' |
||||||
|
|
||||||
|
const TYPE = 'scatter' |
||||||
|
|
||||||
|
/** |
||||||
|
* 气泡图 |
||||||
|
*/ |
||||||
|
export default class Scatter extends Base { |
||||||
|
/** |
||||||
|
* 单独导出时调用的初始化方法 |
||||||
|
* @param {*} el 选择器或者 DOM 对象 |
||||||
|
* @param {*} data 数据源 |
||||||
|
* @param {*} options 可选项 |
||||||
|
*/ |
||||||
|
static init (el, data, options) { |
||||||
|
return init(Scatter, el, data, options) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 将用户配置转换为符合 ECharts API 格式的配置格式 |
||||||
|
*/ |
||||||
|
transform () { |
||||||
|
const { |
||||||
|
// 数据
|
||||||
|
data = [], |
||||||
|
// 图表标题
|
||||||
|
title = '气泡图', |
||||||
|
// 属性字典
|
||||||
|
keyMap = { |
||||||
|
xKey: 'x', |
||||||
|
yKey: 'y', |
||||||
|
sizeKey: 'size', |
||||||
|
textKey: 'text', |
||||||
|
legendKey: 'typeName' |
||||||
|
} |
||||||
|
} = this.settings |
||||||
|
|
||||||
|
if (data.length === 0) { |
||||||
|
throw new Error('数据源为空！') |
||||||
|
} |
||||||
|
|
||||||
|
const legendData = [] |
||||||
|
const series = [] |
||||||
|
|
||||||
|
const { xKey, yKey, sizeKey, textKey, legendKey } = keyMap |
||||||
|
checkKeyInModel(data[0], xKey, yKey, sizeKey, textKey, legendKey) |
||||||
|
|
||||||
|
for (let i = 0; i < data.length; i++) { |
||||||
|
const { |
||||||
|
[legendKey]: legendItem, |
||||||
|
[xKey]: xValue, |
||||||
|
[yKey]: yValue, |
||||||
|
[sizeKey]: sizeValue, |
||||||
|
[textKey]: textValue, |
||||||
|
...other |
||||||
|
} = data[i] |
||||||
|
|
||||||
|
// 图例
|
||||||
|
if (!legendData.includes(legendItem)) { |
||||||
|
legendData.push(legendItem) |
||||||
|
} |
||||||
|
|
||||||
|
// 系列
|
||||||
|
let targetSeries = series.find(s => s.name === legendItem) |
||||||
|
if (!targetSeries) { |
||||||
|
targetSeries = { |
||||||
|
type: TYPE, |
||||||
|
name: legendItem, |
||||||
|
data: [], |
||||||
|
symbolSize: function (data) { |
||||||
|
return Math.sqrt(data[2]) |
||||||
|
}, |
||||||
|
label: { |
||||||
|
emphasis: { |
||||||
|
show: true, |
||||||
|
formatter: function (param) { |
||||||
|
return param.data[3] |
||||||
|
}, |
||||||
|
position: 'top' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
series.push(targetSeries) |
||||||
|
} |
||||||
|
targetSeries.data.push({ |
||||||
|
value: [ |
||||||
|
xValue, |
||||||
|
yValue, |
||||||
|
sizeValue, |
||||||
|
textValue |
||||||
|
], |
||||||
|
...other, |
||||||
|
_raw: data[i] |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return { title, series, legendData } |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 绘制图表 |
||||||
|
*/ |
||||||
|
apply () { |
||||||
|
const { title, series, legendData = [] } = this.options |
||||||
|
|
||||||
|
let { |
||||||
|
// 自定义 x 轴
|
||||||
|
xAxis, |
||||||
|
// 自定义 y 轴
|
||||||
|
yAxis, |
||||||
|
// 注入配置到 series
|
||||||
|
insertSeries |
||||||
|
} = this.settings |
||||||
|
let _series = series |
||||||
|
if (insertSeries && insertSeries.length && series.length) { |
||||||
|
_series = this.injectDataIntoSeries(insertSeries, _series) |
||||||
|
} |
||||||
|
|
||||||
|
this.echart.setOption({ |
||||||
|
title: { |
||||||
|
text: title |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
right: 10, |
||||||
|
data: legendData |
||||||
|
}, |
||||||
|
xAxis: xAxis || {}, |
||||||
|
yAxis: yAxis || {}, |
||||||
|
series: _series |
||||||
|
}, true) |
||||||
|
} |
||||||
|
} |
||||||
@ -1,405 +0,0 @@ |
|||||||
|
|
||||||
# ana-charts |
|
||||||
|
|
||||||
echarts 扩展 |
|
||||||
|
|
||||||
## 安装 |
|
||||||
|
|
||||||
``` |
|
||||||
npm i @analysys/ana-charts |
|
||||||
``` |
|
||||||
|
|
||||||
## 特性 |
|
||||||
|
|
||||||
- 统一的数据结构 |
|
||||||
- 支持 ECharts 原生操作 |
|
||||||
|
|
||||||
## 快速开始 |
|
||||||
|
|
||||||
### 全量导入 |
|
||||||
|
|
||||||
```html |
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<div id="chart" style="height:500px"></div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Chart from '@analysys/ana-charts' |
|
||||||
|
|
||||||
export default { |
|
||||||
mounted () { |
|
||||||
Chart.line('#chart', [ |
|
||||||
{ key: 'Monday', value: 1 }, |
|
||||||
{ key: 'Tuesday', value: 2 }, |
|
||||||
{ key: 'Wednesday', value: 3 } |
|
||||||
]) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
``` |
|
||||||
|
|
||||||
### 按需导入 |
|
||||||
|
|
||||||
```html |
|
||||||
<template> |
|
||||||
<div> |
|
||||||
<div id="chart" style="height:500px"></div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { Line } from '@analysys/ana-charts' |
|
||||||
|
|
||||||
export default { |
|
||||||
mounted () { |
|
||||||
Line.init('#chart', [ |
|
||||||
{ key: 'Monday', value: 1 }, |
|
||||||
{ key: 'Tuesday', value: 2 }, |
|
||||||
{ key: 'Wednesday', value: 3 } |
|
||||||
]) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
``` |
|
||||||
|
|
||||||
## APIs |
|
||||||
|
|
||||||
### 一般用法 |
|
||||||
|
|
||||||
``` js |
|
||||||
const myChart = Chart.line(el, data, options) |
|
||||||
// const myChart = Chart.bar(el, data, options) |
|
||||||
// const myChart = Chart.pie(el, data, options) |
|
||||||
// const myChart = Chart.radar(el, data, options) |
|
||||||
// const myChart = Chart.funnel(el, data, options) |
|
||||||
// const myChart = Chart.scatter(el, data, options) |
|
||||||
|
|
||||||
// 刷新数据 |
|
||||||
myChart.setData(data) |
|
||||||
``` |
|
||||||
|
|
||||||
### 注入属性 |
|
||||||
|
|
||||||
``` js |
|
||||||
// 以 line 折线图为例，bar、funnel、pie、scatter 均可使用 |
|
||||||
Chart.line(el, data, { |
|
||||||
insertSeries: [ |
|
||||||
{ |
|
||||||
// index 可选 `all`，`start`，`end`，也可指定需要被注入的索引数组，如 [0, 2, 4] |
|
||||||
index: 'all', |
|
||||||
// 以下属性会被注入到指定的序列中 |
|
||||||
areaStyle: {} |
|
||||||
} |
|
||||||
] |
|
||||||
}) |
|
||||||
``` |
|
||||||
|
|
||||||
### ECharts 对象 |
|
||||||
|
|
||||||
> 初始化图表后返回的对象上保存了 ECharts 对象的引用，可以通过该属性来设置图表配置和监听事件 |
|
||||||
|
|
||||||
``` js |
|
||||||
const myChart = Chart.line(el, data, options) |
|
||||||
// 设置可配置项 |
|
||||||
myChart.echart.setOption({ |
|
||||||
// 与 ECharts 参考文档用法一致 |
|
||||||
}) |
|
||||||
``` |
|
||||||
|
|
||||||
### 折线图 |
|
||||||
|
|
||||||
#### 基本用法 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.line('#chart', [ |
|
||||||
{ key: 'Monday', value: 1 }, |
|
||||||
{ key: 'Tuesday', value: 2 }, |
|
||||||
{ key: 'Wednesday', value: 3 }, |
|
||||||
... |
|
||||||
]) |
|
||||||
``` |
|
||||||
|
|
||||||
#### 多条折线图 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.line('#chart', [ |
|
||||||
{ typeName: 'apple', key: 'Monday', value: 1 }, |
|
||||||
{ typeName: 'apple', key: 'Tuesday', value: 2 }, |
|
||||||
{ typeName: 'apple', key: 'Wednesday', value: 3 }, |
|
||||||
{ typeName: 'pear', key: 'Monday', value: 11 }, |
|
||||||
{ typeName: 'pear', key: 'Tuesday', value: 21 }, |
|
||||||
{ typeName: 'pear', key: 'Wednesday', value: 31 }, |
|
||||||
{ typeName: 'banana', key: 'Monday', value: 31 }, |
|
||||||
{ typeName: 'banana', key: 'Tuesday', value: 32 }, |
|
||||||
{ typeName: 'banana', key: 'Wednesday', value: 33 }, |
|
||||||
... |
|
||||||
]) |
|
||||||
``` |
|
||||||
|
|
||||||
#### options 可配置参数 |
|
||||||
|
|
||||||
| 属性 | 说明 | required | 类型 | 默认值 | |
|
||||||
| :----| :------| :--------| :---:| :------| |
|
||||||
| title | 图表标题 | - | String | '单条折线图' 或 '多条折线图' | |
|
||||||
| keyMap | 数据列表的属性字典 | - | Object | 详见后续属性 | |
|
||||||
| keyMap.xAxisKey | x 轴对应的属性名称 | - | String | 'key' | |
|
||||||
| keyMap.dataKey | 数据值对应的属性名称 | - | String | 'value' | |
|
||||||
| keyMap.legendKey | 图例对应的属性名称 | - | String | 'typeName' | |
|
||||||
| reverseAxis | 是否为横向图 | - | Boolean | false | |
|
||||||
|
|
||||||
### 柱状图 |
|
||||||
|
|
||||||
#### 基本用法 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.bar('#chart', [ |
|
||||||
{ key: 'Monday', value: 1 }, |
|
||||||
{ key: 'Tuesday', value: 2 }, |
|
||||||
{ key: 'Wednesday', value: 3 }, |
|
||||||
... |
|
||||||
]) |
|
||||||
``` |
|
||||||
|
|
||||||
#### 多条柱状图 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.bar('#chart', [ |
|
||||||
{ typeName: 'apple', key: 'Monday', value: 1 }, |
|
||||||
{ typeName: 'apple', key: 'Tuesday', value: 2 }, |
|
||||||
{ typeName: 'apple', key: 'Wednesday', value: 3 }, |
|
||||||
{ typeName: 'pear', key: 'Monday', value: 11 }, |
|
||||||
{ typeName: 'pear', key: 'Tuesday', value: 21 }, |
|
||||||
{ typeName: 'pear', key: 'Wednesday', value: 31 }, |
|
||||||
{ typeName: 'banana', key: 'Monday', value: 31 }, |
|
||||||
{ typeName: 'banana', key: 'Tuesday', value: 32 }, |
|
||||||
{ typeName: 'banana', key: 'Wednesday', value: 33 }, |
|
||||||
... |
|
||||||
]) |
|
||||||
``` |
|
||||||
|
|
||||||
#### 折柱混合图 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.bar('#chart', [ |
|
||||||
{ typeName: 'apple', key: 'Monday', value: 1 }, |
|
||||||
{ typeName: 'apple', key: 'Tuesday', value: 2 }, |
|
||||||
{ typeName: 'apple', key: 'Wednesday', value: 3 }, |
|
||||||
{ typeName: 'pear', key: 'Monday', value: 11 }, |
|
||||||
{ typeName: 'pear', key: 'Tuesday', value: 21 }, |
|
||||||
{ typeName: 'pear', key: 'Wednesday', value: 31 }, |
|
||||||
{ typeName: 'banana', key: 'Monday', value: 31 }, |
|
||||||
{ typeName: 'banana', key: 'Tuesday', value: 32 }, |
|
||||||
{ typeName: 'banana', key: 'Wednesday', value: 33 }, |
|
||||||
... |
|
||||||
], { |
|
||||||
lineTypes: ['banana'] |
|
||||||
}) |
|
||||||
``` |
|
||||||
|
|
||||||
#### 时间轴柱状图 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.bar('#chart', [ |
|
||||||
{ timeline: 2015, typeName: 'apple', key: 'Monday', value: 1 }, |
|
||||||
{ timeline: 2015, typeName: 'apple', key: 'Tuesday', value: 2 }, |
|
||||||
{ timeline: 2015, typeName: 'apple', key: 'Wednesday', value: 3 }, |
|
||||||
{ timeline: 2015, typeName: 'pear', key: 'Monday', value: 11 }, |
|
||||||
{ timeline: 2015, typeName: 'pear', key: 'Tuesday', value: 21 }, |
|
||||||
{ timeline: 2015, typeName: 'pear', key: 'Wednesday', value: 31 }, |
|
||||||
{ timeline: 2015, typeName: 'banana', key: 'Monday', value: 31 }, |
|
||||||
{ timeline: 2015, typeName: 'banana', key: 'Tuesday', value: 32 }, |
|
||||||
{ timeline: 2015, typeName: 'banana', key: 'Wednesday', value: 33 }, |
|
||||||
{ timeline: 2016, typeName: 'apple', key: 'Monday', value: 1 }, |
|
||||||
{ timeline: 2016, typeName: 'apple', key: 'Tuesday', value: 2 }, |
|
||||||
{ timeline: 2016, typeName: 'apple', key: 'Wednesday', value: 3 }, |
|
||||||
{ timeline: 2016, typeName: 'pear', key: 'Monday', value: 11 }, |
|
||||||
{ timeline: 2016, typeName: 'pear', key: 'Tuesday', value: 21 }, |
|
||||||
{ timeline: 2016, typeName: 'pear', key: 'Wednesday', value: 31 }, |
|
||||||
{ timeline: 2016, typeName: 'banana', key: 'Monday', value: 31 }, |
|
||||||
{ timeline: 2016, typeName: 'banana', key: 'Tuesday', value: 32 }, |
|
||||||
{ timeline: 2016, typeName: 'banana', key: 'Wednesday', value: 33 }, |
|
||||||
... |
|
||||||
], { |
|
||||||
// 可以使用 $timeline 进行占位，该字符串将替换为 timeline 属性的值 |
|
||||||
title: '$timeline时间轴柱状图' |
|
||||||
}) |
|
||||||
``` |
|
||||||
|
|
||||||
#### options 可配置参数 |
|
||||||
|
|
||||||
| 属性 | 说明 | required | 类型 | 默认值 | |
|
||||||
| :----| :------| :--------| :---:| :------| |
|
||||||
| title | 图表标题 | - | String | '单条柱状图' 或 '多条柱状图' | |
|
||||||
| keyMap | 数据列表的属性字典 | - | Object | 详见后续属性 | |
|
||||||
| keyMap.xAxisKey | x 轴对应的属性名称 | - | String | 'key' | |
|
||||||
| keyMap.dataKey | 数据值对应的属性名称 | - | String | 'value' | |
|
||||||
| keyMap.legendKey | 图例对应的属性名称 | - | String | 'typeName' | |
|
||||||
| keyMap.timelineKey | 时间轴对应的属性名称 | - | String | 'timeline' | |
|
||||||
| reverseAxis | 是否为横向图 | - | Boolean | false | |
|
||||||
| stack | 是否为堆叠图 | - | Boolean | false | |
|
||||||
| lineTypes | 折柱混合图中折线数据对应的图例名称数组 | - | Array | - | |
|
||||||
| yAxis | 自定义的 y 轴，请参考 echarts 配置 | - | Object | - | |
|
||||||
|
|
||||||
### 饼状图 |
|
||||||
|
|
||||||
#### 基本用法 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.pie('#chart', [ |
|
||||||
{ key: 'Monday', value: 1 }, |
|
||||||
{ key: 'Tuesday', value: 2 }, |
|
||||||
{ key: 'Wednesday', value: 3 }, |
|
||||||
... |
|
||||||
]) |
|
||||||
``` |
|
||||||
|
|
||||||
#### 环形图 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.pie('#chart', [ |
|
||||||
{ key: 'Monday', value: 1 }, |
|
||||||
{ key: 'Tuesday', value: 2 }, |
|
||||||
{ key: 'Wednesday', value: 3 }, |
|
||||||
... |
|
||||||
], { |
|
||||||
ring: true |
|
||||||
}) |
|
||||||
``` |
|
||||||
|
|
||||||
#### options 可配置参数 |
|
||||||
|
|
||||||
| 属性 | 说明 | required | 类型 | 默认值 | |
|
||||||
| :----| :------| :--------| :---:| :------| |
|
||||||
| title | 图表标题 | - | String | '饼图' | |
|
||||||
| keyMap | 数据列表的属性字典 | - | Object | 详见后续属性 | |
|
||||||
| keyMap.textKey | 文本对应的属性名称 | - | String | 'key' | |
|
||||||
| keyMap.dataKey | 数据值对应的属性名称 | - | String | 'value' | |
|
||||||
| ring | 是否环形图 | - | Boolean | false | |
|
||||||
|
|
||||||
### 雷达图 |
|
||||||
|
|
||||||
#### 基本用法 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.radar('#chart', [ |
|
||||||
{ typeName: 'apple', key: 'Monday', value: 1 }, |
|
||||||
{ typeName: 'apple', key: 'Tuesday', value: 2 }, |
|
||||||
{ typeName: 'apple', key: 'Wednesday', value: 3 }, |
|
||||||
{ typeName: 'pear', key: 'Monday', value: 11 }, |
|
||||||
{ typeName: 'pear', key: 'Tuesday', value: 21 }, |
|
||||||
{ typeName: 'pear', key: 'Wednesday', value: 31 }, |
|
||||||
{ typeName: 'banana', key: 'Monday', value: 31 }, |
|
||||||
{ typeName: 'banana', key: 'Tuesday', value: 32 }, |
|
||||||
{ typeName: 'banana', key: 'Wednesday', value: 33 }, |
|
||||||
... |
|
||||||
]) |
|
||||||
``` |
|
||||||
|
|
||||||
#### options 可配置参数 |
|
||||||
|
|
||||||
| 属性 | 说明 | required | 类型 | 默认值 | |
|
||||||
| :----| :------| :--------| :---:| :------| |
|
||||||
| title | 图表标题 | - | String | '雷达图' | |
|
||||||
| keyMap | 数据列表的属性字典 | - | Object | 详见后续属性 | |
|
||||||
| keyMap.textKey | 指标对应的属性名称 | - | String | 'key' | |
|
||||||
| keyMap.dataKey | 数据值对应的属性名称 | - | String | 'value' | |
|
||||||
| keyMap.legendKey | 图例对应的属性名称 | - | String | 'typeName' | |
|
||||||
|
|
||||||
### 漏斗图 |
|
||||||
|
|
||||||
#### 基本用法 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.funnel('#chart', [ |
|
||||||
{ key: 'Monday', value: 1 }, |
|
||||||
{ key: 'Tuesday', value: 2 }, |
|
||||||
{ key: 'Wednesday', value: 3 }, |
|
||||||
... |
|
||||||
]) |
|
||||||
``` |
|
||||||
|
|
||||||
#### options 可配置参数 |
|
||||||
|
|
||||||
| 属性 | 说明 | required | 类型 | 默认值 | |
|
||||||
| :----| :------| :--------| :---:| :------| |
|
||||||
| title | 图表标题 | - | String | '漏斗图' | |
|
||||||
| keyMap | 数据列表的属性字典 | - | Object | 详见后续属性 | |
|
||||||
| keyMap.textKey | 文本对应的属性名称 | - | String | 'key' | |
|
||||||
| keyMap.dataKey | 数据值对应的属性名称 | - | String | 'value' | |
|
||||||
|
|
||||||
### 气泡图 |
|
||||||
|
|
||||||
#### 基本用法 |
|
||||||
|
|
||||||
``` js |
|
||||||
Chart.scatter('#chart', [ |
|
||||||
{ typeName: 'apple', text: 'Monday', x: 1, y: 1, size: 1 }, |
|
||||||
{ typeName: 'apple', text: 'Tuesday', x: 2, y: 2, size: 2 }, |
|
||||||
{ typeName: 'apple', text: 'Wednesday', x: 3, y: 3, size: 3 }, |
|
||||||
{ typeName: 'pear', text: 'Monday', x: 11, y: 11, size: 11 }, |
|
||||||
{ typeName: 'pear', text: 'Tuesday', x: 21, y: 21, size: 21 }, |
|
||||||
{ typeName: 'pear', text: 'Wednesday', x: 31, y: 31, size: 31 }, |
|
||||||
{ typeName: 'banana', text: 'Monday', x: 31, y: 31, size: 31 }, |
|
||||||
{ typeName: 'banana', text: 'Tuesday', x: 32, y: 32, size: 32 }, |
|
||||||
{ typeName: 'banana', text: 'Wednesday', x: 33, y: 33, size: 33 }, |
|
||||||
... |
|
||||||
]) |
|
||||||
``` |
|
||||||
|
|
||||||
#### options 可配置参数 |
|
||||||
|
|
||||||
| 属性 | 说明 | required | 类型 | 默认值 | |
|
||||||
| :----| :------| :--------| :---:| :------| |
|
||||||
| title | 图表标题 | - | String | '气泡图' | |
|
||||||
| keyMap | 数据列表的属性字典 | - | Object | 详见后续属性 | |
|
||||||
| keyMap.xKey | x 坐标对应的属性名称 | - | String | 'x' | |
|
||||||
| keyMap.yKey | y 坐标对应的属性名称 | - | String | 'y' | |
|
||||||
| keyMap.sizeKey | 气泡大小对应的属性名称 | - | String | 'size' | |
|
||||||
| keyMap.textKey | 气泡文本对应的属性名称 | - | String | 'text' | |
|
||||||
| keyMap.legendKey | 图例对应的属性名称 | - | String | 'typeName' | |
|
||||||
|
|
||||||
### 全局配置 |
|
||||||
|
|
||||||
#### 主题 |
|
||||||
|
|
||||||
注册并按需使用 |
|
||||||
``` js |
|
||||||
import themeData from './theme.json' |
|
||||||
|
|
||||||
// 注册主题 |
|
||||||
Chart.config({ |
|
||||||
theme: { |
|
||||||
name: 'themeName', |
|
||||||
data: themeData |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
// 使用主题 |
|
||||||
Chart.line('#chart', data, { theme: 'themeName' }) |
|
||||||
``` |
|
||||||
|
|
||||||
注册并全局使用 |
|
||||||
``` js |
|
||||||
import themeData from './theme.json' |
|
||||||
|
|
||||||
// 注册为默认主题后，所有的图表均使用该主题，不需要特别指定 |
|
||||||
Chart.config({ |
|
||||||
theme: { |
|
||||||
name: 'themeName', |
|
||||||
data: themeData, |
|
||||||
default: true |
|
||||||
} |
|
||||||
}) |
|
||||||
``` |
|
||||||
|
|
||||||
### 实例 API |
|
||||||
|
|
||||||
| 方法 | 说明 | 参数 | 参数类型 | 返回值 | |
|
||||||
| :----| :------| :--------| :---:| :------| |
|
||||||
| setData | 重新设置数据 | data | Array | - | |
|
||||||
|
|
||||||
## License |
|
||||||
|
|
||||||
[MIT](http://opensource.org/licenses/MIT) |
|
||||||
@ -1,60 +0,0 @@ |
|||||||
/** |
|
||||||
* webpack config |
|
||||||
* |
|
||||||
* author: liuxin(liuxin@analysys.com.cn) |
|
||||||
*/ |
|
||||||
|
|
||||||
const path = require('path') |
|
||||||
const glob = require('globby') |
|
||||||
|
|
||||||
const isProduction = process.env.NODE_ENV !== 'development' |
|
||||||
const resolve = dir => path.join(__dirname, '..', dir) |
|
||||||
const assetsDir = resolve('src') |
|
||||||
const distDir = resolve('dist') |
|
||||||
|
|
||||||
const baseConfig = { |
|
||||||
entry: { |
|
||||||
'index': glob.sync(['index.js'], { cwd: assetsDir }) |
|
||||||
}, |
|
||||||
output: { |
|
||||||
path: distDir |
|
||||||
}, |
|
||||||
module: { |
|
||||||
rules: [ |
|
||||||
{ |
|
||||||
test: /\.js$/, |
|
||||||
exclude: file => ( |
|
||||||
/node_modules/.test(file) && |
|
||||||
!/\.vue\.js/.test(file) |
|
||||||
), |
|
||||||
use: [ |
|
||||||
{ |
|
||||||
loader: 'babel-loader', |
|
||||||
options: { |
|
||||||
cacheDirectory: true, |
|
||||||
cacheIdentifier: true |
|
||||||
} |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
] |
|
||||||
}, |
|
||||||
resolve: { |
|
||||||
modules: [ |
|
||||||
resolve('node_modules'), |
|
||||||
resolve('src') |
|
||||||
], |
|
||||||
extensions: ['.js', '.json', '.vue', '.scss'] |
|
||||||
}, |
|
||||||
externals: { |
|
||||||
'vue': 'Vue', |
|
||||||
'echarts': 'echarts' |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
module.exports = { |
|
||||||
isProduction, |
|
||||||
assetsDir, |
|
||||||
distDir, |
|
||||||
baseConfig |
|
||||||
} |
|
||||||
@ -1,104 +0,0 @@ |
|||||||
/** |
|
||||||
* webpack config for production |
|
||||||
* |
|
||||||
* author: liuxin(liuxin@analysys.com.cn) |
|
||||||
*/ |
|
||||||
|
|
||||||
const webpack = require('webpack') |
|
||||||
const merge = require('webpack-merge') |
|
||||||
const { baseConfig } = require('./config') |
|
||||||
const ExtractTextPlugin = require('extract-text-webpack-plugin') |
|
||||||
const UglifyJSPlugin = require('uglifyjs-webpack-plugin') |
|
||||||
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') |
|
||||||
const VueLoaderPlugin = require('vue-loader/lib/plugin') |
|
||||||
|
|
||||||
const config = merge.smart(baseConfig, { |
|
||||||
devtool: 'source-map', |
|
||||||
output: { |
|
||||||
filename: '[name].js', |
|
||||||
libraryTarget: 'umd', |
|
||||||
umdNamedDefine: false |
|
||||||
}, |
|
||||||
module: { |
|
||||||
rules: [ |
|
||||||
{ |
|
||||||
test: /\.vue$/, |
|
||||||
loader: 'vue-loader', |
|
||||||
options: { |
|
||||||
hotReload: false |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
test: /\.css$/, |
|
||||||
loader: ExtractTextPlugin.extract({ |
|
||||||
use: [ |
|
||||||
'css-loader', |
|
||||||
{ |
|
||||||
loader: 'postcss-loader', |
|
||||||
options: { |
|
||||||
plugins: (loader) => [ |
|
||||||
require('autoprefixer')({ |
|
||||||
'browsers': ['ie > 8', 'last 2 version', 'safari >= 9'] |
|
||||||
}), |
|
||||||
require('cssnano') |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
], |
|
||||||
fallback: ['vue-style-loader'] |
|
||||||
}) |
|
||||||
}, |
|
||||||
{ |
|
||||||
test: /\.scss$/, |
|
||||||
loader: ExtractTextPlugin.extract({ |
|
||||||
use: [ |
|
||||||
'css-loader', |
|
||||||
'sass-loader', |
|
||||||
{ |
|
||||||
loader: 'postcss-loader', |
|
||||||
options: { |
|
||||||
plugins: (loader) => [ |
|
||||||
require('autoprefixer')({ |
|
||||||
'browsers': ['ie > 8', 'last 2 version', 'safari >= 9'] |
|
||||||
}), |
|
||||||
require('cssnano') |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
], |
|
||||||
fallback: ['vue-style-loader'] |
|
||||||
}) |
|
||||||
} |
|
||||||
] |
|
||||||
}, |
|
||||||
plugins: [ |
|
||||||
new VueLoaderPlugin(), |
|
||||||
new ExtractTextPlugin({ filename: '[name].css', allChunks: true }), |
|
||||||
new webpack.optimize.OccurrenceOrderPlugin(), |
|
||||||
new OptimizeCssAssetsPlugin({ |
|
||||||
assetNameRegExp: /\.css$/g, |
|
||||||
cssProcessor: require('cssnano'), |
|
||||||
cssProcessorOptions: { discardComments: { removeAll: true } }, |
|
||||||
canPrint: true |
|
||||||
}), |
|
||||||
new UglifyJSPlugin({ |
|
||||||
parallel: true, |
|
||||||
sourceMap: true, |
|
||||||
uglifyOptions: { |
|
||||||
compress: { |
|
||||||
drop_console: true, |
|
||||||
drop_debugger: true |
|
||||||
}, |
|
||||||
comments: function (n, c) { |
|
||||||
/*! IMPORTANT: Please preserve 3rd-party library license info, inspired from @allex/amd-build-worker/config/util.js */ |
|
||||||
var text = c.value, type = c.type |
|
||||||
if (type === 'comment2') { |
|
||||||
return /^!|@preserve|@license|@cc_on|MIT/i.test(text) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
] |
|
||||||
}) |
|
||||||
|
|
||||||
module.exports = config |
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,87 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="app-container"> |
|
||||||
<div class="left"> |
|
||||||
<ul class="sidebar"> |
|
||||||
<li v-for="(link, i) in links" :key="i"> |
|
||||||
<router-link :to="link.url">{{link.name}}</router-link> |
|
||||||
<ul class="sub" v-if="link.subs"> |
|
||||||
<li v-for="(sub, j) in link.subs" :key="j"> |
|
||||||
<router-link :to="sub.url">{{sub.name}}</router-link> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
<div class="right"> |
|
||||||
<router-view /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import './styles/main.scss' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'App', |
|
||||||
data () { |
|
||||||
return { |
|
||||||
links: [ |
|
||||||
{ |
|
||||||
name: '折线图', |
|
||||||
url: '/line', |
|
||||||
subs: [ |
|
||||||
{ name: '单条折线图', url: '/line#simple' }, |
|
||||||
{ name: '多条折线图', url: '/line#multiple' }, |
|
||||||
{ name: '横向折线图', url: '/line#reverse' } |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '柱状图', |
|
||||||
url: '/bar', |
|
||||||
subs: [ |
|
||||||
{ name: '单条柱状图', url: '/bar#simple' }, |
|
||||||
{ name: '多条柱状图', url: '/bar#multiple' }, |
|
||||||
{ name: '横向柱状图', url: '/bar#reverse' }, |
|
||||||
{ name: '折柱混合图', url: '/bar#mixin' }, |
|
||||||
{ name: '堆叠柱状图', url: '/bar#stack' }, |
|
||||||
{ name: '时间轴柱状图', url: '/bar#timeline' } |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '饼状图', |
|
||||||
url: '/pie', |
|
||||||
subs: [ |
|
||||||
{ name: '简单饼状图', url: '/pie#simple' }, |
|
||||||
{ name: '环形图', url: '/pie#ring' } |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '雷达图', |
|
||||||
url: '/radar', |
|
||||||
subs: [ |
|
||||||
{ name: '简单雷达图', url: '/radar#simple' } |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '漏斗图', |
|
||||||
url: '/funnel', |
|
||||||
subs: [ |
|
||||||
{ name: '简单漏斗图', url: '/funnel#simple' } |
|
||||||
] |
|
||||||
}, |
|
||||||
{ |
|
||||||
name: '气泡图', |
|
||||||
url: '/scatter', |
|
||||||
subs: [ |
|
||||||
{ name: '气泡图', url: '/scatter#simple' } |
|
||||||
] |
|
||||||
} |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
|
|
||||||
</style> |
|
||||||
@ -1,15 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html lang="en"> |
|
||||||
|
|
||||||
<head> |
|
||||||
<meta charset="UTF-8"> |
|
||||||
<meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"> |
|
||||||
<title>demo</title> |
|
||||||
</head> |
|
||||||
|
|
||||||
<body> |
|
||||||
<div id="app"></div> |
|
||||||
<script src="./index.js"></script> |
|
||||||
</body> |
|
||||||
|
|
||||||
</html> |
|
||||||
@ -1,14 +0,0 @@ |
|||||||
import Vue from 'vue' |
|
||||||
import router from './router' |
|
||||||
import App from './app.vue' |
|
||||||
|
|
||||||
new Vue({ |
|
||||||
el: '#app', |
|
||||||
router, |
|
||||||
render: h => h(App), |
|
||||||
mounted () { |
|
||||||
if (this.$route.path === '/') { |
|
||||||
this.$router.push('/line') |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
@ -1,58 +0,0 @@ |
|||||||
export const getTimelineList = () => { |
|
||||||
const list = [] |
|
||||||
for (let i = 2008; i < 2018; i++) { |
|
||||||
let index = 0 |
|
||||||
for (const key of keys) { |
|
||||||
for (const day of days) { |
|
||||||
list.push({ |
|
||||||
timeline: i, |
|
||||||
typeName: key, |
|
||||||
key: day, |
|
||||||
value: Math.floor(Math.random() * 100 + (index + 1) * 100) |
|
||||||
}) |
|
||||||
index++ |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
return list |
|
||||||
} |
|
||||||
|
|
||||||
export const getSimpleList = () => { |
|
||||||
const list = [] |
|
||||||
for (const key of keys) { |
|
||||||
list.push({ |
|
||||||
key: key, |
|
||||||
value: Math.floor(Math.random() * 100) |
|
||||||
}) |
|
||||||
} |
|
||||||
return list |
|
||||||
} |
|
||||||
|
|
||||||
export const getMultipleList = (scatter = false) => { |
|
||||||
const list = [] |
|
||||||
let index = 0 |
|
||||||
for (const key of keys) { |
|
||||||
for (const day of days) { |
|
||||||
if (scatter) { |
|
||||||
list.push({ |
|
||||||
typeName: key, |
|
||||||
text: day, |
|
||||||
x: Math.floor(Math.random() * 100 + (index + 1) * 100), |
|
||||||
y: Math.floor(Math.random() * 100 + (index + 1) * 100), |
|
||||||
size: Math.floor(Math.random() * 1000) |
|
||||||
}) |
|
||||||
} else { |
|
||||||
list.push({ |
|
||||||
typeName: key, |
|
||||||
key: day, |
|
||||||
value: Math.floor(Math.random() * 100 + (index + 1) * 100) |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
index++ |
|
||||||
} |
|
||||||
return list |
|
||||||
} |
|
||||||
|
|
||||||
const keys = ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] |
|
||||||
const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] |
|
||||||
@ -1,494 +0,0 @@ |
|||||||
|
|
||||||
{ |
|
||||||
"color": [ |
|
||||||
"#fc97af", |
|
||||||
"#87f7cf", |
|
||||||
"#f7f494", |
|
||||||
"#72ccff", |
|
||||||
"#f7c5a0", |
|
||||||
"#d4a4eb", |
|
||||||
"#d2f5a6", |
|
||||||
"#76f2f2" |
|
||||||
], |
|
||||||
"backgroundColor": "rgba(41,52,65,1)", |
|
||||||
"textStyle": {}, |
|
||||||
"title": { |
|
||||||
"textStyle": { |
|
||||||
"color": "#ffffff" |
|
||||||
}, |
|
||||||
"subtextStyle": { |
|
||||||
"color": "#dddddd" |
|
||||||
} |
|
||||||
}, |
|
||||||
"line": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": "4" |
|
||||||
} |
|
||||||
}, |
|
||||||
"lineStyle": { |
|
||||||
"normal": { |
|
||||||
"width": "3" |
|
||||||
} |
|
||||||
}, |
|
||||||
"symbolSize": "0", |
|
||||||
"symbol": "circle", |
|
||||||
"smooth": true |
|
||||||
}, |
|
||||||
"radar": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": "4" |
|
||||||
} |
|
||||||
}, |
|
||||||
"lineStyle": { |
|
||||||
"normal": { |
|
||||||
"width": "3" |
|
||||||
} |
|
||||||
}, |
|
||||||
"symbolSize": "0", |
|
||||||
"symbol": "circle", |
|
||||||
"smooth": true |
|
||||||
}, |
|
||||||
"bar": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"barBorderWidth": 0, |
|
||||||
"barBorderColor": "#ccc" |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"barBorderWidth": 0, |
|
||||||
"barBorderColor": "#ccc" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"pie": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"scatter": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"boxplot": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"parallel": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"sankey": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"funnel": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"gauge": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"candlestick": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"color": "#fc97af", |
|
||||||
"color0": "transparent", |
|
||||||
"borderColor": "#fc97af", |
|
||||||
"borderColor0": "#87f7cf", |
|
||||||
"borderWidth": "2" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"graph": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"borderWidth": 0, |
|
||||||
"borderColor": "#ccc" |
|
||||||
} |
|
||||||
}, |
|
||||||
"lineStyle": { |
|
||||||
"normal": { |
|
||||||
"width": "1", |
|
||||||
"color": "#ffffff" |
|
||||||
} |
|
||||||
}, |
|
||||||
"symbolSize": "0", |
|
||||||
"symbol": "circle", |
|
||||||
"smooth": true, |
|
||||||
"color": [ |
|
||||||
"#fc97af", |
|
||||||
"#87f7cf", |
|
||||||
"#f7f494", |
|
||||||
"#72ccff", |
|
||||||
"#f7c5a0", |
|
||||||
"#d4a4eb", |
|
||||||
"#d2f5a6", |
|
||||||
"#76f2f2" |
|
||||||
], |
|
||||||
"label": { |
|
||||||
"normal": { |
|
||||||
"textStyle": { |
|
||||||
"color": "#293441" |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"map": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"areaColor": "#f3f3f3", |
|
||||||
"borderColor": "#999999", |
|
||||||
"borderWidth": 0.5 |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"areaColor": "rgba(255,178,72,1)", |
|
||||||
"borderColor": "#eb8146", |
|
||||||
"borderWidth": 1 |
|
||||||
} |
|
||||||
}, |
|
||||||
"label": { |
|
||||||
"normal": { |
|
||||||
"textStyle": { |
|
||||||
"color": "#893448" |
|
||||||
} |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"textStyle": { |
|
||||||
"color": "rgb(137,52,72)" |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"geo": { |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"areaColor": "#f3f3f3", |
|
||||||
"borderColor": "#999999", |
|
||||||
"borderWidth": 0.5 |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"areaColor": "rgba(255,178,72,1)", |
|
||||||
"borderColor": "#eb8146", |
|
||||||
"borderWidth": 1 |
|
||||||
} |
|
||||||
}, |
|
||||||
"label": { |
|
||||||
"normal": { |
|
||||||
"textStyle": { |
|
||||||
"color": "#893448" |
|
||||||
} |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"textStyle": { |
|
||||||
"color": "rgb(137,52,72)" |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"categoryAxis": { |
|
||||||
"axisLine": { |
|
||||||
"show": true, |
|
||||||
"lineStyle": { |
|
||||||
"color": "#666666" |
|
||||||
} |
|
||||||
}, |
|
||||||
"axisTick": { |
|
||||||
"show": false, |
|
||||||
"lineStyle": { |
|
||||||
"color": "#333" |
|
||||||
} |
|
||||||
}, |
|
||||||
"axisLabel": { |
|
||||||
"show": true, |
|
||||||
"textStyle": { |
|
||||||
"color": "#aaaaaa" |
|
||||||
} |
|
||||||
}, |
|
||||||
"splitLine": { |
|
||||||
"show": false, |
|
||||||
"lineStyle": { |
|
||||||
"color": [ |
|
||||||
"#e6e6e6" |
|
||||||
] |
|
||||||
} |
|
||||||
}, |
|
||||||
"splitArea": { |
|
||||||
"show": false, |
|
||||||
"areaStyle": { |
|
||||||
"color": [ |
|
||||||
"rgba(250,250,250,0.05)", |
|
||||||
"rgba(200,200,200,0.02)" |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"valueAxis": { |
|
||||||
"axisLine": { |
|
||||||
"show": true, |
|
||||||
"lineStyle": { |
|
||||||
"color": "#666666" |
|
||||||
} |
|
||||||
}, |
|
||||||
"axisTick": { |
|
||||||
"show": false, |
|
||||||
"lineStyle": { |
|
||||||
"color": "#333" |
|
||||||
} |
|
||||||
}, |
|
||||||
"axisLabel": { |
|
||||||
"show": true, |
|
||||||
"textStyle": { |
|
||||||
"color": "#aaaaaa" |
|
||||||
} |
|
||||||
}, |
|
||||||
"splitLine": { |
|
||||||
"show": false, |
|
||||||
"lineStyle": { |
|
||||||
"color": [ |
|
||||||
"#e6e6e6" |
|
||||||
] |
|
||||||
} |
|
||||||
}, |
|
||||||
"splitArea": { |
|
||||||
"show": false, |
|
||||||
"areaStyle": { |
|
||||||
"color": [ |
|
||||||
"rgba(250,250,250,0.05)", |
|
||||||
"rgba(200,200,200,0.02)" |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"logAxis": { |
|
||||||
"axisLine": { |
|
||||||
"show": true, |
|
||||||
"lineStyle": { |
|
||||||
"color": "#666666" |
|
||||||
} |
|
||||||
}, |
|
||||||
"axisTick": { |
|
||||||
"show": false, |
|
||||||
"lineStyle": { |
|
||||||
"color": "#333" |
|
||||||
} |
|
||||||
}, |
|
||||||
"axisLabel": { |
|
||||||
"show": true, |
|
||||||
"textStyle": { |
|
||||||
"color": "#aaaaaa" |
|
||||||
} |
|
||||||
}, |
|
||||||
"splitLine": { |
|
||||||
"show": false, |
|
||||||
"lineStyle": { |
|
||||||
"color": [ |
|
||||||
"#e6e6e6" |
|
||||||
] |
|
||||||
} |
|
||||||
}, |
|
||||||
"splitArea": { |
|
||||||
"show": false, |
|
||||||
"areaStyle": { |
|
||||||
"color": [ |
|
||||||
"rgba(250,250,250,0.05)", |
|
||||||
"rgba(200,200,200,0.02)" |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"timeAxis": { |
|
||||||
"axisLine": { |
|
||||||
"show": true, |
|
||||||
"lineStyle": { |
|
||||||
"color": "#666666" |
|
||||||
} |
|
||||||
}, |
|
||||||
"axisTick": { |
|
||||||
"show": false, |
|
||||||
"lineStyle": { |
|
||||||
"color": "#333" |
|
||||||
} |
|
||||||
}, |
|
||||||
"axisLabel": { |
|
||||||
"show": true, |
|
||||||
"textStyle": { |
|
||||||
"color": "#aaaaaa" |
|
||||||
} |
|
||||||
}, |
|
||||||
"splitLine": { |
|
||||||
"show": false, |
|
||||||
"lineStyle": { |
|
||||||
"color": [ |
|
||||||
"#e6e6e6" |
|
||||||
] |
|
||||||
} |
|
||||||
}, |
|
||||||
"splitArea": { |
|
||||||
"show": false, |
|
||||||
"areaStyle": { |
|
||||||
"color": [ |
|
||||||
"rgba(250,250,250,0.05)", |
|
||||||
"rgba(200,200,200,0.02)" |
|
||||||
] |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"toolbox": { |
|
||||||
"iconStyle": { |
|
||||||
"normal": { |
|
||||||
"borderColor": "#999999" |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"borderColor": "#666666" |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"legend": { |
|
||||||
"textStyle": { |
|
||||||
"color": "#999999" |
|
||||||
} |
|
||||||
}, |
|
||||||
"tooltip": { |
|
||||||
"axisPointer": { |
|
||||||
"lineStyle": { |
|
||||||
"color": "#cccccc", |
|
||||||
"width": 1 |
|
||||||
}, |
|
||||||
"crossStyle": { |
|
||||||
"color": "#cccccc", |
|
||||||
"width": 1 |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"timeline": { |
|
||||||
"lineStyle": { |
|
||||||
"color": "#87f7cf", |
|
||||||
"width": 1 |
|
||||||
}, |
|
||||||
"itemStyle": { |
|
||||||
"normal": { |
|
||||||
"color": "#87f7cf", |
|
||||||
"borderWidth": 1 |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"color": "#f7f494" |
|
||||||
} |
|
||||||
}, |
|
||||||
"controlStyle": { |
|
||||||
"normal": { |
|
||||||
"color": "#87f7cf", |
|
||||||
"borderColor": "#87f7cf", |
|
||||||
"borderWidth": 0.5 |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"color": "#87f7cf", |
|
||||||
"borderColor": "#87f7cf", |
|
||||||
"borderWidth": 0.5 |
|
||||||
} |
|
||||||
}, |
|
||||||
"checkpointStyle": { |
|
||||||
"color": "#fc97af", |
|
||||||
"borderColor": "rgba(252,151,175,0.3)" |
|
||||||
}, |
|
||||||
"label": { |
|
||||||
"normal": { |
|
||||||
"textStyle": { |
|
||||||
"color": "#87f7cf" |
|
||||||
} |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"textStyle": { |
|
||||||
"color": "#87f7cf" |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
"visualMap": { |
|
||||||
"color": [ |
|
||||||
"#fc97af", |
|
||||||
"#87f7cf" |
|
||||||
] |
|
||||||
}, |
|
||||||
"dataZoom": { |
|
||||||
"backgroundColor": "rgba(255,255,255,0)", |
|
||||||
"dataBackgroundColor": "rgba(114,204,255,1)", |
|
||||||
"fillerColor": "rgba(114,204,255,0.2)", |
|
||||||
"handleColor": "#72ccff", |
|
||||||
"handleSize": "100%", |
|
||||||
"textStyle": { |
|
||||||
"color": "#333333" |
|
||||||
} |
|
||||||
}, |
|
||||||
"markPoint": { |
|
||||||
"label": { |
|
||||||
"normal": { |
|
||||||
"textStyle": { |
|
||||||
"color": "#293441" |
|
||||||
} |
|
||||||
}, |
|
||||||
"emphasis": { |
|
||||||
"textStyle": { |
|
||||||
"color": "#293441" |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,72 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<h1>柱状图示例</h1> |
|
||||||
<h2 id="simple">单条柱状图</h2> |
|
||||||
<div id="simpleChart" class="chart-container" ></div> |
|
||||||
<h2 id="multiple">多条柱状图</h2> |
|
||||||
<div id="multipleChart" class="chart-container" ></div> |
|
||||||
<h2 id="reverse">横向柱状图</h2> |
|
||||||
<div id="reverseChart" class="chart-container tall" ></div> |
|
||||||
<h2 id="mixin">折柱混合图</h2> |
|
||||||
<div id="mixinChart" class="chart-container tall" ></div> |
|
||||||
<h2 id="stack">堆叠柱状图</h2> |
|
||||||
<div id="stackChart" class="chart-container tall" ></div> |
|
||||||
<h2 id="timeline">时间轴柱状图</h2> |
|
||||||
<div id="timelineChart" class="chart-container tall" ></div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Chart from '../../src/index' |
|
||||||
import { getSimpleList, getMultipleList, getTimelineList } from '../mock/data.js' |
|
||||||
import theme from '../mock/theme.json' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'barCharts', |
|
||||||
mounted () { |
|
||||||
// 注册主题 |
|
||||||
Chart.config({ |
|
||||||
theme: { |
|
||||||
name: 'test', |
|
||||||
data: theme, |
|
||||||
default: true |
|
||||||
} |
|
||||||
}) |
|
||||||
Chart.bar('#simpleChart', getSimpleList()) |
|
||||||
Chart.bar('#multipleChart', getMultipleList(), { theme: 'none' }) |
|
||||||
Chart.bar('#reverseChart', getMultipleList(), { reverseAxis: true }) |
|
||||||
Chart.bar('#mixinChart', getMultipleList(), { |
|
||||||
lineTypes: ['直接访问', '搜索引擎'], |
|
||||||
title: '', |
|
||||||
yAxis: [ |
|
||||||
{ |
|
||||||
type: 'value', |
|
||||||
name: '数值' |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'value', |
|
||||||
name: '温度', |
|
||||||
min: 0, |
|
||||||
max: 25, |
|
||||||
interval: 5, |
|
||||||
axisLabel: { |
|
||||||
formatter: '{value} °C' |
|
||||||
} |
|
||||||
} |
|
||||||
] |
|
||||||
}) |
|
||||||
Chart.bar('#stackChart', getMultipleList(), { |
|
||||||
title: '', |
|
||||||
stack: true |
|
||||||
}) |
|
||||||
Chart.bar('#timelineChart', getTimelineList(), { |
|
||||||
type: 'bar', |
|
||||||
title: '$timeline时间轴柱状图' |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
</style> |
|
||||||
|
|
||||||
@ -1,23 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<h1>漏斗图示例</h1> |
|
||||||
<h2 id="simple">简单漏斗图</h2> |
|
||||||
<div id="simpleChart" class="chart-container tall" ></div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Chart from '../../src/index' |
|
||||||
import { getSimpleList } from '../mock/data.js' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'funnelCharts', |
|
||||||
mounted () { |
|
||||||
Chart.funnel('#simpleChart', getSimpleList()) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
</style> |
|
||||||
|
|
||||||
@ -1,29 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<h1>折线图示例</h1> |
|
||||||
<h2 id="simple">单条折线图</h2> |
|
||||||
<div id="simpleChart" class="chart-container" ></div> |
|
||||||
<h2 id="multiple">多条折线图</h2> |
|
||||||
<div id="multipleChart" class="chart-container" ></div> |
|
||||||
<h2 id="reverse">横向折线图</h2> |
|
||||||
<div id="reverseChart" class="chart-container tall" ></div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { Line } from '../../src/index' |
|
||||||
import { getSimpleList, getMultipleList } from '../mock/data.js' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'lineCharts', |
|
||||||
mounted () { |
|
||||||
Line.init('#simpleChart', getSimpleList()) |
|
||||||
Line.init('#multipleChart', getMultipleList()) |
|
||||||
Line.init('#reverseChart', getMultipleList(), { reverseAxis: true }) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
</style> |
|
||||||
|
|
||||||
@ -1,29 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<h1>饼状图示例</h1> |
|
||||||
<h2 id="simple">简单饼状图</h2> |
|
||||||
<div id="simpleChart" class="chart-container" ></div> |
|
||||||
<h2 id="ring">环形图</h2> |
|
||||||
<div id="ringChart" class="chart-container" ></div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Chart from '../../src/index' |
|
||||||
import { getSimpleList } from '../mock/data.js' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'pieCharts', |
|
||||||
mounted () { |
|
||||||
Chart.pie('#simpleChart', getSimpleList()) |
|
||||||
Chart.pie('#ringChart', getSimpleList(), { |
|
||||||
title: '环形图', |
|
||||||
ring: true |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
</style> |
|
||||||
|
|
||||||
@ -1,23 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<h1>雷达图示例</h1> |
|
||||||
<h2 id="simple">简单雷达图</h2> |
|
||||||
<div id="simpleChart" class="chart-container tall" ></div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Chart from '../../src/index' |
|
||||||
import { getMultipleList } from '../mock/data.js' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'radarCharts', |
|
||||||
mounted () { |
|
||||||
Chart.radar('#simpleChart', getMultipleList()) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
</style> |
|
||||||
|
|
||||||
@ -1,23 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<h1>气泡图示例</h1> |
|
||||||
<h2 id="simple">气泡图</h2> |
|
||||||
<div id="simpleChart" class="chart-container tall" ></div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import Chart from '../../src/index' |
|
||||||
import { getMultipleList } from '../mock/data.js' |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'scatterCharts', |
|
||||||
mounted () { |
|
||||||
Chart.scatter('#simpleChart', getMultipleList(true)) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
</style> |
|
||||||
|
|
||||||
@ -1,53 +0,0 @@ |
|||||||
import Vue from 'vue' |
|
||||||
import Router from 'vue-router' |
|
||||||
import Line from '../packages/line' |
|
||||||
import Bar from '../packages/bar' |
|
||||||
import Pie from '../packages/pie' |
|
||||||
import Radar from '../packages/radar' |
|
||||||
import Funnel from '../packages/funnel' |
|
||||||
import Scatter from '../packages/scatter' |
|
||||||
|
|
||||||
Vue.use(Router) |
|
||||||
|
|
||||||
const router = new Router({ |
|
||||||
mode: 'history', |
|
||||||
routes: [ |
|
||||||
{ |
|
||||||
path: '/line', |
|
||||||
component: Line |
|
||||||
}, |
|
||||||
{ |
|
||||||
path: '/bar', |
|
||||||
component: Bar |
|
||||||
}, |
|
||||||
{ |
|
||||||
path: '/pie', |
|
||||||
component: Pie |
|
||||||
}, |
|
||||||
{ |
|
||||||
path: '/radar', |
|
||||||
component: Radar |
|
||||||
}, |
|
||||||
{ |
|
||||||
path: '/funnel', |
|
||||||
component: Funnel |
|
||||||
}, |
|
||||||
{ |
|
||||||
path: '/scatter', |
|
||||||
component: Scatter |
|
||||||
} |
|
||||||
] |
|
||||||
}) |
|
||||||
|
|
||||||
router.afterEach((to, from) => { |
|
||||||
if (to.hash) { |
|
||||||
const target = document.querySelector(to.hash) |
|
||||||
if (target) { |
|
||||||
window.scrollTo(0, target.offsetTop) |
|
||||||
} |
|
||||||
} else { |
|
||||||
window.scrollTo(0, 0) |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
export default router |
|
||||||
@ -1,77 +0,0 @@ |
|||||||
$leftWidth: 200px; |
|
||||||
$leftPaddingX: 30px; |
|
||||||
|
|
||||||
body { |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.app-container { |
|
||||||
.left { |
|
||||||
position: fixed; |
|
||||||
left: 0; |
|
||||||
top: 0; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
width: $leftWidth; |
|
||||||
min-height: 500px; |
|
||||||
padding: 20px $leftPaddingX; |
|
||||||
.sidebar { |
|
||||||
padding: 0; |
|
||||||
list-style-type: none; |
|
||||||
a { |
|
||||||
display: block; |
|
||||||
text-decoration: none; |
|
||||||
color: #35495e; |
|
||||||
padding: 5px 10px; |
|
||||||
border-radius: 4px; |
|
||||||
letter-spacing: .25px; |
|
||||||
} |
|
||||||
.router-link-active { |
|
||||||
color: #fff; |
|
||||||
background-color: #41b883; |
|
||||||
} |
|
||||||
.router-link-active + .sub { |
|
||||||
display: block; |
|
||||||
} |
|
||||||
li { |
|
||||||
font-size: 16px; |
|
||||||
.sub { |
|
||||||
display: none; |
|
||||||
padding-left: 20px; |
|
||||||
list-style-type: none; |
|
||||||
li { |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
.router-link-active { |
|
||||||
color: #41b883; |
|
||||||
background: #fff; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.right { |
|
||||||
margin-left: $leftWidth + $leftPaddingX * 2; |
|
||||||
border-left: 1px solid #c6c6c6; |
|
||||||
h1 { |
|
||||||
margin: 0; |
|
||||||
padding: 30px; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
h2 { |
|
||||||
margin: 0; |
|
||||||
padding: 20px; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
.chart-container { |
|
||||||
width: 80%; |
|
||||||
height: 300px; |
|
||||||
margin: auto; |
|
||||||
padding-bottom: 50px; |
|
||||||
} |
|
||||||
.tall { |
|
||||||
height: 600px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,65 +0,0 @@ |
|||||||
{ |
|
||||||
"name": "@analysys/ana-charts", |
|
||||||
"version": "1.0.4", |
|
||||||
"main": "dist/index.js", |
|
||||||
"repository": "git@git.analysys.cn:fss-modules/echarts-tooltip.git", |
|
||||||
"author": "liuxin <liuxin@analysys.com.cn>", |
|
||||||
"license": "MIT", |
|
||||||
"scripts": { |
|
||||||
"dev": "npm run clean && parcel ./example/index.html -p 3000", |
|
||||||
"build": "npm run clean && cross-env NODE_ENV=production webpack --config ./build/webpack.config.prod.js", |
|
||||||
"lint": "standard \"**/*.{js,vue}\"", |
|
||||||
"lint:fix": "standard \"**/*.{js,vue}\" --fix", |
|
||||||
"prepublishOnly": "npm run build", |
|
||||||
"clean": "rimraf dist", |
|
||||||
"start": "npm run dev", |
|
||||||
"test": "npm run lint" |
|
||||||
}, |
|
||||||
"dependencies": { |
|
||||||
"echarts": "^4.1.0" |
|
||||||
}, |
|
||||||
"devDependencies": { |
|
||||||
"@fedor/standard": "^1.0.3", |
|
||||||
"@vue/component-compiler-utils": "^2.2.0", |
|
||||||
"autoprefixer": "^9.1.3", |
|
||||||
"babel-core": "^6.26.3", |
|
||||||
"babel-eslint": "^8.2.6", |
|
||||||
"babel-loader": "^7.1.1", |
|
||||||
"babel-plugin-transform-object-rest-spread": "^6.26.0", |
|
||||||
"babel-preset-env": "^1.7.0", |
|
||||||
"cross-env": "^5.2.0", |
|
||||||
"css-loader": "^0.28.8", |
|
||||||
"cssnano": "^4.1.0", |
|
||||||
"extract-text-webpack-plugin": "^3.0.2", |
|
||||||
"ghooks": "^2.0.4", |
|
||||||
"node-sass": "^4.9.3", |
|
||||||
"optimize-css-assets-webpack-plugin": "3.2.0", |
|
||||||
"postcss-loader": "^3.0.0", |
|
||||||
"rimraf": "^2.6.2", |
|
||||||
"sass-loader": "^7.1.0", |
|
||||||
"uglifyjs-webpack-plugin": "^1.2.7", |
|
||||||
"vue": "^2.5.17", |
|
||||||
"vue-hot-reload-api": "^2.3.0", |
|
||||||
"vue-loader": "^15.4.1", |
|
||||||
"vue-router": "^3.0.1", |
|
||||||
"vue-style-loader": "^4.1.1", |
|
||||||
"vue-template-compiler": "^2.5.17", |
|
||||||
"webpack": "^3.12.0", |
|
||||||
"webpack-merge": "^4.1.4" |
|
||||||
}, |
|
||||||
"standard": { |
|
||||||
"parser": "babel-eslint", |
|
||||||
"ignore": [ |
|
||||||
"src/font/*", |
|
||||||
"dist/**", |
|
||||||
"test/coverage/**", |
|
||||||
"karma.conf.js", |
|
||||||
"postcss.config.js" |
|
||||||
] |
|
||||||
}, |
|
||||||
"config": { |
|
||||||
"ghooks": { |
|
||||||
"pre-commit": "npm run lint" |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
Loading…
Reference in new issue