Skip to content

D
datax-cloud
Commit b4dcc1c4 by yuwei
Options

项目初始化

parent dff62142
Showing with 8237 additions and 423 deletions
datax-ui/package.json
...@@ -18,6 +18,8 @@ ...@@ -18,6 +18,8 @@
"axios": "0.18.1", "axios": "0.18.1",
"core-js": "3.6.5", "core-js": "3.6.5",
"echarts": "^4.8.0", "echarts": "^4.8.0",
"echarts-liquidfill": "^2.0.6",
"echarts-wordcloud": "^1.1.3",
"element-ui": "2.13.2", "element-ui": "2.13.2",
"good-storage": "^1.1.1", "good-storage": "^1.1.1",
"html2canvas": "^1.0.0-rc.7", "html2canvas": "^1.0.0-rc.7",
......
datax-ui/src/components/PivotTable/index.vue
...@@ -33,12 +33,7 @@ ...@@ -33,12 +33,7 @@
</template> </template>
<script> <script>
import { import { mergeBaseInfo, convertPathToMap, getHeightByCount, SEPARATOR } from '@/utils/visual-chart'
mergeBaseInfo,
convertPathToMap,
getHeightByCount
} from './utils'
import { SEPARATOR } from './utils/constants'
export default { export default {
name: 'PivotTable', name: 'PivotTable',
...@@ -278,8 +273,8 @@ export default { ...@@ -278,8 +273,8 @@ export default {
// console.log('colConditions', colConditions) // console.log('colConditions', colConditions)
// console.log('rowConditions', rowConditions) // console.log('rowConditions', rowConditions)
// 针对没传入行或列的处理 // 针对没传入行或列的处理
// !colConditions.length && colConditions.push({}); !colConditions.length && colConditions.push({})
// !rowConditions.length && rowConditions.push({}); !rowConditions.length && rowConditions.push({})
// 过滤数据, 遍历行以及遍历行对应的列 // 过滤数据, 遍历行以及遍历行对应的列
return rowConditions.map((rowCondition, rowConditionIndex) => { return rowConditions.map((rowCondition, rowConditionIndex) => {
const _data = colConditions.map((colCondition, colConditionIndex) => { const _data = colConditions.map((colCondition, colConditionIndex) => {
...@@ -311,8 +306,7 @@ export default { ...@@ -311,8 +306,7 @@ export default {
if (isEmptyValues) { if (isEmptyValues) {
Object.assign(cellData, { value: '' }) Object.assign(cellData, { value: '' })
} else { } else {
// 从 props.values 中找出对应的值 handle // 从 props.values 中找出对应的值
// 注意：this.localValues 通过 JSON.xxx 序列化后，handle 会被忽略
const _value = this.values.find(({ key }) => key === conditions.value) const _value = this.values.find(({ key }) => key === conditions.value)
Object.assign(cellData, { value: _value && _value.key ? this._reduceValue(filterData, _value.key) : '' }) Object.assign(cellData, { value: _value && _value.key ? this._reduceValue(filterData, _value.key) : '' })
} }
...@@ -330,12 +324,12 @@ export default { ...@@ -330,12 +324,12 @@ export default {
this.init() this.init()
} }
}, },
created: function() { created() {
this.init() this.init()
}, },
methods: { methods: {
init() { init() {
if (this.rows.length || this.columns.length || this.values) { if (this.rows.length || this.columns.length || this.values.length) {
this.handleDataClone() this.handleDataClone()
this.setValuesToColAndRow() this.setValuesToColAndRow()
this.handleCalcData() this.handleCalcData()
...@@ -402,11 +396,11 @@ export default { ...@@ -402,11 +396,11 @@ export default {
...this.localColumns.map(({ values }) => values) ...this.localColumns.map(({ values }) => values)
) )
const _colKeys = this.localColumns.map(({ key }) => key) const _colKeys = this.localColumns.map(({ key }) => key)
// conditions of col head // conditions of col-head
const colConditions = convertPathToMap(_colPaths, _colKeys) const colConditions = convertPathToMap(_colPaths, _colKeys)
// conditions of row-head // conditions of row-head
const rowConditions = convertPathToMap(_rowPaths, _rowKeys) const rowConditions = convertPathToMap(_rowPaths, _rowKeys)
// Note: if there are no props.rows or props.column, push an empty object // Note: if there are no props.rows or props.columns, push an empty object
!colConditions.length && colConditions.push({}) !colConditions.length && colConditions.push({})
!rowConditions.length && rowConditions.push({}) !rowConditions.length && rowConditions.push({})
// draw data // draw data
...@@ -423,7 +417,7 @@ export default { ...@@ -423,7 +417,7 @@ export default {
const isEmptyCell = this.localRows.length && this.localColumns.length && !this.localValues.length const isEmptyCell = this.localRows.length && this.localColumns.length && !this.localValues.length
const _values = {} const _values = {}
// 多个值，多条数据 // 多个值，多条数据
this.values.forEach(({ key, handle }) => { this.values.forEach(({ key }) => {
_values[key] = isEmptyCell ? '' : this._reduceValue(filterData, key) _values[key] = isEmptyCell ? '' : this._reduceValue(filterData, key)
}) })
return Object.assign({}, conditions, _values) return Object.assign({}, conditions, _values)
......
datax-ui/src/components/PivotTable/utils/constants.js deleted 100644 → 0
export const CELL_MIN_HEIGHT = 38
export const SEPARATOR = ':'
datax-ui/src/components/PivotTable/utils/convert_path_to_map.js deleted 100644 → 0
import { SEPARATOR } from './constants'
// Convert path to object
export default (paths, keys) => {
return paths.map(path => {
const pathArr = path.split(SEPARATOR)
const obj = {}
keys.forEach((key, index) => {
if (pathArr[index]) {
obj[key] = pathArr[index]
}
})
return obj
})
}
datax-ui/src/components/PivotTable/utils/get_height_by_count.js deleted 100644 → 0
import { CELL_MIN_HEIGHT } from './constants'
export default count => count * CELL_MIN_HEIGHT + 'px'
datax-ui/src/components/PivotTable/utils/index.js deleted 100644 → 0
import mergeBaseInfo from './merge_base_info'
import convertPathToMap from './convert_path_to_map'
import getHeightByCount from './get_height_by_count'
export {
mergeBaseInfo,
convertPathToMap,
getHeightByCount
}
datax-ui/src/components/PivotTable/utils/merge_base_info.js deleted 100644 → 0
// merge base info
export default function mergeBaseInfo(info = {}) {
const _baseCellInfo = {
value: '',
x: 0,
y: 0,
colspan: 1,
rowspan: 1
}
return Object.assign({}, _baseCellInfo, info)
}
datax-ui/src/utils/visual-chart.js
const chartTypes = [ export const chartTypes = [
{ {
name: '表格', value: 'table', icon: 'chart_table', name: '表格', value: 'table', icon: 'chart_table',
status: true, status: true,
component: 'ChartTable', component: 'ChartTable',
rule: { rule: {
text: '1个或多个 行维;0个或多个 列维;1个或多个 指标', text: '0个或多个 行维;0个或多个 列维;1个或多个 指标',
check(rows, columns, measures) { check(rows, columns, measures) {
return rows.length >= 1 && columns.length >= 0 && measures.length >= 1 return rows.length >= 0 && columns.length >= 0 && measures.length >= 1
} }
} }
}, },
...@@ -44,17 +44,6 @@ const chartTypes = [ ...@@ -44,17 +44,6 @@ const chartTypes = [
} }
}, },
{ {
name: '指标卡', value: 'kpi', icon: 'chart_kpi',
status: true,
component: 'ChartKpi',
rule: {
text: '0 行维;0 列维;1 指标',
check(rows, columns, measures) {
return rows.length === 0 && columns.length === 0 && measures.length === 1
}
}
},
{
name: '雷达图', value: 'radar', icon: 'chart_radar', name: '雷达图', value: 'radar', icon: 'chart_radar',
status: true, status: true,
component: 'ChartRadar', component: 'ChartRadar',
...@@ -66,17 +55,6 @@ const chartTypes = [ ...@@ -66,17 +55,6 @@ const chartTypes = [
} }
}, },
{ {
name: '漏斗图', value: 'funnel', icon: 'chart_funnel',
status: true,
component: 'ChartFunnel',
rule: {
text: '0个或多个 行维;0 列维;1个或多个 指标',
check(rows, columns, measures) {
return rows.length >= 0 && columns.length === 0 && measures.length >= 1
}
}
},
{
name: '散点图', value: 'scatter', icon: 'chart_scatter', name: '散点图', value: 'scatter', icon: 'chart_scatter',
status: true, status: true,
component: 'ChartScatter', component: 'ChartScatter',
...@@ -88,13 +66,13 @@ const chartTypes = [ ...@@ -88,13 +66,13 @@ const chartTypes = [
} }
}, },
{ {
name: '仪表盘', value: 'gauge', icon: 'chart_gauge', name: '漏斗图', value: 'funnel', icon: 'chart_funnel',
status: true, status: true,
component: 'ChartGauge', component: 'ChartFunnel',
rule: { rule: {
text: '0 行维;0 列维;1 指标', text: '0个或多个 行维;0 列维;1个或多个 指标',
check(rows, columns, measures) { check(rows, columns, measures) {
return rows.length === 0 && columns.length === 0 && measures.length === 1 return rows.length >= 0 && columns.length === 0 && measures.length >= 1
} }
} }
}, },
...@@ -110,28 +88,6 @@ const chartTypes = [ ...@@ -110,28 +88,6 @@ const chartTypes = [
} }
}, },
{ {
name: '词云图', value: 'wordcloud', icon: 'chart_wordcloud',
status: true,
component: 'ChartWordcloud',
rule: {
text: '1个或多个 行维;0 列维;1 指标',
check(rows, columns, measures) {
return rows.length >= 1 && columns.length === 0 && measures.length === 1
}
}
},
{
name: '水球图', value: 'liquidfill', icon: 'chart_liquidfill',
status: true,
component: 'ChartLiquidfill',
rule: {
text: '0 行维;0 列维;1 指标',
check(rows, columns, measures) {
return rows.length === 0 && columns.length === 0 && measures.length === 1
}
}
},
{
name: '桑基图', value: 'sankey', icon: 'chart_sankey', name: '桑基图', value: 'sankey', icon: 'chart_sankey',
status: true, status: true,
component: 'ChartSankey', component: 'ChartSankey',
...@@ -154,64 +110,110 @@ const chartTypes = [ ...@@ -154,64 +110,110 @@ const chartTypes = [
} }
}, },
{ {
name: '树图', value: 'tree', icon: 'chart_tree', name: '仪表盘', value: 'gauge', icon: 'chart_gauge',
status: false, status: true,
component: 'ChartTree', component: 'ChartGauge',
rule: {
text: '0 行维;0 列维;0 指标',
check(rows, columns, measures) {
return rows.length === 0 && columns.length === 0 && measures.length === 0
}
}
},
{
name: '环形图', value: 'donut', icon: 'chart_donut',
status: false,
component: 'ChartDonut',
rule: { rule: {
text: '0 行维;0 列维;0 指标', text: '0 行维;0 列维;1 指标',
check(rows, columns, measures) { check(rows, columns, measures) {
return rows.length === 0 && columns.length === 0 && measures.length === 0 return rows.length === 0 && columns.length === 0 && measures.length === 1
} }
} }
}, },
// {
// name: '指标卡', value: 'kpi', icon: 'chart_kpi',
// status: true,
// component: 'ChartKpi',
// rule: {
// text: '0 行维;0 列维;1 指标',
// check(rows, columns, measures) {
// return rows.length === 0 && columns.length === 0 && measures.length === 1
// }
// }
// },
{ {
name: '旭日图', value: 'sunburst', icon: 'chart_sunburst', name: '水球图', value: 'liquidFill', icon: 'chart_liquidfill',
status: false, status: true,
component: 'ChartSunburst', component: 'ChartLiquidFill',
rule: { rule: {
text: '0 行维;0 列维;0 指标', text: '0 行维;0 列维;1 指标',
check(rows, columns, measures) { check(rows, columns, measures) {
return rows.length === 0 && columns.length === 0 && measures.length === 0 return rows.length === 0 && columns.length === 0 && measures.length === 1
} }
} }
}, },
{ {
name: '极区图', value: 'polar', icon: 'chart_polar', name: '词云图', value: 'wordCloud', icon: 'chart_wordcloud',
status: false, status: true,
component: 'ChartPolar', component: 'ChartWordCloud',
rule: { rule: {
text: '0 行维;0 列维;0 指标', text: '1个或多个 行维;0 列维;1 指标',
check(rows, columns, measures) { check(rows, columns, measures) {
return rows.length === 0 && columns.length === 0 && measures.length === 0 return rows.length >= 1 && columns.length === 0 && measures.length === 1
} }
} }
} }
// {
// name: '树图', value: 'tree', icon: 'chart_tree',
// status: false,
// component: 'ChartTree',
// rule: {
// text: '0 行维;0 列维;0 指标',
// check(rows, columns, measures) {
// return rows.length === 0 && columns.length === 0 && measures.length === 0
// }
// }
// },
// {
// name: '环形图', value: 'donut', icon: 'chart_donut',
// status: false,
// component: 'ChartDonut',
// rule: {
// text: '0 行维;0 列维;0 指标',
// check(rows, columns, measures) {
// return rows.length === 0 && columns.length === 0 && measures.length === 0
// }
// }
// },
// {
// name: '旭日图', value: 'sunburst', icon: 'chart_sunburst',
// status: false,
// component: 'ChartSunburst',
// rule: {
// text: '0 行维;0 列维;0 指标',
// check(rows, columns, measures) {
// return rows.length === 0 && columns.length === 0 && measures.length === 0
// }
// }
// },
// {
// name: '极区图', value: 'polar', icon: 'chart_polar',
// status: false,
// component: 'ChartPolar',
// rule: {
// text: '0 行维;0 列维;0 指标',
// check(rows, columns, measures) {
// return rows.length === 0 && columns.length === 0 && measures.length === 0
// }
// }
// }
] ]
const chartOptions = { export const chartOptions = {
// 标题组件 // 标题组件
title: { title: {
// 是否显示 // 是否显示
show: true, show: false,
// 主标题文本 // 主标题文本
text: '', text: '',
// 副标题文本 // 副标题文本
subtext: '', subtext: '',
// 离左侧的距离 // 离左侧的距离
left: 0, left: '0%',
leftVal: 0,
// 离上侧的距离 // 离上侧的距离
top: 0, top: '0%',
topVal: 0,
// 主标题样式 // 主标题样式
textStyle: { textStyle: {
// 主标题字体大小 // 主标题字体大小
...@@ -234,19 +236,84 @@ const chartOptions = { ...@@ -234,19 +236,84 @@ const chartOptions = {
// 图例的类型 'plain':普通图例 'scroll':可滚动翻页的图例 // 图例的类型 'plain':普通图例 'scroll':可滚动翻页的图例
type: 'plain', type: 'plain',
// 离左侧的距离 // 离左侧的距离
left: 0, left: '0%',
leftVal: 0,
// 离上侧的距离 // 离上侧的距离
top: 0, top: '0%',
topVal: 0,
// 列表的布局朝向(横竖,可选：'horizontal','vertical') // 列表的布局朝向(横竖,可选：'horizontal','vertical')
orient: 'horizontal' orient: 'horizontal'
},
// 提示框组件
tooltip: {
// 是否显示
show: true,
// 触发类型
trigger: 'item'
} }
} }
export { chartTypes, chartOptions } export const chartThemes = ['default', 'vintage', 'westeros', 'wonderland',
'chalk', 'macarons', 'shine', 'dark', 'essos', 'walden', 'infographic', 'roma', 'purple-passion']
export const chartSeriesTypes = {
'line': [
{ name: '基础折线图', value: 'line' },
{ name: '区域折线图', value: 'arealine' },
{ name: '堆叠折线图', value: 'stackline' },
{ name: '堆叠区域图', value: 'stackarealine' },
{ name: '百分比堆叠区域图', value: 'percentagestackarealine' }
],
'bar': [
{ name: '基础柱状图', value: 'bar' },
{ name: '堆叠柱状图', value: 'stackbar' },
{ name: '百分比堆叠柱状图', value: 'percentagestackbar' },
{ name: '条形图', value: 'barchart' },
{ name: '堆叠条形图', value: 'stackbarchart' },
{ name: '百分比堆叠条形图', value: 'percentagestackbarchart' }
],
'pie': [
{ name: '基础饼图', value: 'pie' },
{ name: '南丁格尔玫瑰图（半径模式）', value: 'roseradiuspie' },
{ name: '南丁格尔玫瑰图（面积模式）', value: 'roseareapie' },
{ name: '环形图', value: 'donutpie' }
],
'radar': [
{ name: '基础雷达图', value: 'radar' },
{ name: '区域雷达图', value: 'arearadar' }
],
'liquidFill': [
{ name: '圆形', value: 'circle' },
{ name: '矩形', value: 'rect' },
{ name: '圆矩形', value: 'roundRect' },
{ name: '三角形', value: 'triangle' },
{ name: '菱形', value: 'diamond' },
{ name: '大头针形', value: 'pin' },
{ name: '箭头形', value: 'arrow' }
]
}
export const CELL_MIN_HEIGHT = 38
export const SEPARATOR = ':'
export function convertPathToMap(paths, keys) {
return paths.map(path => {
const pathArr = path.split(SEPARATOR)
const obj = {}
keys.forEach((key, index) => {
if (pathArr[index]) {
obj[key] = pathArr[index]
}
})
return obj
})
}
export function mergeBaseInfo(info = {}) {
const _baseCellInfo = {
value: '',
x: 0,
y: 0,
colspan: 1,
rowspan: 1
}
return Object.assign({}, _baseCellInfo, info)
}
export function getHeightByCount(count) {
return count * CELL_MIN_HEIGHT + 'px'
}
datax-ui/src/views/login/index.vue
...@@ -43,8 +43,8 @@ export default { ...@@ -43,8 +43,8 @@ export default {
return { return {
background: background, background: background,
loginForm: { loginForm: {
username: '', username: 'admin',
password: '' password: '123456'
}, },
loginRules: { loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }], username: [{ required: true, trigger: 'blur', validator: validateUsername }],
......
datax-ui/src/views/visual/datachart/DataChartBuild.vue
...@@ -130,7 +130,21 @@ ...@@ -130,7 +130,21 @@
<el-tab-pane label="图表配置"> <el-tab-pane label="图表配置">
<div class="widget-right-pane-config"> <div class="widget-right-pane-config">
<el-collapse v-model="collapsActiveNames" accordion> <el-collapse v-model="collapsActiveNames" accordion>
<el-collapse-item title="标题组件" name="1"> <el-collapse-item title="图表主题" name="1">
<el-form size="mini">
<el-form-item>
<el-select v-model="widget.theme">
<el-option
v-for="(theme, index) in chartThemes"
:key="index"
:label="theme"
:value="theme"
/>
</el-select>
</el-form-item>
</el-form>
</el-collapse-item>
<el-collapse-item title="标题组件" name="2">
<el-form size="mini"> <el-form size="mini">
<el-form-item label="是否显示"> <el-form-item label="是否显示">
<el-switch v-model="widget.options.title.show" active-text="开启" /> <el-switch v-model="widget.options.title.show" active-text="开启" />
...@@ -142,10 +156,10 @@ ...@@ -142,10 +156,10 @@
<el-input v-model="widget.options.title.subtext" /> <el-input v-model="widget.options.title.subtext" />
</el-form-item> </el-form-item>
<el-form-item label="离左侧的距离"> <el-form-item label="离左侧的距离">
<el-slider v-model="widget.options.title.left" /> <el-slider v-model="widget.options.title.leftVal" @change="widget.options.title.left = widget.options.title.leftVal + '%'" />
</el-form-item> </el-form-item>
<el-form-item label="离上侧的距离"> <el-form-item label="离上侧的距离">
<el-slider v-model="widget.options.title.top" /> <el-slider v-model="widget.options.title.topVal" @change="widget.options.title.top = widget.options.title.topVal + '%'" />
</el-form-item> </el-form-item>
<el-form-item label="主标题字体大小"> <el-form-item label="主标题字体大小">
<el-input-number v-model="widget.options.title.textStyle.fontSize" :min="1" :max="30" /> <el-input-number v-model="widget.options.title.textStyle.fontSize" :min="1" :max="30" />
...@@ -161,7 +175,7 @@ ...@@ -161,7 +175,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-collapse-item> </el-collapse-item>
<el-collapse-item title="图例组件" name="2"> <el-collapse-item title="图例组件" name="3">
<el-form size="mini"> <el-form size="mini">
<el-form-item label="是否显示"> <el-form-item label="是否显示">
<el-switch v-model="widget.options.legend.show" active-text="开启" /> <el-switch v-model="widget.options.legend.show" active-text="开启" />
...@@ -173,10 +187,10 @@ ...@@ -173,10 +187,10 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="离左侧的距离"> <el-form-item label="离左侧的距离">
<el-slider v-model="widget.options.legend.left" /> <el-slider v-model="widget.options.legend.leftVal" @change="widget.options.legend.left = widget.options.legend.leftVal + '%'" />
</el-form-item> </el-form-item>
<el-form-item label="离上侧的距离"> <el-form-item label="离上侧的距离">
<el-slider v-model="widget.options.legend.top" /> <el-slider v-model="widget.options.legend.topVal" @change="widget.options.legend.top = widget.options.legend.topVal + '%'" />
</el-form-item> </el-form-item>
<el-form-item label="列表的布局朝向"> <el-form-item label="列表的布局朝向">
<el-select v-model="widget.options.legend.orient"> <el-select v-model="widget.options.legend.orient">
...@@ -186,6 +200,20 @@ ...@@ -186,6 +200,20 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-collapse-item> </el-collapse-item>
<el-collapse-item title="数据系列" name="4">
<el-form size="mini">
<el-form-item>
<el-select v-model="widget.seriesType">
<el-option
v-for="(item, index) in chartSeriesTypes[widget.chartType]"
:key="index"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse> </el-collapse>
</div> </div>
</el-tab-pane> </el-tab-pane>
...@@ -198,7 +226,7 @@ ...@@ -198,7 +226,7 @@
import { getDataChart, buildDataChart, dataParser } from '@/api/visual/datachart' import { getDataChart, buildDataChart, dataParser } from '@/api/visual/datachart'
import { getDataSet, listDataSet } from '@/api/visual/dataset' import { getDataSet, listDataSet } from '@/api/visual/dataset'
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import { chartTypes, chartOptions } from '@/utils/visual-chart' import { chartTypes, chartThemes, chartSeriesTypes, chartOptions } from '@/utils/visual-chart'
import ChartPanel from './components/ChartPanel' import ChartPanel from './components/ChartPanel'
import html2canvas from 'html2canvas' import html2canvas from 'html2canvas'
...@@ -220,13 +248,19 @@ export default { ...@@ -220,13 +248,19 @@ export default {
// 后期添加条件过滤 // 后期添加条件过滤
filters: [], filters: [],
// 图表配置项 // 图表配置项
options: chartOptions options: chartOptions,
// 图表主题
theme: 'default',
// 系列类型
seriesType: undefined
}, },
dataSetOptions: [], dataSetOptions: [],
dataSet: {}, dataSet: {},
dimensions: [], dimensions: [],
measures: [], measures: [],
chartTypes, chartTypes,
chartThemes,
chartSeriesTypes,
chartData: { chartData: {
data: [], data: [],
sql: '' sql: ''
...@@ -339,6 +373,7 @@ export default { ...@@ -339,6 +373,7 @@ export default {
}, },
changeChart(chart) { changeChart(chart) {
this.widget.chartType = chart this.widget.chartType = chart
this.widget.seriesType = ((this.chartSeriesTypes[this.widget.chartType] || [])[0] || {}).value || undefined
}, },
generatorImage() { generatorImage() {
html2canvas(document.getElementById('chartPanel')).then(canvas => { html2canvas(document.getElementById('chartPanel')).then(canvas => {
......
datax-ui/src/views/visual/datachart/components/ChartPanel.vue
<template> <template>
<component :is="currentChart.component" :data="chartData" :chart-schema="chartSchema" :chart-style="chartStyle" /> <component
:is="currentChart.component"
:data="chartData"
:rows="rows"
:columns="columns"
:values="values"
:chart-type="currentChart.value"
:chart-theme="chartTheme"
:chart-option="chartOption"
:chart-series-type="chartSeriesType"
:chart-style="chartStyle"
/>
</template> </template>
<script> <script>
...@@ -14,8 +25,8 @@ import ChartFunnel from './widgets/ChartFunnel' ...@@ -14,8 +25,8 @@ import ChartFunnel from './widgets/ChartFunnel'
import ChartScatter from './widgets/ChartScatter' import ChartScatter from './widgets/ChartScatter'
import ChartGauge from './widgets/ChartGauge' import ChartGauge from './widgets/ChartGauge'
import ChartTreemap from './widgets/ChartTreemap' import ChartTreemap from './widgets/ChartTreemap'
import ChartWordcloud from './widgets/ChartWordcloud' import ChartWordCloud from './widgets/ChartWordCloud'
import ChartLiquidfill from './widgets/ChartLiquidfill' import ChartLiquidFill from './widgets/ChartLiquidFill'
import ChartSankey from './widgets/ChartSankey' import ChartSankey from './widgets/ChartSankey'
import ChartGeo from './widgets/ChartGeo' import ChartGeo from './widgets/ChartGeo'
import ChartTree from './widgets/ChartTree' import ChartTree from './widgets/ChartTree'
...@@ -28,7 +39,7 @@ export default { ...@@ -28,7 +39,7 @@ export default {
components: { components: {
ChartTable, ChartLine, ChartBar, ChartPie, ChartTable, ChartLine, ChartBar, ChartPie,
ChartKpi, ChartRadar, ChartFunnel, ChartScatter, ChartKpi, ChartRadar, ChartFunnel, ChartScatter,
ChartGauge, ChartTreemap, ChartWordcloud, ChartLiquidfill, ChartGauge, ChartTreemap, ChartWordCloud, ChartLiquidFill,
ChartSankey, ChartGeo, ChartTree, ChartDonut, ChartSankey, ChartGeo, ChartTree, ChartDonut,
ChartSunburst, ChartPolar ChartSunburst, ChartPolar
}, },
...@@ -54,6 +65,39 @@ export default { ...@@ -54,6 +65,39 @@ export default {
computed: { computed: {
currentChart() { currentChart() {
return chartTypes.find(item => item.value === this.chartSchema.chartType) return chartTypes.find(item => item.value === this.chartSchema.chartType)
},
rows() {
return this.chartSchema.rows.map((row, index, arr) => {
return {
key: `${row.col}`,
label: `${row.col}`
}
}) || []
},
columns() {
return this.chartSchema.columns.map((column, index, arr) => {
return {
key: `${column.col}`,
label: `${column.col}`
}
}) || []
},
values() {
return this.chartSchema.measures.map((measure, index, arr) => {
return {
key: `${measure.col}`,
label: `${measure.col}`
}
}) || []
},
chartTheme() {
return this.chartSchema.theme || 'default'
},
chartSeriesType() {
return this.chartSchema.seriesType || undefined
},
chartOption() {
return this.chartSchema.options || {}
} }
} }
} }
......
datax-ui/src/views/visual/datachart/components/widgets/ChartBar.vue
...@@ -3,22 +3,50 @@ ...@@ -3,22 +3,50 @@
</template> </template>
<script> <script>
import echarts from 'echarts'
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
export default { export default {
name: 'ChartBar', name: 'ChartBar',
props: { props: {
data: { data: {
type: Array, type: Array,
required: true, required: true,
default: () => { default: () => []
return []
}
}, },
chartSchema: { rows: {
type: Object, type: Array,
required: true, required: true,
default: () => { default: () => []
return {} },
} columns: {
type: Array,
required: true,
default: () => []
},
values: {
type: Array,
required: true,
default: () => []
},
chartType: {
type: String,
required: true
},
chartTheme: {
type: String,
require: true,
default: 'default'
},
chartSeriesType: {
type: String,
require: true,
default: ''
},
chartOption: {
type: Object,
require: false,
default: () => ({})
}, },
chartStyle: { chartStyle: {
type: Object, type: Object,
...@@ -30,8 +58,348 @@ export default { ...@@ -30,8 +58,348 @@ export default {
} }
} }
}, },
data() {
return {
localRows: [],
localColumns: [],
localValues: [],
localData: [],
// 连接符
connector: '-',
chart: null,
calcOption: {
xAxis: { type: 'category' },
yAxis: { type: 'value' },
tooltip: { trigger: 'axis' }
},
calcData: {
legendData: [],
xAxisData: [],
seriesObj: {}
}
}
},
computed: {
watchAllProps() {
const { rows, columns, values, data } = this
return { rows, columns, values, data }
}
},
watch: {
watchAllProps() {
this.init()
this.mergeChartOption()
},
chartTheme() {
this.mergeChartTheme()
},
chartSeriesType() {
this.mergeChartOption()
},
chartOption: {
handler(newValue, oldValue) {
this.mergeChartOption()
},
deep: true
}
},
mounted() {
this.renderChart()
this.$on('resized', this.handleResize)
window.addEventListener('resize', this.handleResize)
},
created() { created() {
console.log(this.data) this.init()
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose()
}
window.removeEventListener('resize', this.handleResize)
},
methods: {
init() {
if (this.rows.length || this.columns.length || this.values.length) {
this.handleDataClone()
this.setValuesToColAndRow()
this.handleCalcData()
} else {
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
}
},
// clone data
handleDataClone() {
this.localRows = JSON.parse(JSON.stringify(this.rows))
this.localColumns = JSON.parse(JSON.stringify(this.columns))
this.localValues = JSON.parse(JSON.stringify(this.values))
this.localData = Object.freeze(this.data)
},
// set the `values` attribute to rows and columns
setValuesToColAndRow() {
const rowKeys = this.localRows.map(({ key }) => key)
const columnKeys = this.localColumns.map(({ key }) => key)
const rowValues = this._findCategory(rowKeys, this.localData)
const columnValues = this._findCategory(columnKeys, this.localData)
this.localRows.forEach((row) => {
const { key, values } = row
this.$set(row, 'values', values || rowValues[key] || [])
})
this.localColumns.forEach((column) => {
const { key, values } = column
this.$set(column, 'values', values || columnValues[key] || [])
})
},
// 计算值
handleCalcData() {
if (!this.localRows.length || !this.localValues.length) return
const _rowPaths = this._combineRowPaths(
...this.localRows.map(({ key, values }) => { return { key, values } })
)
const _rowKeys = this.localRows.map(({ key }) => key)
const _colPaths = this._combineColPaths(
...this.localColumns.map(({ values }) => values)
)
const _colKeys = this.localColumns.map(({ key }) => key)
// 行对应的条件
const rowConditions = convertPathToMap(_rowPaths, _rowKeys)
// 列对应的条件
const colConditions = convertPathToMap(_colPaths, _colKeys)
// 针对没传入行或列的处理
!colConditions.length && colConditions.push({})
!rowConditions.length && rowConditions.push({})
const xAxisData = []
const legendData = []
const seriesObj = {}
rowConditions.forEach((rowCondition) => {
xAxisData.push(Object.values(rowCondition).join(this.connector))
})
colConditions.forEach((colCondition) => {
const isEmptyCol = !Object.keys(colCondition).length
this.localValues.forEach(({ key }) => {
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
legendData.push(seriesName)
seriesObj[seriesName] = {
name: seriesName,
type: this.chartType,
data: []
}
})
})
// 计算每个series数据
colConditions.forEach((colCondition, colConditionIndex) => {
const isEmptyCol = !Object.keys(colCondition).length
rowConditions.forEach((rowCondition, rowConditionIndex) => {
// 当前单元对应的条件
const conditions = Object.assign({}, rowCondition, colCondition)
// 通过当前单元对应的条件，过滤数据
const filterData = this._filterData(conditions, this.localData)
// 多个值，多条数据
this.localValues.forEach(({ key }) => {
const value = this._reduceValue(filterData, key)
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
seriesObj[seriesName].data.push(value)
})
})
})
this.calcData.legendData = legendData
this.calcData.xAxisData = xAxisData
this.calcData.seriesObj = seriesObj
},
handleResize() {
if (this.chart) {
this.chart.resize()
}
},
renderChart() {
if (!this.$refs.chart) return
let option = Object.assign({}, this.chartOption, this.calcOption)
option.legend.data = this.calcData.legendData
option.xAxis.data = this.calcData.xAxisData
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
this.parseChartSeries(option, series, this.chartSeriesType)
option.series = series
setTimeout(() => {
if (!this.chart) {
if (this.chartTheme !== 'default') {
require('./themes/' + this.chartTheme + '.js')
}
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
}
this.chart.clear()
this.chart.setOption(option)
}, 0)
},
mergeChartTheme() {
if (!this.$refs.chart) return
if (this.chart) {
// 使用刚指定的配置项和数据显示图表
let option = Object.assign({}, this.chartOption, this.calcOption)
option.legend.data = this.calcData.legendData
option.xAxis.data = this.calcData.xAxisData
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
this.parseChartSeries(option, series, this.chartSeriesType)
option.series = series
if (this.chartTheme !== 'default') {
require('./themes/' + this.chartTheme + '.js')
}
this.chart.dispose()
// 基于准备好的dom，初始化echarts实例
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
this.chart.setOption(option)
}
},
mergeChartOption() {
if (!this.$refs.chart) return
if (this.chart) {
let option = Object.assign({}, this.chartOption, this.calcOption)
option.legend.data = this.calcData.legendData
option.xAxis.data = this.calcData.xAxisData
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
this.parseChartSeries(option, series, this.chartSeriesType)
option.series = series
this.chart.clear()
this.chart.setOption(option, true)
}
},
parseChartSeries(option, series, type) {
if (type === 'stackbar') {
series.forEach((item) => {
item.stack = '总量'
})
} else if (type === 'percentagestackbar') {
const sum_data = []
for (let j = 0; j < option.xAxis.data.length; j++) {
let sum = 0
for (let i = 0; i < series.length; i++) {
sum += series[i].data[j] ? Number(series[i].data[j]) : 0
}
sum_data[j] = sum
}
series.forEach((item) => {
const serieCalcData = item.data.map((data, index) => {
return (parseFloat(data) / parseFloat(sum_data[index]) * 100).toFixed(2)
})
item.data = serieCalcData
item.stack = '总量'
})
option.yAxis.min = 0
option.yAxis.max = 100
} else if (type === 'barchart') {
const xAxis = JSON.parse(JSON.stringify(option.xAxis))
const yAxis = JSON.parse(JSON.stringify(option.yAxis))
option.xAxis = yAxis
option.yAxis = xAxis
} else if (type === 'stackbarchart') {
const xAxis = JSON.parse(JSON.stringify(option.xAxis))
const yAxis = JSON.parse(JSON.stringify(option.yAxis))
option.xAxis = yAxis
option.yAxis = xAxis
series.forEach((item) => {
item.stack = '总量'
})
} else if (type === 'percentagestackbarchart') {
const sum_data = []
for (let j = 0; j < option.xAxis.data.length; j++) {
let sum = 0
for (let i = 0; i < series.length; i++) {
sum += series[i].data[j] ? Number(series[i].data[j]) : 0
}
sum_data[j] = sum
}
series.forEach((item) => {
const serieCalcData = item.data.map((data, index) => {
return (parseFloat(data) / parseFloat(sum_data[index]) * 100).toFixed(2)
})
item.data = serieCalcData
item.stack = '总量'
})
const xAxis = JSON.parse(JSON.stringify(option.xAxis))
const yAxis = JSON.parse(JSON.stringify(option.yAxis))
option.xAxis = yAxis
option.yAxis = xAxis
option.xAxis.min = 0
option.xAxis.max = 100
}
},
_combineRowPaths(...arrays) {
const len = arrays.length
let _result = []
if (len) {
const rowPaths = arrays.reduce((prev, curr) => {
const arr = []
prev.values.forEach(_prevEl => {
const prevKey = prev.key.split(SEPARATOR)
curr.values.forEach(_currEl => {
const currKey = curr.key
const conditions = {}
prevKey.forEach((key, i) => {
conditions[key] = _prevEl.split(SEPARATOR)[i]
})
conditions[currKey] = _currEl
// 判断数据里是否有该项
const filter = this.localData.some((data) => {
let status = true
for (const key in conditions) {
if (conditions[key] !== data[key]) {
status = false
return
}
}
return status
})
if (filter) {
arr.push(_prevEl + SEPARATOR + _currEl)
}
})
})
return { key: prev.key + SEPARATOR + curr.key, values: arr }
}) || {}
_result = rowPaths.values || []
}
return _result
},
_combineColPaths(...arrays) {
return arrays.length ? arrays.reduce((prev, curr) => {
const arr = []
prev.forEach(_prevEl => {
curr.forEach(_currEl => {
arr.push(_prevEl + SEPARATOR + _currEl)
})
})
return arr
}) : arrays
},
_findCategory(keys = [], data = []) {
const _result = {}
data.forEach(item => {
keys.forEach(key => {
// Remove duplicates
_result[key] = _result[key] || []
_result[key].push(item[key])
_result[key] = [...new Set(_result[key])]
})
})
return _result
},
_reduceValue(data, key) {
if (!data.length) return 0
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
},
_filterData(conditions, data) {
return data.filter((data) => {
let status = true
for (const key in conditions) {
if (conditions[key] !== data[key]) {
status = false
return
}
}
return status
})
}
} }
} }
</script> </script>
......
datax-ui/src/views/visual/datachart/components/widgets/ChartDonut.vue
...@@ -9,16 +9,35 @@ export default { ...@@ -9,16 +9,35 @@ export default {
data: { data: {
type: Array, type: Array,
required: true, required: true,
default: () => { default: () => []
return []
}
}, },
chartSchema: { rows: {
type: Object, type: Array,
required: true, required: true,
default: () => { default: () => []
return {} },
} columns: {
type: Array,
required: true,
default: () => []
},
values: {
type: Array,
required: true,
default: () => []
},
chartType: {
type: String,
required: true
},
chartTheme: {
type: String,
require: true
},
chartOption: {
type: Object,
require: false,
default: () => ({})
}, },
chartStyle: { chartStyle: {
type: Object, type: Object,
......
datax-ui/src/views/visual/datachart/components/widgets/ChartFunnel.vue
...@@ -9,16 +9,35 @@ export default { ...@@ -9,16 +9,35 @@ export default {
data: { data: {
type: Array, type: Array,
required: true, required: true,
default: () => { default: () => []
return []
}
}, },
chartSchema: { rows: {
type: Object, type: Array,
required: true, required: true,
default: () => { default: () => []
return {} },
} columns: {
type: Array,
required: true,
default: () => []
},
values: {
type: Array,
required: true,
default: () => []
},
chartType: {
type: String,
required: true
},
chartTheme: {
type: String,
require: true
},
chartOption: {
type: Object,
require: false,
default: () => ({})
}, },
chartStyle: { chartStyle: {
type: Object, type: Object,
......
datax-ui/src/views/visual/datachart/components/widgets/ChartGauge.vue
...@@ -3,22 +3,44 @@ ...@@ -3,22 +3,44 @@
</template> </template>
<script> <script>
import echarts from "echarts"
import { SEPARATOR } from '@/utils/visual-chart'
export default { export default {
name: 'ChartGauge', name: 'ChartGauge',
props: { props: {
data: { data: {
type: Array, type: Array,
required: true, required: true,
default: () => { default: () => []
return []
}
}, },
chartSchema: { rows: {
type: Object, type: Array,
required: true, required: true,
default: () => { default: () => []
return {} },
} columns: {
type: Array,
required: true,
default: () => []
},
values: {
type: Array,
required: true,
default: () => []
},
chartType: {
type: String,
required: true
},
chartTheme: {
type: String,
require: true
},
chartOption: {
type: Object,
require: false,
default: () => ({})
}, },
chartStyle: { chartStyle: {
type: Object, type: Object,
...@@ -30,8 +52,237 @@ export default { ...@@ -30,8 +52,237 @@ export default {
} }
} }
}, },
data() {
return {
localRows: [],
localColumns: [],
localValues: [],
localData: [],
// 连接符
connector: '-',
chart: null,
calcOption: {
tooltip: { trigger: 'item' }
},
calcData: {
seriesObj: {}
}
}
},
computed: {
watchAllProps() {
const { rows, columns, values, data } = this
return { rows, columns, values, data }
}
},
watch: {
watchAllProps() {
this.init()
this.mergeChartOption()
},
chartTheme() {
this.mergeChartTheme()
},
chartOption: {
handler(newValue, oldValue) {
this.mergeChartOption()
},
deep: true
}
},
mounted() {
this.renderChart()
this.$on('resized', this.handleResize)
window.addEventListener('resize', this.handleResize)
},
created() { created() {
console.log(this.data) this.init()
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose()
}
window.removeEventListener('resize', this.handleResize)
},
methods: {
init() {
console.log('初始化属性')
if (this.rows.length || this.columns.length || this.values.length) {
this.handleDataClone()
this.setValuesToColAndRow()
this.handleCalcData()
} else {
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
}
},
// clone data
handleDataClone() {
this.localRows = JSON.parse(JSON.stringify(this.rows))
this.localColumns = JSON.parse(JSON.stringify(this.columns))
this.localValues = JSON.parse(JSON.stringify(this.values))
this.localData = Object.freeze(this.data)
},
// set the `values` attribute to rows and columns
setValuesToColAndRow() {
const rowKeys = this.localRows.map(({ key }) => key)
const columnKeys = this.localColumns.map(({ key }) => key)
const rowValues = this._findCategory(rowKeys, this.localData)
const columnValues = this._findCategory(columnKeys, this.localData)
this.localRows.forEach((row) => {
const { key, values } = row
this.$set(row, 'values', values || rowValues[key] || [])
})
this.localColumns.forEach((column) => {
const { key, values } = column
this.$set(column, 'values', values || columnValues[key] || [])
})
},
// 计算值
handleCalcData() {
if (!this.localValues.length) return
const seriesObj = {}
const localValue = this.localValues[0]
const seriesName = localValue.key
const seriesData = []
seriesData.push({
name: seriesName,
value: this.localData[0][seriesName]
})
seriesObj[seriesName] = {
name: seriesName,
type: this.chartType,
radius: '100%',
detail: { formatter: '{value}%' },
data: seriesData
}
this.calcData.seriesObj = seriesObj
},
handleResize() {
if (this.chart) {
this.chart.resize()
}
},
renderChart() {
if (!this.$refs.chart) return
let option = Object.assign({}, this.chartOption, this.calcOption)
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
option.series = series
setTimeout(() => {
if (!this.chart) {
if (this.chartTheme !== 'default') {
require('./themes/' + this.chartTheme + '.js')
}
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
}
this.chart.clear()
this.chart.setOption(option)
}, 0)
},
mergeChartTheme() {
if (!this.$refs.chart) return
if (this.chart) {
// 使用刚指定的配置项和数据显示图表
let option = Object.assign({}, this.chartOption, this.calcOption)
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
option.series = series
if (this.chartTheme !== 'default') {
require('./themes/' + this.chartTheme + '.js')
}
this.chart.dispose()
// 基于准备好的dom，初始化echarts实例
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
this.chart.setOption(option)
}
},
mergeChartOption() {
if (!this.$refs.chart) return
if (this.chart) {
let option = Object.assign({}, this.chartOption, this.calcOption)
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
option.series = series
this.chart.clear()
this.chart.setOption(option, true)
}
},
_combineRowPaths(...arrays) {
const len = arrays.length
let _result = []
if (len) {
const rowPaths = arrays.reduce((prev, curr) => {
const arr = []
prev.values.forEach(_prevEl => {
const prevKey = prev.key.split(SEPARATOR)
curr.values.forEach(_currEl => {
const currKey = curr.key
const conditions = {}
prevKey.forEach((key, i) => {
conditions[key] = _prevEl.split(SEPARATOR)[i]
})
conditions[currKey] = _currEl
// 判断数据里是否有该项
const filter = this.localData.some((data) => {
let status = true
for (const key in conditions) {
if (conditions[key] !== data[key]) {
status = false
return
}
}
return status
})
if (filter) {
arr.push(_prevEl + SEPARATOR + _currEl)
}
})
})
return { key: prev.key + SEPARATOR + curr.key, values: arr }
}) || {}
_result = rowPaths.values || []
}
return _result
},
_combineColPaths(...arrays) {
return arrays.length ? arrays.reduce((prev, curr) => {
const arr = []
prev.forEach(_prevEl => {
curr.forEach(_currEl => {
arr.push(_prevEl + SEPARATOR + _currEl)
})
})
return arr
}) : arrays
},
_findCategory(keys = [], data = []) {
const _result = {}
data.forEach(item => {
keys.forEach(key => {
// Remove duplicates
_result[key] = _result[key] || []
_result[key].push(item[key])
_result[key] = [...new Set(_result[key])]
})
})
return _result
},
_reduceValue(data, key) {
if (!data.length) return 0
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
},
_filterData(conditions, data) {
return data.filter((data) => {
let status = true
for (const key in conditions) {
if (conditions[key] !== data[key]) {
status = false
return
}
}
return status
})
}
} }
} }
</script> </script>
......
datax-ui/src/views/visual/datachart/components/widgets/ChartGeo.vue
...@@ -9,16 +9,35 @@ export default { ...@@ -9,16 +9,35 @@ export default {
data: { data: {
type: Array, type: Array,
required: true, required: true,
default: () => { default: () => []
return []
}
}, },
chartSchema: { rows: {
type: Object, type: Array,
required: true, required: true,
default: () => { default: () => []
return {} },
} columns: {
type: Array,
required: true,
default: () => []
},
values: {
type: Array,
required: true,
default: () => []
},
chartType: {
type: String,
required: true
},
chartTheme: {
type: String,
require: true
},
chartOption: {
type: Object,
require: false,
default: () => ({})
}, },
chartStyle: { chartStyle: {
type: Object, type: Object,
......
datax-ui/src/views/visual/datachart/components/widgets/ChartKpi.vue
...@@ -9,16 +9,35 @@ export default { ...@@ -9,16 +9,35 @@ export default {
data: { data: {
type: Array, type: Array,
required: true, required: true,
default: () => { default: () => []
return []
}
}, },
chartSchema: { rows: {
type: Object, type: Array,
required: true, required: true,
default: () => { default: () => []
return {} },
} columns: {
type: Array,
required: true,
default: () => []
},
values: {
type: Array,
required: true,
default: () => []
},
chartType: {
type: String,
required: true
},
chartTheme: {
type: String,
require: true
},
chartOption: {
type: Object,
require: false,
default: () => ({})
}, },
chartStyle: { chartStyle: {
type: Object, type: Object,
......
datax-ui/src/views/visual/datachart/components/widgets/ChartLine.vue
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<script> <script>
import echarts from 'echarts' import echarts from 'echarts'
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
export default { export default {
name: 'ChartLine', name: 'ChartLine',
...@@ -11,16 +12,41 @@ export default { ...@@ -11,16 +12,41 @@ export default {
data: { data: {
type: Array, type: Array,
required: true, required: true,
default: () => { default: () => []
return []
}
}, },
chartSchema: { rows: {
type: Object, type: Array,
required: true, required: true,
default: () => { default: () => []
return {} },
} columns: {
type: Array,
required: true,
default: () => []
},
values: {
type: Array,
required: true,
default: () => []
},
chartType: {
type: String,
required: true
},
chartTheme: {
type: String,
require: true,
default: 'default'
},
chartSeriesType: {
type: String,
require: true,
default: ''
},
chartOption: {
type: Object,
require: false,
default: () => ({})
}, },
chartStyle: { chartStyle: {
type: Object, type: Object,
...@@ -34,7 +60,47 @@ export default { ...@@ -34,7 +60,47 @@ export default {
}, },
data() { data() {
return { return {
chart: null localRows: [],
localColumns: [],
localValues: [],
localData: [],
// 连接符
connector: '-',
chart: null,
calcOption: {
xAxis: { type: 'category' },
yAxis: { type: 'value' },
tooltip: { trigger: 'axis' }
},
calcData: {
legendData: [],
xAxisData: [],
seriesObj: {}
}
}
},
computed: {
watchAllProps() {
const { rows, columns, values, data } = this
return { rows, columns, values, data }
}
},
watch: {
watchAllProps() {
this.init()
this.mergeChartOption()
},
chartTheme() {
this.mergeChartTheme()
},
chartSeriesType() {
this.mergeChartOption()
},
chartOption: {
handler(newValue, oldValue) {
this.mergeChartOption()
},
deep: true
} }
}, },
mounted() { mounted() {
...@@ -43,10 +109,102 @@ export default { ...@@ -43,10 +109,102 @@ export default {
window.addEventListener('resize', this.handleResize) window.addEventListener('resize', this.handleResize)
}, },
created() { created() {
console.log(this.data) this.init()
console.log(this.chartSchema) },
beforeDestroy() {
if (this.chart) {
this.chart.dispose()
}
window.removeEventListener('resize', this.handleResize)
}, },
methods: { methods: {
init() {
if (this.rows.length || this.columns.length || this.values.length) {
this.handleDataClone()
this.setValuesToColAndRow()
this.handleCalcData()
} else {
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
}
},
// clone data
handleDataClone() {
this.localRows = JSON.parse(JSON.stringify(this.rows))
this.localColumns = JSON.parse(JSON.stringify(this.columns))
this.localValues = JSON.parse(JSON.stringify(this.values))
this.localData = Object.freeze(this.data)
},
// set the `values` attribute to rows and columns
setValuesToColAndRow() {
const rowKeys = this.localRows.map(({ key }) => key)
const columnKeys = this.localColumns.map(({ key }) => key)
const rowValues = this._findCategory(rowKeys, this.localData)
const columnValues = this._findCategory(columnKeys, this.localData)
this.localRows.forEach((row) => {
const { key, values } = row
this.$set(row, 'values', values || rowValues[key] || [])
})
this.localColumns.forEach((column) => {
const { key, values } = column
this.$set(column, 'values', values || columnValues[key] || [])
})
},
// 计算值
handleCalcData() {
if (!this.localRows.length || !this.localValues.length) return
const _rowPaths = this._combineRowPaths(
...this.localRows.map(({ key, values }) => { return { key, values } })
)
const _rowKeys = this.localRows.map(({ key }) => key)
const _colPaths = this._combineColPaths(
...this.localColumns.map(({ values }) => values)
)
const _colKeys = this.localColumns.map(({ key }) => key)
// 行对应的条件
const rowConditions = convertPathToMap(_rowPaths, _rowKeys)
// 列对应的条件
const colConditions = convertPathToMap(_colPaths, _colKeys)
// 针对没传入行或列的处理
!colConditions.length && colConditions.push({})
!rowConditions.length && rowConditions.push({})
const xAxisData = []
const legendData = []
const seriesObj = {}
rowConditions.forEach((rowCondition) => {
xAxisData.push(Object.values(rowCondition).join(this.connector))
})
colConditions.forEach((colCondition) => {
const isEmptyCol = !Object.keys(colCondition).length
this.localValues.forEach(({ key }) => {
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
legendData.push(seriesName)
seriesObj[seriesName] = {
name: seriesName,
type: this.chartType,
data: []
}
})
})
// 计算每个series数据
colConditions.forEach((colCondition, colConditionIndex) => {
const isEmptyCol = !Object.keys(colCondition).length
rowConditions.forEach((rowCondition, rowConditionIndex) => {
// 当前单元对应的条件
const conditions = Object.assign({}, rowCondition, colCondition)
// 通过当前单元对应的条件，过滤数据
const filterData = this._filterData(conditions, this.localData)
// 多个值，多条数据
this.localValues.forEach(({ key }) => {
const value = this._reduceValue(filterData, key)
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
seriesObj[seriesName].data.push(value)
})
})
})
this.calcData.legendData = legendData
this.calcData.xAxisData = xAxisData
this.calcData.seriesObj = seriesObj
},
handleResize() { handleResize() {
if (this.chart) { if (this.chart) {
this.chart.resize() this.chart.resize()
...@@ -54,33 +212,182 @@ export default { ...@@ -54,33 +212,182 @@ export default {
}, },
renderChart() { renderChart() {
if (!this.$refs.chart) return if (!this.$refs.chart) return
const option = { let option = Object.assign({}, this.chartOption, this.calcOption)
xAxis: { option.legend.data = this.calcData.legendData
type: 'category', option.xAxis.data = this.calcData.xAxisData
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] option = JSON.parse(JSON.stringify(option))
}, const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
yAxis: { this.parseChartSeries(option, series, this.chartSeriesType)
type: 'value' option.series = series
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}
setTimeout(() => { setTimeout(() => {
if (!this.chart) { if (!this.chart) {
this.chart = echarts.init(this.$refs.chart) if (this.chartTheme !== 'default') {
require('./themes/' + this.chartTheme + '.js')
}
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
} }
this.chart.clear() this.chart.clear()
this.chart.setOption(option) this.chart.setOption(option)
}, 0) }, 0)
}
}, },
beforeDestroy() { mergeChartTheme() {
if (!this.$refs.chart) return
if (this.chart) { if (this.chart) {
// 使用刚指定的配置项和数据显示图表
let option = Object.assign({}, this.chartOption, this.calcOption)
option.legend.data = this.calcData.legendData
option.xAxis.data = this.calcData.xAxisData
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
this.parseChartSeries(option, series, this.chartSeriesType)
option.series = series
if (this.chartTheme !== 'default') {
require('./themes/' + this.chartTheme + '.js')
}
this.chart.dispose() this.chart.dispose()
// 基于准备好的dom，初始化echarts实例
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
this.chart.setOption(option)
}
},
mergeChartOption() {
if (!this.$refs.chart) return
if (this.chart) {
let option = Object.assign({}, this.chartOption, this.calcOption)
option.legend.data = this.calcData.legendData
option.xAxis.data = this.calcData.xAxisData
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
this.parseChartSeries(option, series, this.chartSeriesType)
option.series = series
this.chart.clear()
this.chart.setOption(option, true)
}
},
parseChartSeries(option, series, type) {
if (type === 'arealine') {
series.forEach((item) => {
item.areaStyle = {}
})
option.xAxis.boundaryGap = false
} else if (type === 'stackline') {
series.forEach((item) => {
item.stack = '总量'
})
option.xAxis.boundaryGap = false
} else if (type === 'stackarealine') {
series.forEach((item) => {
item.stack = '总量'
item.areaStyle = {}
})
option.xAxis.boundaryGap = false
} else if (type === 'percentagestackarealine') {
const sum_data = []
for (let j = 0; j < option.xAxis.data.length; j++) {
let sum = 0
for (let i = 0; i < series.length; i++) {
sum += series[i].data[j] ? Number(series[i].data[j]) : 0
}
sum_data[j] = sum
}
series.forEach((item) => {
const serieCalcData = item.data.map((data, index) => {
return (parseFloat(data) / parseFloat(sum_data[index]) * 100).toFixed(2)
})
item.data = serieCalcData
item.stack = '总量'
item.areaStyle = {}
})
option.yAxis.min = 0
option.yAxis.max = 100
option.xAxis.boundaryGap = false
// option.tooltip.formatter = function(params) {
// let s = params[0].name + '</br>'
// const sum = params.reduce((total, cur) => total + cur.value, 0)
// for (let i = 0; i < params.length; i++) {
// s += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[i].color + '"></span>'
// s += params[i].seriesName + ' : ' + (100 * parseFloat(params[i].value) / parseFloat(sum)).toFixed(2) + '%<br>'
// }
// return s
// }
}
},
_combineRowPaths(...arrays) {
const len = arrays.length
let _result = []
if (len) {
const rowPaths = arrays.reduce((prev, curr) => {
const arr = []
prev.values.forEach(_prevEl => {
const prevKey = prev.key.split(SEPARATOR)
curr.values.forEach(_currEl => {
const currKey = curr.key
const conditions = {}
prevKey.forEach((key, i) => {
conditions[key] = _prevEl.split(SEPARATOR)[i]
})
conditions[currKey] = _currEl
// 判断数据里是否有该项
const filter = this.localData.some((data) => {
let status = true
for (const key in conditions) {
if (conditions[key] !== data[key]) {
status = false
return
}
}
return status
})
if (filter) {
arr.push(_prevEl + SEPARATOR + _currEl)
}
})
})
return { key: prev.key + SEPARATOR + curr.key, values: arr }
}) || {}
_result = rowPaths.values || []
}
return _result
},
_combineColPaths(...arrays) {
return arrays.length ? arrays.reduce((prev, curr) => {
const arr = []
prev.forEach(_prevEl => {
curr.forEach(_currEl => {
arr.push(_prevEl + SEPARATOR + _currEl)
})
})
return arr
}) : arrays
},
_findCategory(keys = [], data = []) {
const _result = {}
data.forEach(item => {
keys.forEach(key => {
// Remove duplicates
_result[key] = _result[key] || []
_result[key].push(item[key])
_result[key] = [...new Set(_result[key])]
})
})
return _result
},
_reduceValue(data, key) {
if (!data.length) return 0
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
},
_filterData(conditions, data) {
return data.filter((data) => {
let status = true
for (const key in conditions) {
if (conditions[key] !== data[key]) {
status = false
return
}
}
return status
})
} }
window.removeEventListener('resize', this.handleResize)
} }
} }
</script> </script>
......
datax-ui/src/views/visual/datachart/components/widgets/ChartLiquidFill.vue 0 → 100644
<template>
<div ref="chart" :style="chartStyle">ChartLiquidfill</div>
</template>
<script>
import echarts from 'echarts'
require('echarts-liquidfill')
import { SEPARATOR } from '@/utils/visual-chart'
export default {
name: 'ChartLiquidfill',
props: {
data: {
type: Array,
required: true,
default: () => []
},
rows: {
type: Array,
required: true,
default: () => []
},
columns: {
type: Array,
required: true,
default: () => []
},
values: {
type: Array,
required: true,
default: () => []
},
chartType: {
type: String,
required: true
},
chartTheme: {
type: String,
require: true,
default: 'default'
},
chartSeriesType: {
type: String,
require: true,
default: ''
},
chartOption: {
type: Object,
require: false,
default: () => ({})
},
chartStyle: {
type: Object,
require: false,
default: () => {
return {
height: '200px'
}
}
}
},
data() {
return {
localRows: [],
localColumns: [],
localValues: [],
localData: [],
// 连接符
connector: '-',
chart: null,
calcOption: {
tooltip: { trigger: 'item' }
},
calcData: {
seriesObj: {}
}
}
},
computed: {
watchAllProps() {
const { rows, columns, values, data } = this
return { rows, columns, values, data }
}
},
watch: {
watchAllProps() {
this.init()
this.mergeChartOption()
},
chartTheme() {
this.mergeChartTheme()
},
chartSeriesType() {
this.mergeChartOption()
},
chartOption: {
handler(newValue, oldValue) {
this.mergeChartOption()
},
deep: true
}
},
mounted() {
this.renderChart()
this.$on('resized', this.handleResize)
window.addEventListener('resize', this.handleResize)
},
created() {
this.init()
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose()
}
window.removeEventListener('resize', this.handleResize)
},
methods: {
init() {
if (this.rows.length || this.columns.length || this.values.length) {
this.handleDataClone()
this.setValuesToColAndRow()
this.handleCalcData()
} else {
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
}
},
// clone data
handleDataClone() {
this.localRows = JSON.parse(JSON.stringify(this.rows))
this.localColumns = JSON.parse(JSON.stringify(this.columns))
this.localValues = JSON.parse(JSON.stringify(this.values))
this.localData = Object.freeze(this.data)
},
// set the `values` attribute to rows and columns
setValuesToColAndRow() {
const rowKeys = this.localRows.map(({ key }) => key)
const columnKeys = this.localColumns.map(({ key }) => key)
const rowValues = this._findCategory(rowKeys, this.localData)
const columnValues = this._findCategory(columnKeys, this.localData)
this.localRows.forEach((row) => {
const { key, values } = row
this.$set(row, 'values', values || rowValues[key] || [])
})
this.localColumns.forEach((column) => {
const { key, values } = column
this.$set(column, 'values', values || columnValues[key] || [])
})
},
// 计算值
handleCalcData() {
if (!this.localValues.length) return
const seriesObj = {}
const localValue = this.localValues[0]
const seriesName = localValue.key
const seriesData = []
seriesData.push(this.localData[0][seriesName])
seriesObj[seriesName] = {
name: seriesName,
type: this.chartType,
label: { fontSize: 20 },
data: seriesData
}
this.calcData.seriesObj = seriesObj
},
handleResize() {
if (this.chart) {
this.chart.resize()
}
},
renderChart() {
if (!this.$refs.chart) return
let option = Object.assign({}, this.chartOption, this.calcOption)
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
this.parseChartSeries(option, series, this.chartSeriesType)
option.series = series
setTimeout(() => {
if (!this.chart) {
if (this.chartTheme !== 'default') {
require('./themes/' + this.chartTheme + '.js')
}
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
}
this.chart.clear()
this.chart.setOption(option)
}, 0)
},
mergeChartTheme() {
if (!this.$refs.chart) return
if (this.chart) {
// 使用刚指定的配置项和数据显示图表
let option = Object.assign({}, this.chartOption, this.calcOption)
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
this.parseChartSeries(option, series, this.chartSeriesType)
option.series = series
if (this.chartTheme !== 'default') {
require('./themes/' + this.chartTheme + '.js')
}
this.chart.dispose()
// 基于准备好的dom，初始化echarts实例
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
this.chart.setOption(option)
}
},
mergeChartOption() {
if (!this.$refs.chart) return
if (this.chart) {
let option = Object.assign({}, this.chartOption, this.calcOption)
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
this.parseChartSeries(option, series, this.chartSeriesType)
option.series = series
this.chart.clear()
this.chart.setOption(option, true)
}
},
parseChartSeries(option, series, type) {
if (type === 'circle') {
series.forEach((item) => {
item.shape = 'circle'
})
} else if (type === 'rect') {
series.forEach((item) => {
item.shape = 'rect'
})
} else if (type === 'roundRect') {
series.forEach((item) => {
item.shape = 'roundRect'
})
} else if (type === 'triangle') {
series.forEach((item) => {
item.shape = 'triangle'
})
} else if (type === 'diamond') {
series.forEach((item) => {
item.shape = 'diamond'
})
} else if (type === 'pin') {
series.forEach((item) => {
item.shape = 'pin'
})
} else if (type === 'arrow') {
series.forEach((item) => {
item.shape = 'arrow'
})
}
},
_combineRowPaths(...arrays) {
const len = arrays.length
let _result = []
if (len) {
const rowPaths = arrays.reduce((prev, curr) => {
const arr = []
prev.values.forEach(_prevEl => {
const prevKey = prev.key.split(SEPARATOR)
curr.values.forEach(_currEl => {
const currKey = curr.key
const conditions = {}
prevKey.forEach((key, i) => {
conditions[key] = _prevEl.split(SEPARATOR)[i]
})
conditions[currKey] = _currEl
// 判断数据里是否有该项
const filter = this.localData.some((data) => {
let status = true
for (const key in conditions) {
if (conditions[key] !== data[key]) {
status = false
return
}
}
return status
})
if (filter) {
arr.push(_prevEl + SEPARATOR + _currEl)
}
})
})
return { key: prev.key + SEPARATOR + curr.key, values: arr }
}) || {}
_result = rowPaths.values || []
}
return _result
},
_combineColPaths(...arrays) {
return arrays.length ? arrays.reduce((prev, curr) => {
const arr = []
prev.forEach(_prevEl => {
curr.forEach(_currEl => {
arr.push(_prevEl + SEPARATOR + _currEl)
})
})
return arr
}) : arrays
},
_findCategory(keys = [], data = []) {
const _result = {}
data.forEach(item => {
keys.forEach(key => {
// Remove duplicates
_result[key] = _result[key] || []
_result[key].push(item[key])
_result[key] = [...new Set(_result[key])]
})
})
return _result
},
_reduceValue(data, key) {
if (!data.length) return 0
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
},
_filterData(conditions, data) {
return data.filter((data) => {
let status = true
for (const key in conditions) {
if (conditions[key] !== data[key]) {
status = false
return
}
}
return status
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
datax-ui/src/views/visual/datachart/components/widgets/ChartLiquidfill.vue deleted 100644 → 0
<template>
<div ref="chart" :style="chartStyle">ChartLiquidfill</div>
</template>
<script>
export default {
name: 'ChartLiquidfill',
props: {
data: {
type: Array,
required: true,
default: () => {
return []
}
},
chartSchema: {
type: Object,
required: true,
default: () => {
return {}
}
},
chartStyle: {
type: Object,
require: false,
default: () => {
return {
height: '200px'
}
}
}
},
created() {
console.log(this.data)
}
}
</script>
<style lang="scss" scoped>
</style>
datax-ui/src/views/visual/datachart/components/widgets/ChartPie.vue
...@@ -3,22 +3,50 @@ ...@@ -3,22 +3,50 @@
</template> </template>
<script> <script>
import echarts from 'echarts'
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
export default { export default {
name: 'ChartPie', name: 'ChartPie',
props: { props: {
data: { data: {
type: Array, type: Array,
required: true, required: true,
default: () => { default: () => []
return []
}
}, },
chartSchema: { rows: {
type: Object, type: Array,
required: true, required: true,
default: () => { default: () => []
return {} },
} columns: {
type: Array,
required: true,
default: () => []
},
values: {
type: Array,
required: true,
default: () => []
},
chartType: {
type: String,
required: true
},
chartTheme: {
type: String,
require: true,
default: 'default'
},
chartSeriesType: {
type: String,
require: true,
default: ''
},
chartOption: {
type: Object,
require: false,
default: () => ({})
}, },
chartStyle: { chartStyle: {
type: Object, type: Object,
...@@ -30,8 +58,303 @@ export default { ...@@ -30,8 +58,303 @@ export default {
} }
} }
}, },
data() {
return {
localRows: [],
localColumns: [],
localValues: [],
localData: [],
// 连接符
connector: '-',
chart: null,
calcOption: {
tooltip: { trigger: 'item' }
},
calcData: {
legendData: [],
seriesObj: {}
}
}
},
computed: {
watchAllProps() {
const { rows, columns, values, data } = this
return { rows, columns, values, data }
}
},
watch: {
watchAllProps() {
this.init()
this.mergeChartOption()
},
chartTheme() {
this.mergeChartTheme()
},
chartSeriesType() {
this.mergeChartOption()
},
chartOption: {
handler(newValue, oldValue) {
this.mergeChartOption()
},
deep: true
}
},
mounted() {
this.renderChart()
this.$on('resized', this.handleResize)
window.addEventListener('resize', this.handleResize)
},
created() { created() {
console.log(this.data) this.init()
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose()
}
window.removeEventListener('resize', this.handleResize)
},
methods: {
init() {
if (this.rows.length || this.columns.length || this.values.length) {
this.handleDataClone()
this.setValuesToColAndRow()
this.handleCalcData()
} else {
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
}
},
// clone data
handleDataClone() {
this.localRows = JSON.parse(JSON.stringify(this.rows))
this.localColumns = JSON.parse(JSON.stringify(this.columns))
this.localValues = JSON.parse(JSON.stringify(this.values))
this.localData = Object.freeze(this.data)
},
// set the `values` attribute to rows and columns
setValuesToColAndRow() {
const rowKeys = this.localRows.map(({ key }) => key)
const columnKeys = this.localColumns.map(({ key }) => key)
const rowValues = this._findCategory(rowKeys, this.localData)
const columnValues = this._findCategory(columnKeys, this.localData)
this.localRows.forEach((row) => {
const { key, values } = row
this.$set(row, 'values', values || rowValues[key] || [])
})
this.localColumns.forEach((column) => {
const { key, values } = column
this.$set(column, 'values', values || columnValues[key] || [])
})
},
// 计算值
handleCalcData() {
if (!this.localRows.length || !this.localValues.length) return
const _rowPaths = this._combineRowPaths(
...this.localRows.map(({ key, values }) => { return { key, values } })
)
const _rowKeys = this.localRows.map(({ key }) => key)
const _colPaths = this._combineColPaths(
...this.localColumns.map(({ values }) => values)
)
const _colKeys = this.localColumns.map(({ key }) => key)
// 行对应的条件
const rowConditions = convertPathToMap(_rowPaths, _rowKeys)
// 列对应的条件
const colConditions = convertPathToMap(_colPaths, _colKeys)
// 针对没传入行或列的处理
!colConditions.length && colConditions.push({})
!rowConditions.length && rowConditions.push({})
const legendData = []
rowConditions.forEach((rowCondition) => {
legendData.push(Object.values(rowCondition).join(this.connector))
})
const seriesObj = {}
const b = 100 / (colConditions.length * this.localValues.length * 9 + 1)
colConditions.forEach((colCondition, colConditionIndex) => {
const isEmptyCol = !Object.keys(colCondition).length
this.localValues.forEach(({ key }, index) => {
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
seriesObj[seriesName] = {
name: seriesName,
type: this.chartType,
center: [5 * b + (colConditionIndex + 1) * index * 9 * b + '%', '50%'],
data: []
}
})
})
// 计算每个series数据
colConditions.forEach((colCondition, colConditionIndex) => {
const isEmptyCol = !Object.keys(colCondition).length
rowConditions.forEach((rowCondition, rowConditionIndex) => {
// 当前单元对应的条件
const conditions = Object.assign({}, rowCondition, colCondition)
// 通过当前单元对应的条件，过滤数据
const filterData = this._filterData(conditions, this.localData)
// 多个值，多条数据
this.localValues.forEach(({ key }) => {
const value = this._reduceValue(filterData, key)
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
seriesObj[seriesName].data.push(
{
name: Object.values(rowCondition).join(this.connector),
value: value
}
)
})
})
})
this.calcData.legendData = legendData
this.calcData.seriesObj = seriesObj
},
handleResize() {
if (this.chart) {
this.chart.resize()
}
},
renderChart() {
if (!this.$refs.chart) return
let option = Object.assign({}, this.chartOption, this.calcOption)
option.legend.data = this.calcData.legendData
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
this.parseChartSeries(option, series, this.chartSeriesType)
option.series = series
setTimeout(() => {
if (!this.chart) {
if (this.chartTheme !== 'default') {
require('./themes/' + this.chartTheme + '.js')
}
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
}
this.chart.clear()
this.chart.setOption(option)
}, 0)
},
mergeChartTheme() {
if (!this.$refs.chart) return
if (this.chart) {
// 使用刚指定的配置项和数据显示图表
let option = Object.assign({}, this.chartOption, this.calcOption)
option.legend.data = this.calcData.legendData
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
this.parseChartSeries(option, series, this.chartSeriesType)
option.series = series
if (this.chartTheme !== 'default') {
require('./themes/' + this.chartTheme + '.js')
}
this.chart.dispose()
// 基于准备好的dom，初始化echarts实例
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
this.chart.setOption(option)
}
},
mergeChartOption() {
if (!this.$refs.chart) return
if (this.chart) {
let option = Object.assign({}, this.chartOption, this.calcOption)
option.legend.data = this.calcData.legendData
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
this.parseChartSeries(option, series, this.chartSeriesType)
option.series = series
this.chart.clear()
this.chart.setOption(option, true)
}
},
parseChartSeries(option, series, type) {
if (type === 'roseradiuspie') {
series.forEach((item) => {
item.roseType = 'radius'
item.radius = ['30%', '100%']
})
} else if (type === 'roseareapie') {
series.forEach((item) => {
item.roseType = 'area'
item.radius = ['30%', '100%']
})
} else if (type === 'donutpie') {
series.forEach((item) => {
item.radius = ['70%', '100%']
})
}
},
_combineRowPaths(...arrays) {
const len = arrays.length
let _result = []
if (len) {
const rowPaths = arrays.reduce((prev, curr) => {
const arr = []
prev.values.forEach(_prevEl => {
const prevKey = prev.key.split(SEPARATOR)
curr.values.forEach(_currEl => {
const currKey = curr.key
const conditions = {}
prevKey.forEach((key, i) => {
conditions[key] = _prevEl.split(SEPARATOR)[i]
})
conditions[currKey] = _currEl
// 判断数据里是否有该项
const filter = this.localData.some((data) => {
let status = true
for (const key in conditions) {
if (conditions[key] !== data[key]) {
status = false
return
}
}
return status
})
if (filter) {
arr.push(_prevEl + SEPARATOR + _currEl)
}
})
})
return { key: prev.key + SEPARATOR + curr.key, values: arr }
}) || {}
_result = rowPaths.values || []
}
return _result
},
_combineColPaths(...arrays) {
return arrays.length ? arrays.reduce((prev, curr) => {
const arr = []
prev.forEach(_prevEl => {
curr.forEach(_currEl => {
arr.push(_prevEl + SEPARATOR + _currEl)
})
})
return arr
}) : arrays
},
_findCategory(keys = [], data = []) {
const _result = {}
data.forEach(item => {
keys.forEach(key => {
// Remove duplicates
_result[key] = _result[key] || []
_result[key].push(item[key])
_result[key] = [...new Set(_result[key])]
})
})
return _result
},
_reduceValue(data, key) {
if (!data.length) return 0
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
},
_filterData(conditions, data) {
return data.filter((data) => {
let status = true
for (const key in conditions) {
if (conditions[key] !== data[key]) {
status = false
return
}
}
return status
})
}
} }
} }
</script> </script>
......
datax-ui/src/views/visual/datachart/components/widgets/ChartPolar.vue
...@@ -9,16 +9,35 @@ export default { ...@@ -9,16 +9,35 @@ export default {
data: { data: {
type: Array, type: Array,
required: true, required: true,
default: () => { default: () => []
return []
}
}, },
chartSchema: { rows: {
type: Object, type: Array,
required: true, required: true,
default: () => { default: () => []
return {} },
} columns: {
type: Array,
required: true,
default: () => []
},
values: {
type: Array,
required: true,
default: () => []
},
chartType: {
type: String,
required: true
},
chartTheme: {
type: String,
require: true
},
chartOption: {
type: Object,
require: false,
default: () => ({})
}, },
chartStyle: { chartStyle: {
type: Object, type: Object,
......
datax-ui/src/views/visual/datachart/components/widgets/ChartRadar.vue
...@@ -3,22 +3,50 @@ ...@@ -3,22 +3,50 @@
</template> </template>
<script> <script>
import echarts from 'echarts'
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
export default { export default {
name: 'ChartRadar', name: 'ChartRadar',
props: { props: {
data: { data: {
type: Array, type: Array,
required: true, required: true,
default: () => { default: () => []
return []
}
}, },
chartSchema: { rows: {
type: Object, type: Array,
required: true, required: true,
default: () => { default: () => []
return {} },
} columns: {
type: Array,
required: true,
default: () => []
},
values: {
type: Array,
required: true,
default: () => []
},
chartType: {
type: String,
required: true
},
chartTheme: {
type: String,
require: true,
default: 'default'
},
chartSeriesType: {
type: String,
require: true,
default: ''
},
chartOption: {
type: Object,
require: false,
default: () => ({})
}, },
chartStyle: { chartStyle: {
type: Object, type: Object,
...@@ -30,8 +58,300 @@ export default { ...@@ -30,8 +58,300 @@ export default {
} }
} }
}, },
data() {
return {
localRows: [],
localColumns: [],
localValues: [],
localData: [],
// 连接符
connector: '-',
chart: null,
calcOption: {
radar: { indicator: [] },
tooltip: { trigger: 'item' }
},
calcData: {
legendData: [],
radarIndicator: [],
seriesObj: {}
}
}
},
computed: {
watchAllProps() {
const { rows, columns, values, data } = this
return { rows, columns, values, data }
}
},
watch: {
watchAllProps() {
this.init()
this.mergeChartOption()
},
chartTheme() {
this.mergeChartTheme()
},
chartSeriesType() {
this.mergeChartOption()
},
chartOption: {
handler(newValue, oldValue) {
this.mergeChartOption()
},
deep: true
}
},
mounted() {
this.renderChart()
this.$on('resized', this.handleResize)
window.addEventListener('resize', this.handleResize)
},
created() { created() {
console.log(this.data) this.init()
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose()
}
window.removeEventListener('resize', this.handleResize)
},
methods: {
init() {
if (this.rows.length || this.columns.length || this.values.length) {
this.handleDataClone()
this.setValuesToColAndRow()
this.handleCalcData()
} else {
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
}
},
// clone data
handleDataClone() {
this.localRows = JSON.parse(JSON.stringify(this.rows))
this.localColumns = JSON.parse(JSON.stringify(this.columns))
this.localValues = JSON.parse(JSON.stringify(this.values))
this.localData = Object.freeze(this.data)
},
// set the `values` attribute to rows and columns
setValuesToColAndRow() {
const rowKeys = this.localRows.map(({ key }) => key)
const columnKeys = this.localColumns.map(({ key }) => key)
const rowValues = this._findCategory(rowKeys, this.localData)
const columnValues = this._findCategory(columnKeys, this.localData)
this.localRows.forEach((row) => {
const { key, values } = row
this.$set(row, 'values', values || rowValues[key] || [])
})
this.localColumns.forEach((column) => {
const { key, values } = column
this.$set(column, 'values', values || columnValues[key] || [])
})
},
// 计算值
handleCalcData() {
if (!this.localRows.length || !this.localValues.length) return
const _rowPaths = this._combineRowPaths(
...this.localRows.map(({ key, values }) => { return { key, values } })
)
const _rowKeys = this.localRows.map(({ key }) => key)
const _colPaths = this._combineColPaths(
...this.localColumns.map(({ values }) => values)
)
const _colKeys = this.localColumns.map(({ key }) => key)
// 行对应的条件
const rowConditions = convertPathToMap(_rowPaths, _rowKeys)
// 列对应的条件
const colConditions = convertPathToMap(_colPaths, _colKeys)
// 针对没传入行或列的处理
!colConditions.length && colConditions.push({})
!rowConditions.length && rowConditions.push({})
const radarIndicator = []
const legendData = []
const seriesObj = {}
const seriesDataObj = {}
rowConditions.forEach((rowCondition) => {
radarIndicator.push({ name: Object.values(rowCondition).join(this.connector) })
})
colConditions.forEach((colCondition) => {
const isEmptyCol = !Object.keys(colCondition).length
this.localValues.forEach(({ key }) => {
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
legendData.push(seriesName)
seriesDataObj[seriesName] = {
name: seriesName,
value: []
}
})
})
seriesObj.radar = {
name: 'radar',
type: this.chartType,
data: []
}
// 计算每个series数据
colConditions.forEach((colCondition, colConditionIndex) => {
const isEmptyCol = !Object.keys(colCondition).length
rowConditions.forEach((rowCondition, rowConditionIndex) => {
// 当前单元对应的条件
const conditions = Object.assign({}, rowCondition, colCondition)
// 通过当前单元对应的条件，过滤数据
const filterData = this._filterData(conditions, this.localData)
// 多个值，多条数据
this.localValues.forEach(({ key }) => {
const value = this._reduceValue(filterData, key)
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
seriesDataObj[seriesName].value.push(value)
})
})
})
seriesObj.radar.data = Object.values(seriesDataObj)
this.calcData.legendData = legendData
this.calcData.radarIndicator = radarIndicator
this.calcData.seriesObj = seriesObj
},
handleResize() {
if (this.chart) {
this.chart.resize()
}
},
renderChart() {
if (!this.$refs.chart) return
let option = Object.assign({}, this.chartOption, this.calcOption)
option.legend.data = this.calcData.legendData
option.radar.indicator = this.calcData.radarIndicator
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
this.parseChartSeries(option, series, this.chartSeriesType)
option.series = series
setTimeout(() => {
if (!this.chart) {
if (this.chartTheme !== 'default') {
require('./themes/' + this.chartTheme + '.js')
}
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
}
this.chart.clear()
this.chart.setOption(option)
}, 0)
},
mergeChartTheme() {
if (!this.$refs.chart) return
if (this.chart) {
// 使用刚指定的配置项和数据显示图表
let option = Object.assign({}, this.chartOption, this.calcOption)
option.legend.data = this.calcData.legendData
option.radar.indicator = this.calcData.radarIndicator
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
this.parseChartSeries(option, series, this.chartSeriesType)
option.series = series
if (this.chartTheme !== 'default') {
require('./themes/' + this.chartTheme + '.js')
}
this.chart.dispose()
// 基于准备好的dom，初始化echarts实例
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
this.chart.setOption(option)
}
},
mergeChartOption() {
if (!this.$refs.chart) return
if (this.chart) {
let option = Object.assign({}, this.chartOption, this.calcOption)
option.legend.data = this.calcData.legendData
option.radar.indicator = this.calcData.radarIndicator
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
this.parseChartSeries(option, series, this.chartSeriesType)
option.series = series
this.chart.clear()
this.chart.setOption(option, true)
}
},
parseChartSeries(option, series, type) {
if (type === 'arearadar') {
series.forEach((item) => {
item.areaStyle = {}
})
}
},
_combineRowPaths(...arrays) {
const len = arrays.length
let _result = []
if (len) {
const rowPaths = arrays.reduce((prev, curr) => {
const arr = []
prev.values.forEach(_prevEl => {
const prevKey = prev.key.split(SEPARATOR)
curr.values.forEach(_currEl => {
const currKey = curr.key
const conditions = {}
prevKey.forEach((key, i) => {
conditions[key] = _prevEl.split(SEPARATOR)[i]
})
conditions[currKey] = _currEl
// 判断数据里是否有该项
const filter = this.localData.some((data) => {
let status = true
for (const key in conditions) {
if (conditions[key] !== data[key]) {
status = false
return
}
}
return status
})
if (filter) {
arr.push(_prevEl + SEPARATOR + _currEl)
}
})
})
return { key: prev.key + SEPARATOR + curr.key, values: arr }
}) || {}
_result = rowPaths.values || []
}
return _result
},
_combineColPaths(...arrays) {
return arrays.length ? arrays.reduce((prev, curr) => {
const arr = []
prev.forEach(_prevEl => {
curr.forEach(_currEl => {
arr.push(_prevEl + SEPARATOR + _currEl)
})
})
return arr
}) : arrays
},
_findCategory(keys = [], data = []) {
const _result = {}
data.forEach(item => {
keys.forEach(key => {
// Remove duplicates
_result[key] = _result[key] || []
_result[key].push(item[key])
_result[key] = [...new Set(_result[key])]
})
})
return _result
},
_reduceValue(data, key) {
if (!data.length) return 0
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
},
_filterData(conditions, data) {
return data.filter((data) => {
let status = true
for (const key in conditions) {
if (conditions[key] !== data[key]) {
status = false
return
}
}
return status
})
}
} }
} }
</script> </script>
......
datax-ui/src/views/visual/datachart/components/widgets/ChartSankey.vue
...@@ -9,16 +9,35 @@ export default { ...@@ -9,16 +9,35 @@ export default {
data: { data: {
type: Array, type: Array,
required: true, required: true,
default: () => { default: () => []
return []
}
}, },
chartSchema: { rows: {
type: Object, type: Array,
required: true, required: true,
default: () => { default: () => []
return {} },
} columns: {
type: Array,
required: true,
default: () => []
},
values: {
type: Array,
required: true,
default: () => []
},
chartType: {
type: String,
required: true
},
chartTheme: {
type: String,
require: true
},
chartOption: {
type: Object,
require: false,
default: () => ({})
}, },
chartStyle: { chartStyle: {
type: Object, type: Object,
......
datax-ui/src/views/visual/datachart/components/widgets/ChartScatter.vue
...@@ -9,16 +9,35 @@ export default { ...@@ -9,16 +9,35 @@ export default {
data: { data: {
type: Array, type: Array,
required: true, required: true,
default: () => { default: () => []
return []
}
}, },
chartSchema: { rows: {
type: Object, type: Array,
required: true, required: true,
default: () => { default: () => []
return {} },
} columns: {
type: Array,
required: true,
default: () => []
},
values: {
type: Array,
required: true,
default: () => []
},
chartType: {
type: String,
required: true
},
chartTheme: {
type: String,
require: true
},
chartOption: {
type: Object,
require: false,
default: () => ({})
}, },
chartStyle: { chartStyle: {
type: Object, type: Object,
......
datax-ui/src/views/visual/datachart/components/widgets/ChartSunburst.vue
...@@ -9,16 +9,35 @@ export default { ...@@ -9,16 +9,35 @@ export default {
data: { data: {
type: Array, type: Array,
required: true, required: true,
default: () => { default: () => []
return []
}
}, },
chartSchema: { rows: {
type: Object, type: Array,
required: true, required: true,
default: () => { default: () => []
return {} },
} columns: {
type: Array,
required: true,
default: () => []
},
values: {
type: Array,
required: true,
default: () => []
},
chartType: {
type: String,
required: true
},
chartTheme: {
type: String,
require: true
},
chartOption: {
type: Object,
require: false,
default: () => ({})
}, },
chartStyle: { chartStyle: {
type: Object, type: Object,
......
datax-ui/src/views/visual/datachart/components/widgets/ChartTable.vue
...@@ -22,16 +22,22 @@ export default { ...@@ -22,16 +22,22 @@ export default {
data: { data: {
type: Array, type: Array,
required: true, required: true,
default: () => { default: () => []
return []
}
}, },
chartSchema: { rows: {
type: Object, type: Array,
required: true, required: true,
default: () => { default: () => []
return {} },
} columns: {
type: Array,
required: true,
default: () => []
},
values: {
type: Array,
required: true,
default: () => []
}, },
chartStyle: { chartStyle: {
type: Object, type: Object,
...@@ -42,32 +48,6 @@ export default { ...@@ -42,32 +48,6 @@ export default {
} }
} }
} }
},
computed: {
rows() {
return this.chartSchema.rows.map((row, index, arr) => {
return {
key: `${row.col}`,
label: `${row.col}`
}
})
},
columns() {
return this.chartSchema.columns.map((column, index, arr) => {
return {
key: `${column.col}`,
label: `${column.col}`
}
})
},
values() {
return this.chartSchema.measures.map((measure, index, arr) => {
return {
key: `${measure.col}`,
label: `${measure.col}`
}
})
}
} }
} }
</script> </script>
......
datax-ui/src/views/visual/datachart/components/widgets/ChartTree.vue
...@@ -9,16 +9,35 @@ export default { ...@@ -9,16 +9,35 @@ export default {
data: { data: {
type: Array, type: Array,
required: true, required: true,
default: () => { default: () => []
return []
}
}, },
chartSchema: { rows: {
type: Object, type: Array,
required: true, required: true,
default: () => { default: () => []
return {} },
} columns: {
type: Array,
required: true,
default: () => []
},
values: {
type: Array,
required: true,
default: () => []
},
chartType: {
type: String,
required: true
},
chartTheme: {
type: String,
require: true
},
chartOption: {
type: Object,
require: false,
default: () => ({})
}, },
chartStyle: { chartStyle: {
type: Object, type: Object,
......
datax-ui/src/views/visual/datachart/components/widgets/ChartTreemap.vue
...@@ -9,16 +9,35 @@ export default { ...@@ -9,16 +9,35 @@ export default {
data: { data: {
type: Array, type: Array,
required: true, required: true,
default: () => { default: () => []
return []
}
}, },
chartSchema: { rows: {
type: Object, type: Array,
required: true, required: true,
default: () => { default: () => []
return {} },
} columns: {
type: Array,
required: true,
default: () => []
},
values: {
type: Array,
required: true,
default: () => []
},
chartType: {
type: String,
required: true
},
chartTheme: {
type: String,
require: true
},
chartOption: {
type: Object,
require: false,
default: () => ({})
}, },
chartStyle: { chartStyle: {
type: Object, type: Object,
......
datax-ui/src/views/visual/datachart/components/widgets/ChartWordCloud.vue 0 → 100644
<template>
<div ref="chart" :style="chartStyle">ChartWordcloud</div>
</template>
<script>
import echarts from 'echarts'
require('echarts-wordcloud')
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
export default {
name: 'ChartWordcloud',
props: {
data: {
type: Array,
required: true,
default: () => []
},
rows: {
type: Array,
required: true,
default: () => []
},
columns: {
type: Array,
required: true,
default: () => []
},
values: {
type: Array,
required: true,
default: () => []
},
chartType: {
type: String,
required: true
},
chartTheme: {
type: String,
require: true
},
chartOption: {
type: Object,
require: false,
default: () => ({})
},
chartStyle: {
type: Object,
require: false,
default: () => {
return {
height: '200px'
}
}
}
},
data() {
return {
localRows: [],
localColumns: [],
localValues: [],
localData: [],
// 连接符
connector: '-',
chart: null,
calcOption: {
tooltip: { trigger: 'item' }
},
calcData: {
seriesObj: {}
}
}
},
computed: {
watchAllProps() {
const { rows, columns, values, data } = this
return { rows, columns, values, data }
}
},
watch: {
watchAllProps() {
this.init()
this.mergeChartOption()
},
chartTheme() {
this.mergeChartTheme()
},
chartOption: {
handler(newValue, oldValue) {
this.mergeChartOption()
},
deep: true
}
},
mounted() {
this.renderChart()
this.$on('resized', this.handleResize)
window.addEventListener('resize', this.handleResize)
},
created() {
this.init()
},
beforeDestroy() {
if (this.chart) {
this.chart.dispose()
}
window.removeEventListener('resize', this.handleResize)
},
methods: {
init() {
if (this.rows.length || this.columns.length || this.values.length) {
this.handleDataClone()
this.setValuesToColAndRow()
this.handleCalcData()
} else {
console.warn('[Warn]: props.rows, props.columns, props.values at least one is not empty.')
}
},
// clone data
handleDataClone() {
this.localRows = JSON.parse(JSON.stringify(this.rows))
this.localColumns = JSON.parse(JSON.stringify(this.columns))
this.localValues = JSON.parse(JSON.stringify(this.values))
this.localData = Object.freeze(this.data)
},
// set the `values` attribute to rows and columns
setValuesToColAndRow() {
const rowKeys = this.localRows.map(({ key }) => key)
const columnKeys = this.localColumns.map(({ key }) => key)
const rowValues = this._findCategory(rowKeys, this.localData)
const columnValues = this._findCategory(columnKeys, this.localData)
this.localRows.forEach((row) => {
const { key, values } = row
this.$set(row, 'values', values || rowValues[key] || [])
})
this.localColumns.forEach((column) => {
const { key, values } = column
this.$set(column, 'values', values || columnValues[key] || [])
})
},
// 计算值
handleCalcData() {
if (!this.localRows.length || !this.localValues.length) return
const _rowPaths = this._combineRowPaths(
...this.localRows.map(({ key, values }) => { return { key, values } })
)
const _rowKeys = this.localRows.map(({ key }) => key)
const _colPaths = this._combineColPaths(
...this.localColumns.map(({ values }) => values)
)
const _colKeys = this.localColumns.map(({ key }) => key)
// 行对应的条件
const rowConditions = convertPathToMap(_rowPaths, _rowKeys)
// 列对应的条件
const colConditions = convertPathToMap(_colPaths, _colKeys)
// 针对没传入行或列的处理
!colConditions.length && colConditions.push({})
!rowConditions.length && rowConditions.push({})
const seriesObj = {}
colConditions.forEach((colCondition, colConditionIndex) => {
const isEmptyCol = !Object.keys(colCondition).length
this.localValues.forEach(({ key }, index) => {
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
seriesObj[seriesName] = {
name: seriesName,
type: this.chartType,
drawOutOfBound: true,
data: []
}
})
})
// 计算每个series数据
colConditions.forEach((colCondition, colConditionIndex) => {
const isEmptyCol = !Object.keys(colCondition).length
rowConditions.forEach((rowCondition, rowConditionIndex) => {
// 当前单元对应的条件
const conditions = Object.assign({}, rowCondition, colCondition)
// 通过当前单元对应的条件，过滤数据
const filterData = this._filterData(conditions, this.localData)
// 多个值，多条数据
this.localValues.forEach(({ key }) => {
const value = this._reduceValue(filterData, key)
const seriesName = isEmptyCol ? key : Object.values(colCondition).join(this.connector) + this.connector + key
seriesObj[seriesName].data.push(
{
name: Object.values(rowCondition).join(this.connector),
value: value
}
)
})
})
})
this.calcData.seriesObj = seriesObj
},
handleResize() {
if (this.chart) {
this.chart.resize()
}
},
renderChart() {
if (!this.$refs.chart) return
let option = Object.assign({}, this.chartOption, this.calcOption)
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
option.series = series
setTimeout(() => {
if (!this.chart) {
if (this.chartTheme !== 'default') {
require('./themes/' + this.chartTheme + '.js')
}
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
}
this.chart.clear()
this.chart.setOption(option)
}, 0)
},
mergeChartTheme() {
if (!this.$refs.chart) return
if (this.chart) {
// 使用刚指定的配置项和数据显示图表
let option = Object.assign({}, this.chartOption, this.calcOption)
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
option.series = series
if (this.chartTheme !== 'default') {
require('./themes/' + this.chartTheme + '.js')
}
this.chart.dispose()
// 基于准备好的dom，初始化echarts实例
this.chart = echarts.init(this.$refs.chart, this.chartTheme)
this.chart.setOption(option)
}
},
mergeChartOption() {
if (!this.$refs.chart) return
if (this.chart) {
let option = Object.assign({}, this.chartOption, this.calcOption)
option = JSON.parse(JSON.stringify(option))
const series = JSON.parse(JSON.stringify(Object.values(this.calcData.seriesObj)))
option.series = series
this.chart.clear()
this.chart.setOption(option, true)
}
},
_combineRowPaths(...arrays) {
const len = arrays.length
let _result = []
if (len) {
const rowPaths = arrays.reduce((prev, curr) => {
const arr = []
prev.values.forEach(_prevEl => {
const prevKey = prev.key.split(SEPARATOR)
curr.values.forEach(_currEl => {
const currKey = curr.key
const conditions = {}
prevKey.forEach((key, i) => {
conditions[key] = _prevEl.split(SEPARATOR)[i]
})
conditions[currKey] = _currEl
// 判断数据里是否有该项
const filter = this.localData.some((data) => {
let status = true
for (const key in conditions) {
if (conditions[key] !== data[key]) {
status = false
return
}
}
return status
})
if (filter) {
arr.push(_prevEl + SEPARATOR + _currEl)
}
})
})
return { key: prev.key + SEPARATOR + curr.key, values: arr }
}) || {}
_result = rowPaths.values || []
}
return _result
},
_combineColPaths(...arrays) {
return arrays.length ? arrays.reduce((prev, curr) => {
const arr = []
prev.forEach(_prevEl => {
curr.forEach(_currEl => {
arr.push(_prevEl + SEPARATOR + _currEl)
})
})
return arr
}) : arrays
},
_findCategory(keys = [], data = []) {
const _result = {}
data.forEach(item => {
keys.forEach(key => {
// Remove duplicates
_result[key] = _result[key] || []
_result[key].push(item[key])
_result[key] = [...new Set(_result[key])]
})
})
return _result
},
_reduceValue(data, key) {
if (!data.length) return 0
return data.reduce((sum, item) => { return sum + Number(item[key]) }, 0)
},
_filterData(conditions, data) {
return data.filter((data) => {
let status = true
for (const key in conditions) {
if (conditions[key] !== data[key]) {
status = false
return
}
}
return status
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
datax-ui/src/views/visual/datachart/components/widgets/ChartWordcloud.vue deleted 100644 → 0
<template>
<div ref="chart" :style="chartStyle">ChartWordcloud</div>
</template>
<script>
export default {
name: 'ChartWordcloud',
props: {
data: {
type: Array,
required: true,
default: () => {
return []
}
},
chartSchema: {
type: Object,
required: true,
default: () => {
return {}
}
},
chartStyle: {
type: Object,
require: false,
default: () => {
return {
height: '200px'
}
}
}
},
created() {
console.log(this.data)
}
}
</script>
<style lang="scss" scoped>
</style>
datax-ui/src/views/visual/datachart/components/widgets/themes/chalk.js 0 → 100644
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory)
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'))
} else {
// Browser globals
factory({}, root.echarts)
}
}(this, function(exports, echarts) {
var log = function(msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg)
}
}
if (!echarts) {
log('ECharts is not Loaded')
return
}
echarts.registerTheme('chalk', {
'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': {
'borderWidth': '4'
},
'lineStyle': {
'width': '3'
},
'symbolSize': '0',
'symbol': 'circle',
'smooth': true
},
'radar': {
'itemStyle': {
'borderWidth': '4'
},
'lineStyle': {
'width': '3'
},
'symbolSize': '0',
'symbol': 'circle',
'smooth': true
},
'bar': {
'itemStyle': {
'barBorderWidth': 0,
'barBorderColor': '#ccc'
}
},
'pie': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'scatter': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'boxplot': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'parallel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'sankey': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'funnel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'gauge': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'candlestick': {
'itemStyle': {
'color': '#fc97af',
'color0': 'transparent',
'borderColor': '#fc97af',
'borderColor0': '#87f7cf',
'borderWidth': '2'
}
},
'graph': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
},
'lineStyle': {
'width': '1',
'color': '#ffffff'
},
'symbolSize': '0',
'symbol': 'circle',
'smooth': true,
'color': [
'#fc97af',
'#87f7cf',
'#f7f494',
'#72ccff',
'#f7c5a0',
'#d4a4eb',
'#d2f5a6',
'#76f2f2'
],
'label': {
'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': {
'color': '#293441'
},
'emphasis': {
'label': {
'color': '#293441'
}
}
}
})
}))
datax-ui/src/views/visual/datachart/components/widgets/themes/dark.js 0 → 100644
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory)
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'))
} else {
// Browser globals
factory({}, root.echarts)
}
}(this, function(exports, echarts) {
var log = function(msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg)
}
}
if (!echarts) {
log('ECharts is not Loaded')
return
}
echarts.registerTheme('dark', {
'color': [
'#dd6b66',
'#759aa0',
'#e69d87',
'#8dc1a9',
'#ea7e53',
'#eedd78',
'#73a373',
'#73b9bc',
'#7289ab',
'#91ca8c',
'#f49f42'
],
'backgroundColor': 'rgba(51,51,51,1)',
'textStyle': {},
'title': {
'textStyle': {
'color': '#eeeeee'
},
'subtextStyle': {
'color': '#aaaaaa'
}
},
'line': {
'itemStyle': {
'borderWidth': 1
},
'lineStyle': {
'width': 2
},
'symbolSize': 4,
'symbol': 'circle',
'smooth': false
},
'radar': {
'itemStyle': {
'borderWidth': 1
},
'lineStyle': {
'width': 2
},
'symbolSize': 4,
'symbol': 'circle',
'smooth': false
},
'bar': {
'itemStyle': {
'barBorderWidth': 0,
'barBorderColor': '#ccc'
}
},
'pie': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'scatter': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'boxplot': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'parallel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'sankey': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'funnel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'gauge': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'candlestick': {
'itemStyle': {
'color': '#fd1050',
'color0': '#0cf49b',
'borderColor': '#fd1050',
'borderColor0': '#0cf49b',
'borderWidth': 1
}
},
'graph': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
},
'lineStyle': {
'width': 1,
'color': '#aaaaaa'
},
'symbolSize': 4,
'symbol': 'circle',
'smooth': false,
'color': [
'#dd6b66',
'#759aa0',
'#e69d87',
'#8dc1a9',
'#ea7e53',
'#eedd78',
'#73a373',
'#73b9bc',
'#7289ab',
'#91ca8c',
'#f49f42'
],
'label': {
'color': '#eeeeee'
}
},
'map': {
'itemStyle': {
'normal': {
'areaColor': '#eee',
'borderColor': '#444',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': 'rgba(255,215,0,0.8)',
'borderColor': '#444',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#000'
}
},
'emphasis': {
'textStyle': {
'color': 'rgb(100,0,0)'
}
}
}
},
'geo': {
'itemStyle': {
'normal': {
'areaColor': '#eee',
'borderColor': '#444',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': 'rgba(255,215,0,0.8)',
'borderColor': '#444',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#000'
}
},
'emphasis': {
'textStyle': {
'color': 'rgb(100,0,0)'
}
}
}
},
'categoryAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#eeeeee'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#eeeeee'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#eeeeee'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#aaaaaa'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'#eeeeee'
]
}
}
},
'valueAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#eeeeee'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#eeeeee'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#eeeeee'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#aaaaaa'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'#eeeeee'
]
}
}
},
'logAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#eeeeee'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#eeeeee'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#eeeeee'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#aaaaaa'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'#eeeeee'
]
}
}
},
'timeAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#eeeeee'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#eeeeee'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#eeeeee'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#aaaaaa'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'#eeeeee'
]
}
}
},
'toolbox': {
'iconStyle': {
'normal': {
'borderColor': '#999999'
},
'emphasis': {
'borderColor': '#666666'
}
}
},
'legend': {
'textStyle': {
'color': '#eeeeee'
}
},
'tooltip': {
'axisPointer': {
'lineStyle': {
'color': '#eeeeee',
'width': '1'
},
'crossStyle': {
'color': '#eeeeee',
'width': '1'
}
}
},
'timeline': {
'lineStyle': {
'color': '#eeeeee',
'width': 1
},
'itemStyle': {
'normal': {
'color': '#dd6b66',
'borderWidth': 1
},
'emphasis': {
'color': '#a9334c'
}
},
'controlStyle': {
'normal': {
'color': '#eeeeee',
'borderColor': '#eeeeee',
'borderWidth': 0.5
},
'emphasis': {
'color': '#eeeeee',
'borderColor': '#eeeeee',
'borderWidth': 0.5
}
},
'checkpointStyle': {
'color': '#e43c59',
'borderColor': 'rgba(194,53,49,0.5)'
},
'label': {
'normal': {
'textStyle': {
'color': '#eeeeee'
}
},
'emphasis': {
'textStyle': {
'color': '#eeeeee'
}
}
}
},
'visualMap': {
'color': [
'#bf444c',
'#d88273',
'#f6efa6'
]
},
'dataZoom': {
'backgroundColor': 'rgba(47,69,84,0)',
'dataBackgroundColor': 'rgba(255,255,255,0.3)',
'fillerColor': 'rgba(167,183,204,0.4)',
'handleColor': '#a7b7cc',
'handleSize': '100%',
'textStyle': {
'color': '#eeeeee'
}
},
'markPoint': {
'label': {
'color': '#eeeeee'
},
'emphasis': {
'label': {
'color': '#eeeeee'
}
}
}
})
}))
datax-ui/src/views/visual/datachart/components/widgets/themes/essos.js 0 → 100644
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory)
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'))
} else {
// Browser globals
factory({}, root.echarts)
}
}(this, function(exports, echarts) {
var log = function(msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg)
}
}
if (!echarts) {
log('ECharts is not Loaded')
return
}
echarts.registerTheme('essos', {
'color': [
'#893448',
'#d95850',
'#eb8146',
'#ffb248',
'#f2d643',
'#ebdba4'
],
'backgroundColor': 'rgba(242,234,191,0.15)',
'textStyle': {},
'title': {
'textStyle': {
'color': '#893448'
},
'subtextStyle': {
'color': '#d95850'
}
},
'line': {
'itemStyle': {
'borderWidth': '2'
},
'lineStyle': {
'width': '2'
},
'symbolSize': '6',
'symbol': 'emptyCircle',
'smooth': true
},
'radar': {
'itemStyle': {
'borderWidth': '2'
},
'lineStyle': {
'width': '2'
},
'symbolSize': '6',
'symbol': 'emptyCircle',
'smooth': true
},
'bar': {
'itemStyle': {
'barBorderWidth': 0,
'barBorderColor': '#ccc'
}
},
'pie': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'scatter': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'boxplot': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'parallel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'sankey': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'funnel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'gauge': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'candlestick': {
'itemStyle': {
'color': '#eb8146',
'color0': 'transparent',
'borderColor': '#d95850',
'borderColor0': '#58c470',
'borderWidth': '2'
}
},
'graph': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
},
'lineStyle': {
'width': 1,
'color': '#aaaaaa'
},
'symbolSize': '6',
'symbol': 'emptyCircle',
'smooth': true,
'color': [
'#893448',
'#d95850',
'#eb8146',
'#ffb248',
'#f2d643',
'#ebdba4'
],
'label': {
'color': '#ffffff'
}
},
'map': {
'itemStyle': {
'normal': {
'areaColor': '#f3f3f3',
'borderColor': '#999999',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': '#ffb248',
'borderColor': '#eb8146',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#893448'
}
},
'emphasis': {
'textStyle': {
'color': '#893448'
}
}
}
},
'geo': {
'itemStyle': {
'normal': {
'areaColor': '#f3f3f3',
'borderColor': '#999999',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': '#ffb248',
'borderColor': '#eb8146',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#893448'
}
},
'emphasis': {
'textStyle': {
'color': '#893448'
}
}
}
},
'categoryAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#aaaaaa'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#999999'
}
},
'splitLine': {
'show': true,
'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': '#aaaaaa'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#999999'
}
},
'splitLine': {
'show': true,
'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': '#aaaaaa'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#999999'
}
},
'splitLine': {
'show': true,
'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': '#aaaaaa'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#999999'
}
},
'splitLine': {
'show': true,
'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': '#893448',
'width': 1
},
'itemStyle': {
'normal': {
'color': '#893448',
'borderWidth': 1
},
'emphasis': {
'color': '#ffb248'
}
},
'controlStyle': {
'normal': {
'color': '#893448',
'borderColor': '#893448',
'borderWidth': 0.5
},
'emphasis': {
'color': '#893448',
'borderColor': '#893448',
'borderWidth': 0.5
}
},
'checkpointStyle': {
'color': '#eb8146',
'borderColor': 'rgba(255,178,72,0.41)'
},
'label': {
'normal': {
'textStyle': {
'color': '#893448'
}
},
'emphasis': {
'textStyle': {
'color': '#893448'
}
}
}
},
'visualMap': {
'color': [
'#893448',
'#d95850',
'#eb8146',
'#ffb248',
'#f2d643',
'rgb(247,238,173)'
]
},
'dataZoom': {
'backgroundColor': 'rgba(255,255,255,0)',
'dataBackgroundColor': 'rgba(255,178,72,0.5)',
'fillerColor': 'rgba(255,178,72,0.15)',
'handleColor': '#ffb248',
'handleSize': '100%',
'textStyle': {
'color': '#333333'
}
},
'markPoint': {
'label': {
'color': '#ffffff'
},
'emphasis': {
'label': {
'color': '#ffffff'
}
}
}
})
}))
datax-ui/src/views/visual/datachart/components/widgets/themes/infographic.js 0 → 100644
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory)
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'))
} else {
// Browser globals
factory({}, root.echarts)
}
}(this, function(exports, echarts) {
var log = function(msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg)
}
}
if (!echarts) {
log('ECharts is not Loaded')
return
}
echarts.registerTheme('infographic', {
'color': [
'#c1232b',
'#27727b',
'#fcce10',
'#e87c25',
'#b5c334',
'#fe8463',
'#9bca63',
'#fad860',
'#f3a43b',
'#60c0dd',
'#d7504b',
'#c6e579',
'#f4e001',
'#f0805a',
'#26c0c0'
],
'backgroundColor': 'rgba(0,0,0,0)',
'textStyle': {},
'title': {
'textStyle': {
'color': '#27727b'
},
'subtextStyle': {
'color': '#aaaaaa'
}
},
'line': {
'itemStyle': {
'borderWidth': 1
},
'lineStyle': {
'width': '3'
},
'symbolSize': '5',
'symbol': 'emptyCircle',
'smooth': false
},
'radar': {
'itemStyle': {
'borderWidth': 1
},
'lineStyle': {
'width': '3'
},
'symbolSize': '5',
'symbol': 'emptyCircle',
'smooth': false
},
'bar': {
'itemStyle': {
'barBorderWidth': 0,
'barBorderColor': '#ccc'
}
},
'pie': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'scatter': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'boxplot': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'parallel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'sankey': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'funnel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'gauge': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'candlestick': {
'itemStyle': {
'color': '#c1232b',
'color0': '#b5c334',
'borderColor': '#c1232b',
'borderColor0': '#b5c334',
'borderWidth': 1
}
},
'graph': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
},
'lineStyle': {
'width': 1,
'color': '#aaaaaa'
},
'symbolSize': '5',
'symbol': 'emptyCircle',
'smooth': false,
'color': [
'#c1232b',
'#27727b',
'#fcce10',
'#e87c25',
'#b5c334',
'#fe8463',
'#9bca63',
'#fad860',
'#f3a43b',
'#60c0dd',
'#d7504b',
'#c6e579',
'#f4e001',
'#f0805a',
'#26c0c0'
],
'label': {
'color': '#eeeeee'
}
},
'map': {
'itemStyle': {
'normal': {
'areaColor': '#dddddd',
'borderColor': '#eeeeee',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': '#fe994e',
'borderColor': '#444',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#c1232b'
}
},
'emphasis': {
'textStyle': {
'color': 'rgb(100,0,0)'
}
}
}
},
'geo': {
'itemStyle': {
'normal': {
'areaColor': '#dddddd',
'borderColor': '#eeeeee',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': '#fe994e',
'borderColor': '#444',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#c1232b'
}
},
'emphasis': {
'textStyle': {
'color': 'rgb(100,0,0)'
}
}
}
},
'categoryAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#27727b'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#27727b'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': false,
'lineStyle': {
'color': [
'#ccc'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'valueAxis': {
'axisLine': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#ccc'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'logAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#27727b'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#ccc'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'timeAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#27727b'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#ccc'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'toolbox': {
'iconStyle': {
'normal': {
'borderColor': '#c1232b'
},
'emphasis': {
'borderColor': '#e87c25'
}
}
},
'legend': {
'textStyle': {
'color': '#333333'
}
},
'tooltip': {
'axisPointer': {
'lineStyle': {
'color': '#27727b',
'width': 1
},
'crossStyle': {
'color': '#27727b',
'width': 1
}
}
},
'timeline': {
'lineStyle': {
'color': '#293c55',
'width': 1
},
'itemStyle': {
'normal': {
'color': '#27727b',
'borderWidth': 1
},
'emphasis': {
'color': '#72d4e0'
}
},
'controlStyle': {
'normal': {
'color': '#27727b',
'borderColor': '#27727b',
'borderWidth': 0.5
},
'emphasis': {
'color': '#27727b',
'borderColor': '#27727b',
'borderWidth': 0.5
}
},
'checkpointStyle': {
'color': '#c1232b',
'borderColor': 'rgba(194,53,49,0.5)'
},
'label': {
'normal': {
'textStyle': {
'color': '#293c55'
}
},
'emphasis': {
'textStyle': {
'color': '#293c55'
}
}
}
},
'visualMap': {
'color': [
'#c1232b',
'#fcce10'
]
},
'dataZoom': {
'backgroundColor': 'rgba(0,0,0,0)',
'dataBackgroundColor': 'rgba(181,195,52,0.3)',
'fillerColor': 'rgba(181,195,52,0.2)',
'handleColor': '#27727b',
'handleSize': '100%',
'textStyle': {
'color': '#999999'
}
},
'markPoint': {
'label': {
'color': '#eeeeee'
},
'emphasis': {
'label': {
'color': '#eeeeee'
}
}
}
})
}))
datax-ui/src/views/visual/datachart/components/widgets/themes/macarons.js 0 → 100644
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory)
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'))
} else {
// Browser globals
factory({}, root.echarts)
}
}(this, function(exports, echarts) {
var log = function(msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg)
}
}
if (!echarts) {
log('ECharts is not Loaded')
return
}
echarts.registerTheme('macarons', {
'color': [
'#2ec7c9',
'#b6a2de',
'#5ab1ef',
'#ffb980',
'#d87a80',
'#8d98b3',
'#e5cf0d',
'#97b552',
'#95706d',
'#dc69aa',
'#07a2a4',
'#9a7fd1',
'#588dd5',
'#f5994e',
'#c05050',
'#59678c',
'#c9ab00',
'#7eb00a',
'#6f5553',
'#c14089'
],
'backgroundColor': 'rgba(0,0,0,0)',
'textStyle': {},
'title': {
'textStyle': {
'color': '#008acd'
},
'subtextStyle': {
'color': '#aaaaaa'
}
},
'line': {
'itemStyle': {
'borderWidth': 1
},
'lineStyle': {
'width': 2
},
'symbolSize': 3,
'symbol': 'emptyCircle',
'smooth': true
},
'radar': {
'itemStyle': {
'borderWidth': 1
},
'lineStyle': {
'width': 2
},
'symbolSize': 3,
'symbol': 'emptyCircle',
'smooth': true
},
'bar': {
'itemStyle': {
'barBorderWidth': 0,
'barBorderColor': '#ccc'
}
},
'pie': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'scatter': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'boxplot': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'parallel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'sankey': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'funnel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'gauge': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'candlestick': {
'itemStyle': {
'color': '#d87a80',
'color0': '#2ec7c9',
'borderColor': '#d87a80',
'borderColor0': '#2ec7c9',
'borderWidth': 1
}
},
'graph': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
},
'lineStyle': {
'width': 1,
'color': '#aaaaaa'
},
'symbolSize': 3,
'symbol': 'emptyCircle',
'smooth': true,
'color': [
'#2ec7c9',
'#b6a2de',
'#5ab1ef',
'#ffb980',
'#d87a80',
'#8d98b3',
'#e5cf0d',
'#97b552',
'#95706d',
'#dc69aa',
'#07a2a4',
'#9a7fd1',
'#588dd5',
'#f5994e',
'#c05050',
'#59678c',
'#c9ab00',
'#7eb00a',
'#6f5553',
'#c14089'
],
'label': {
'color': '#eeeeee'
}
},
'map': {
'itemStyle': {
'normal': {
'areaColor': '#dddddd',
'borderColor': '#eeeeee',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': 'rgba(254,153,78,1)',
'borderColor': '#444',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#d87a80'
}
},
'emphasis': {
'textStyle': {
'color': 'rgb(100,0,0)'
}
}
}
},
'geo': {
'itemStyle': {
'normal': {
'areaColor': '#dddddd',
'borderColor': '#eeeeee',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': 'rgba(254,153,78,1)',
'borderColor': '#444',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#d87a80'
}
},
'emphasis': {
'textStyle': {
'color': 'rgb(100,0,0)'
}
}
}
},
'categoryAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#008acd'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': false,
'lineStyle': {
'color': [
'#eee'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'valueAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#008acd'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#eee'
]
}
},
'splitArea': {
'show': true,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'logAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#008acd'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#eee'
]
}
},
'splitArea': {
'show': true,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'timeAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#008acd'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#eee'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'toolbox': {
'iconStyle': {
'normal': {
'borderColor': '#2ec7c9'
},
'emphasis': {
'borderColor': '#18a4a6'
}
}
},
'legend': {
'textStyle': {
'color': '#333333'
}
},
'tooltip': {
'axisPointer': {
'lineStyle': {
'color': '#008acd',
'width': '1'
},
'crossStyle': {
'color': '#008acd',
'width': '1'
}
}
},
'timeline': {
'lineStyle': {
'color': '#008acd',
'width': 1
},
'itemStyle': {
'normal': {
'color': '#008acd',
'borderWidth': 1
},
'emphasis': {
'color': '#a9334c'
}
},
'controlStyle': {
'normal': {
'color': '#008acd',
'borderColor': '#008acd',
'borderWidth': 0.5
},
'emphasis': {
'color': '#008acd',
'borderColor': '#008acd',
'borderWidth': 0.5
}
},
'checkpointStyle': {
'color': '#2ec7c9',
'borderColor': 'rgba(46,199,201,0.4)'
},
'label': {
'normal': {
'textStyle': {
'color': '#008acd'
}
},
'emphasis': {
'textStyle': {
'color': '#008acd'
}
}
}
},
'visualMap': {
'color': [
'#5ab1ef',
'#e0ffff'
]
},
'dataZoom': {
'backgroundColor': 'rgba(47,69,84,0)',
'dataBackgroundColor': 'rgba(239,239,255,1)',
'fillerColor': 'rgba(182,162,222,0.2)',
'handleColor': '#008acd',
'handleSize': '100%',
'textStyle': {
'color': '#333333'
}
},
'markPoint': {
'label': {
'color': '#eeeeee'
},
'emphasis': {
'label': {
'color': '#eeeeee'
}
}
}
})
}))
datax-ui/src/views/visual/datachart/components/widgets/themes/purple-passion.js 0 → 100644
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory)
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'))
} else {
// Browser globals
factory({}, root.echarts)
}
}(this, function(exports, echarts) {
var log = function(msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg)
}
}
if (!echarts) {
log('ECharts is not Loaded')
return
}
echarts.registerTheme('purple-passion', {
'color': [
'#9b8bba',
'#e098c7',
'#8fd3e8',
'#71669e',
'#cc70af',
'#7cb4cc'
],
'backgroundColor': 'rgba(91,92,110,1)',
'textStyle': {},
'title': {
'textStyle': {
'color': '#ffffff'
},
'subtextStyle': {
'color': '#cccccc'
}
},
'line': {
'itemStyle': {
'borderWidth': '2'
},
'lineStyle': {
'width': '3'
},
'symbolSize': '7',
'symbol': 'circle',
'smooth': true
},
'radar': {
'itemStyle': {
'borderWidth': '2'
},
'lineStyle': {
'width': '3'
},
'symbolSize': '7',
'symbol': 'circle',
'smooth': true
},
'bar': {
'itemStyle': {
'barBorderWidth': 0,
'barBorderColor': '#ccc'
}
},
'pie': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'scatter': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'boxplot': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'parallel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'sankey': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'funnel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'gauge': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'candlestick': {
'itemStyle': {
'color': '#e098c7',
'color0': 'transparent',
'borderColor': '#e098c7',
'borderColor0': '#8fd3e8',
'borderWidth': '2'
}
},
'graph': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
},
'lineStyle': {
'width': 1,
'color': '#aaaaaa'
},
'symbolSize': '7',
'symbol': 'circle',
'smooth': true,
'color': [
'#9b8bba',
'#e098c7',
'#8fd3e8',
'#71669e',
'#cc70af',
'#7cb4cc'
],
'label': {
'color': '#eeeeee'
}
},
'map': {
'itemStyle': {
'normal': {
'areaColor': '#eee',
'borderColor': '#444',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': '#e098c7',
'borderColor': '#444',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#000'
}
},
'emphasis': {
'textStyle': {
'color': '#ffffff'
}
}
}
},
'geo': {
'itemStyle': {
'normal': {
'areaColor': '#eee',
'borderColor': '#444',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': '#e098c7',
'borderColor': '#444',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#000'
}
},
'emphasis': {
'textStyle': {
'color': '#ffffff'
}
}
}
},
'categoryAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#cccccc'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#cccccc'
}
},
'splitLine': {
'show': false,
'lineStyle': {
'color': [
'#eeeeee',
'#333333'
]
}
},
'splitArea': {
'show': true,
'areaStyle': {
'color': [
'rgba(250,250,250,0.05)',
'rgba(200,200,200,0.02)'
]
}
}
},
'valueAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#cccccc'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#cccccc'
}
},
'splitLine': {
'show': false,
'lineStyle': {
'color': [
'#eeeeee',
'#333333'
]
}
},
'splitArea': {
'show': true,
'areaStyle': {
'color': [
'rgba(250,250,250,0.05)',
'rgba(200,200,200,0.02)'
]
}
}
},
'logAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#cccccc'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#cccccc'
}
},
'splitLine': {
'show': false,
'lineStyle': {
'color': [
'#eeeeee',
'#333333'
]
}
},
'splitArea': {
'show': true,
'areaStyle': {
'color': [
'rgba(250,250,250,0.05)',
'rgba(200,200,200,0.02)'
]
}
}
},
'timeAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#cccccc'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#cccccc'
}
},
'splitLine': {
'show': false,
'lineStyle': {
'color': [
'#eeeeee',
'#333333'
]
}
},
'splitArea': {
'show': true,
'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': '#cccccc'
}
},
'tooltip': {
'axisPointer': {
'lineStyle': {
'color': '#cccccc',
'width': 1
},
'crossStyle': {
'color': '#cccccc',
'width': 1
}
}
},
'timeline': {
'lineStyle': {
'color': '#8fd3e8',
'width': 1
},
'itemStyle': {
'normal': {
'color': '#8fd3e8',
'borderWidth': 1
},
'emphasis': {
'color': '#8fd3e8'
}
},
'controlStyle': {
'normal': {
'color': '#8fd3e8',
'borderColor': '#8fd3e8',
'borderWidth': 0.5
},
'emphasis': {
'color': '#8fd3e8',
'borderColor': '#8fd3e8',
'borderWidth': 0.5
}
},
'checkpointStyle': {
'color': '#8fd3e8',
'borderColor': 'rgba(138,124,168,0.37)'
},
'label': {
'normal': {
'textStyle': {
'color': '#8fd3e8'
}
},
'emphasis': {
'textStyle': {
'color': '#8fd3e8'
}
}
}
},
'visualMap': {
'color': [
'#8a7ca8',
'#e098c7',
'#cceffa'
]
},
'dataZoom': {
'backgroundColor': 'rgba(0,0,0,0)',
'dataBackgroundColor': 'rgba(255,255,255,0.3)',
'fillerColor': 'rgba(167,183,204,0.4)',
'handleColor': '#a7b7cc',
'handleSize': '100%',
'textStyle': {
'color': '#333333'
}
},
'markPoint': {
'label': {
'color': '#eeeeee'
},
'emphasis': {
'label': {
'color': '#eeeeee'
}
}
}
})
}))
datax-ui/src/views/visual/datachart/components/widgets/themes/roma.js 0 → 100644
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory)
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'))
} else {
// Browser globals
factory({}, root.echarts)
}
}(this, function(exports, echarts) {
var log = function(msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg)
}
}
if (!echarts) {
log('ECharts is not Loaded')
return
}
echarts.registerTheme('roma', {
'color': [
'#e01f54',
'#001852',
'#f5e8c8',
'#b8d2c7',
'#c6b38e',
'#a4d8c2',
'#f3d999',
'#d3758f',
'#dcc392',
'#2e4783',
'#82b6e9',
'#ff6347',
'#a092f1',
'#0a915d',
'#eaf889',
'#6699FF',
'#ff6666',
'#3cb371',
'#d5b158',
'#38b6b6'
],
'backgroundColor': 'rgba(0,0,0,0)',
'textStyle': {},
'title': {
'textStyle': {
'color': '#333333'
},
'subtextStyle': {
'color': '#aaaaaa'
}
},
'line': {
'itemStyle': {
'borderWidth': 1
},
'lineStyle': {
'width': 2
},
'symbolSize': 4,
'symbol': 'emptyCircle',
'smooth': false
},
'radar': {
'itemStyle': {
'borderWidth': 1
},
'lineStyle': {
'width': 2
},
'symbolSize': 4,
'symbol': 'emptyCircle',
'smooth': false
},
'bar': {
'itemStyle': {
'barBorderWidth': 0,
'barBorderColor': '#ccc'
}
},
'pie': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'scatter': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'boxplot': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'parallel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'sankey': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'funnel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'gauge': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'candlestick': {
'itemStyle': {
'color': '#e01f54',
'color0': '#001852',
'borderColor': '#f5e8c8',
'borderColor0': '#b8d2c7',
'borderWidth': 1
}
},
'graph': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
},
'lineStyle': {
'width': 1,
'color': '#aaaaaa'
},
'symbolSize': 4,
'symbol': 'emptyCircle',
'smooth': false,
'color': [
'#e01f54',
'#001852',
'#f5e8c8',
'#b8d2c7',
'#c6b38e',
'#a4d8c2',
'#f3d999',
'#d3758f',
'#dcc392',
'#2e4783',
'#82b6e9',
'#ff6347',
'#a092f1',
'#0a915d',
'#eaf889',
'#6699FF',
'#ff6666',
'#3cb371',
'#d5b158',
'#38b6b6'
],
'label': {
'color': '#eeeeee'
}
},
'map': {
'itemStyle': {
'normal': {
'areaColor': '#eeeeee',
'borderColor': '#444444',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': 'rgba(255,215,0,0.8)',
'borderColor': '#444',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#000000'
}
},
'emphasis': {
'textStyle': {
'color': 'rgb(100,0,0)'
}
}
}
},
'geo': {
'itemStyle': {
'normal': {
'areaColor': '#eeeeee',
'borderColor': '#444444',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': 'rgba(255,215,0,0.8)',
'borderColor': '#444',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#000000'
}
},
'emphasis': {
'textStyle': {
'color': 'rgb(100,0,0)'
}
}
}
},
'categoryAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': false,
'lineStyle': {
'color': [
'#ccc'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'valueAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#ccc'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'logAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#ccc'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'timeAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#ccc'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'toolbox': {
'iconStyle': {
'normal': {
'borderColor': '#999999'
},
'emphasis': {
'borderColor': '#666666'
}
}
},
'legend': {
'textStyle': {
'color': '#333333'
}
},
'tooltip': {
'axisPointer': {
'lineStyle': {
'color': '#cccccc',
'width': 1
},
'crossStyle': {
'color': '#cccccc',
'width': 1
}
}
},
'timeline': {
'lineStyle': {
'color': '#293c55',
'width': 1
},
'itemStyle': {
'normal': {
'color': '#293c55',
'borderWidth': 1
},
'emphasis': {
'color': '#a9334c'
}
},
'controlStyle': {
'normal': {
'color': '#293c55',
'borderColor': '#293c55',
'borderWidth': 0.5
},
'emphasis': {
'color': '#293c55',
'borderColor': '#293c55',
'borderWidth': 0.5
}
},
'checkpointStyle': {
'color': '#e43c59',
'borderColor': 'rgba(194,53,49,0.5)'
},
'label': {
'normal': {
'textStyle': {
'color': '#293c55'
}
},
'emphasis': {
'textStyle': {
'color': '#293c55'
}
}
}
},
'visualMap': {
'color': [
'#e01f54',
'#e7dbc3'
]
},
'dataZoom': {
'backgroundColor': 'rgba(47,69,84,0)',
'dataBackgroundColor': 'rgba(47,69,84,0.3)',
'fillerColor': 'rgba(167,183,204,0.4)',
'handleColor': '#a7b7cc',
'handleSize': '100%',
'textStyle': {
'color': '#333333'
}
},
'markPoint': {
'label': {
'color': '#eeeeee'
},
'emphasis': {
'label': {
'color': '#eeeeee'
}
}
}
})
}))
datax-ui/src/views/visual/datachart/components/widgets/themes/shine.js 0 → 100644
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory)
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'))
} else {
// Browser globals
factory({}, root.echarts)
}
}(this, function(exports, echarts) {
var log = function(msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg)
}
}
if (!echarts) {
log('ECharts is not Loaded')
return
}
echarts.registerTheme('shine', {
'color': [
'#c12e34',
'#e6b600',
'#0098d9',
'#2b821d',
'#005eaa',
'#339ca8',
'#cda819',
'#32a487'
],
'backgroundColor': 'rgba(0,0,0,0)',
'textStyle': {},
'title': {
'textStyle': {
'color': '#333333'
},
'subtextStyle': {
'color': '#aaaaaa'
}
},
'line': {
'itemStyle': {
'borderWidth': 1
},
'lineStyle': {
'width': 2
},
'symbolSize': 4,
'symbol': 'emptyCircle',
'smooth': false
},
'radar': {
'itemStyle': {
'borderWidth': 1
},
'lineStyle': {
'width': 2
},
'symbolSize': 4,
'symbol': 'emptyCircle',
'smooth': false
},
'bar': {
'itemStyle': {
'barBorderWidth': 0,
'barBorderColor': '#ccc'
}
},
'pie': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'scatter': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'boxplot': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'parallel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'sankey': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'funnel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'gauge': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'candlestick': {
'itemStyle': {
'color': '#c12e34',
'color0': '#2b821d',
'borderColor': '#c12e34',
'borderColor0': '#2b821d',
'borderWidth': 1
}
},
'graph': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
},
'lineStyle': {
'width': 1,
'color': '#aaaaaa'
},
'symbolSize': 4,
'symbol': 'emptyCircle',
'smooth': false,
'color': [
'#c12e34',
'#e6b600',
'#0098d9',
'#2b821d',
'#005eaa',
'#339ca8',
'#cda819',
'#32a487'
],
'label': {
'color': '#eeeeee'
}
},
'map': {
'itemStyle': {
'normal': {
'areaColor': '#ddd',
'borderColor': '#eee',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': '#e6b600',
'borderColor': '#ddd',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#c12e34'
}
},
'emphasis': {
'textStyle': {
'color': '#c12e34'
}
}
}
},
'geo': {
'itemStyle': {
'normal': {
'areaColor': '#ddd',
'borderColor': '#eee',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': '#e6b600',
'borderColor': '#ddd',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#c12e34'
}
},
'emphasis': {
'textStyle': {
'color': '#c12e34'
}
}
}
},
'categoryAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': false,
'lineStyle': {
'color': [
'#ccc'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'valueAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#ccc'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'logAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#ccc'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'timeAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#ccc'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'toolbox': {
'iconStyle': {
'normal': {
'borderColor': '#06467c'
},
'emphasis': {
'borderColor': '#4187c2'
}
}
},
'legend': {
'textStyle': {
'color': '#333333'
}
},
'tooltip': {
'axisPointer': {
'lineStyle': {
'color': '#cccccc',
'width': 1
},
'crossStyle': {
'color': '#cccccc',
'width': 1
}
}
},
'timeline': {
'lineStyle': {
'color': '#005eaa',
'width': 1
},
'itemStyle': {
'normal': {
'color': '#005eaa',
'borderWidth': 1
},
'emphasis': {
'color': '#005eaa'
}
},
'controlStyle': {
'normal': {
'color': '#005eaa',
'borderColor': '#005eaa',
'borderWidth': 0.5
},
'emphasis': {
'color': '#005eaa',
'borderColor': '#005eaa',
'borderWidth': 0.5
}
},
'checkpointStyle': {
'color': '#005eaa',
'borderColor': 'rgba(49,107,194,0.5)'
},
'label': {
'normal': {
'textStyle': {
'color': '#005eaa'
}
},
'emphasis': {
'textStyle': {
'color': '#005eaa'
}
}
}
},
'visualMap': {
'color': [
'#1790cf',
'#a2d4e6'
]
},
'dataZoom': {
'backgroundColor': 'rgba(47,69,84,0)',
'dataBackgroundColor': 'rgba(47,69,84,0.3)',
'fillerColor': 'rgba(167,183,204,0.4)',
'handleColor': '#a7b7cc',
'handleSize': '100%',
'textStyle': {
'color': '#333333'
}
},
'markPoint': {
'label': {
'color': '#eeeeee'
},
'emphasis': {
'label': {
'color': '#eeeeee'
}
}
}
})
}))
datax-ui/src/views/visual/datachart/components/widgets/themes/vintage.js 0 → 100644
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory)
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'))
} else {
// Browser globals
factory({}, root.echarts)
}
}(this, function(exports, echarts) {
var log = function(msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg)
}
}
if (!echarts) {
log('ECharts is not Loaded')
return
}
echarts.registerTheme('vintage', {
'color': [
'#d87c7c',
'#919e8b',
'#d7ab82',
'#6e7074',
'#61a0a8',
'#efa18d',
'#787464',
'#cc7e63',
'#724e58',
'#4b565b'
],
'backgroundColor': 'rgba(254,248,239,1)',
'textStyle': {},
'title': {
'textStyle': {
'color': '#333333'
},
'subtextStyle': {
'color': '#aaaaaa'
}
},
'line': {
'itemStyle': {
'borderWidth': 1
},
'lineStyle': {
'width': 2
},
'symbolSize': 4,
'symbol': 'emptyCircle',
'smooth': false
},
'radar': {
'itemStyle': {
'borderWidth': 1
},
'lineStyle': {
'width': 2
},
'symbolSize': 4,
'symbol': 'emptyCircle',
'smooth': false
},
'bar': {
'itemStyle': {
'barBorderWidth': 0,
'barBorderColor': '#ccc'
}
},
'pie': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'scatter': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'boxplot': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'parallel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'sankey': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'funnel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'gauge': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'candlestick': {
'itemStyle': {
'color': '#c23531',
'color0': '#314656',
'borderColor': '#c23531',
'borderColor0': '#314656',
'borderWidth': 1
}
},
'graph': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
},
'lineStyle': {
'width': 1,
'color': '#aaaaaa'
},
'symbolSize': 4,
'symbol': 'emptyCircle',
'smooth': false,
'color': [
'#d87c7c',
'#919e8b',
'#d7ab82',
'#6e7074',
'#61a0a8',
'#efa18d',
'#787464',
'#cc7e63',
'#724e58',
'#4b565b'
],
'label': {
'color': '#eeeeee'
}
},
'map': {
'itemStyle': {
'normal': {
'areaColor': '#eeeeee',
'borderColor': '#444444',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': 'rgba(255,215,0,0.8)',
'borderColor': '#444444',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#000000'
}
},
'emphasis': {
'textStyle': {
'color': 'rgb(100,0,0)'
}
}
}
},
'geo': {
'itemStyle': {
'normal': {
'areaColor': '#eeeeee',
'borderColor': '#444444',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': 'rgba(255,215,0,0.8)',
'borderColor': '#444444',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#000000'
}
},
'emphasis': {
'textStyle': {
'color': 'rgb(100,0,0)'
}
}
}
},
'categoryAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': false,
'lineStyle': {
'color': [
'#ccc'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'valueAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#ccc'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'logAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#ccc'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'timeAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisTick': {
'show': true,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#333'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#ccc'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.3)',
'rgba(200,200,200,0.3)'
]
}
}
},
'toolbox': {
'iconStyle': {
'normal': {
'borderColor': '#999999'
},
'emphasis': {
'borderColor': '#666666'
}
}
},
'legend': {
'textStyle': {
'color': '#333333'
}
},
'tooltip': {
'axisPointer': {
'lineStyle': {
'color': '#cccccc',
'width': 1
},
'crossStyle': {
'color': '#cccccc',
'width': 1
}
}
},
'timeline': {
'lineStyle': {
'color': '#293c55',
'width': 1
},
'itemStyle': {
'normal': {
'color': '#293c55',
'borderWidth': 1
},
'emphasis': {
'color': '#a9334c'
}
},
'controlStyle': {
'normal': {
'color': '#293c55',
'borderColor': '#293c55',
'borderWidth': 0.5
},
'emphasis': {
'color': '#293c55',
'borderColor': '#293c55',
'borderWidth': 0.5
}
},
'checkpointStyle': {
'color': '#e43c59',
'borderColor': 'rgba(194,53,49,0.5)'
},
'label': {
'normal': {
'textStyle': {
'color': '#293c55'
}
},
'emphasis': {
'textStyle': {
'color': '#293c55'
}
}
}
},
'visualMap': {
'color': [
'#bf444c',
'#d88273',
'#f6efa6'
]
},
'dataZoom': {
'backgroundColor': 'rgba(47,69,84,0)',
'dataBackgroundColor': 'rgba(47,69,84,0.3)',
'fillerColor': 'rgba(167,183,204,0.4)',
'handleColor': '#a7b7cc',
'handleSize': '100%',
'textStyle': {
'color': '#333333'
}
},
'markPoint': {
'label': {
'color': '#eeeeee'
},
'emphasis': {
'label': {
'color': '#eeeeee'
}
}
}
})
}))
datax-ui/src/views/visual/datachart/components/widgets/themes/walden.js 0 → 100644
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory)
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'))
} else {
// Browser globals
factory({}, root.echarts)
}
}(this, function(exports, echarts) {
var log = function(msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg)
}
}
if (!echarts) {
log('ECharts is not Loaded')
return
}
echarts.registerTheme('walden', {
'color': [
'#3fb1e3',
'#6be6c1',
'#626c91',
'#a0a7e6',
'#c4ebad',
'#96dee8'
],
'backgroundColor': 'rgba(252,252,252,0)',
'textStyle': {},
'title': {
'textStyle': {
'color': '#666666'
},
'subtextStyle': {
'color': '#999999'
}
},
'line': {
'itemStyle': {
'borderWidth': '2'
},
'lineStyle': {
'width': '3'
},
'symbolSize': '8',
'symbol': 'emptyCircle',
'smooth': false
},
'radar': {
'itemStyle': {
'borderWidth': '2'
},
'lineStyle': {
'width': '3'
},
'symbolSize': '8',
'symbol': 'emptyCircle',
'smooth': false
},
'bar': {
'itemStyle': {
'barBorderWidth': 0,
'barBorderColor': '#ccc'
}
},
'pie': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'scatter': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'boxplot': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'parallel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'sankey': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'funnel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'gauge': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'candlestick': {
'itemStyle': {
'color': '#e6a0d2',
'color0': 'transparent',
'borderColor': '#e6a0d2',
'borderColor0': '#3fb1e3',
'borderWidth': '2'
}
},
'graph': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
},
'lineStyle': {
'width': '1',
'color': '#cccccc'
},
'symbolSize': '8',
'symbol': 'emptyCircle',
'smooth': false,
'color': [
'#3fb1e3',
'#6be6c1',
'#626c91',
'#a0a7e6',
'#c4ebad',
'#96dee8'
],
'label': {
'color': '#ffffff'
}
},
'map': {
'itemStyle': {
'normal': {
'areaColor': '#eeeeee',
'borderColor': '#aaaaaa',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': 'rgba(63,177,227,0.25)',
'borderColor': '#3fb1e3',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#ffffff'
}
},
'emphasis': {
'textStyle': {
'color': '#3fb1e3'
}
}
}
},
'geo': {
'itemStyle': {
'normal': {
'areaColor': '#eeeeee',
'borderColor': '#aaaaaa',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': 'rgba(63,177,227,0.25)',
'borderColor': '#3fb1e3',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#ffffff'
}
},
'emphasis': {
'textStyle': {
'color': '#3fb1e3'
}
}
}
},
'categoryAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#cccccc'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#999999'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#eeeeee'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.05)',
'rgba(200,200,200,0.02)'
]
}
}
},
'valueAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#cccccc'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#999999'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#eeeeee'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.05)',
'rgba(200,200,200,0.02)'
]
}
}
},
'logAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#cccccc'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#999999'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#eeeeee'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.05)',
'rgba(200,200,200,0.02)'
]
}
}
},
'timeAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#cccccc'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#999999'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#eeeeee'
]
}
},
'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': '#626c91',
'width': 1
},
'itemStyle': {
'normal': {
'color': '#626c91',
'borderWidth': 1
},
'emphasis': {
'color': '#626c91'
}
},
'controlStyle': {
'normal': {
'color': '#626c91',
'borderColor': '#626c91',
'borderWidth': 0.5
},
'emphasis': {
'color': '#626c91',
'borderColor': '#626c91',
'borderWidth': 0.5
}
},
'checkpointStyle': {
'color': '#3fb1e3',
'borderColor': 'rgba(63,177,227,0.15)'
},
'label': {
'normal': {
'textStyle': {
'color': '#626c91'
}
},
'emphasis': {
'textStyle': {
'color': '#626c91'
}
}
}
},
'visualMap': {
'color': [
'#2a99c9',
'#afe8ff'
]
},
'dataZoom': {
'backgroundColor': 'rgba(255,255,255,0)',
'dataBackgroundColor': 'rgba(222,222,222,1)',
'fillerColor': 'rgba(114,230,212,0.25)',
'handleColor': '#cccccc',
'handleSize': '100%',
'textStyle': {
'color': '#999999'
}
},
'markPoint': {
'label': {
'color': '#ffffff'
},
'emphasis': {
'label': {
'color': '#ffffff'
}
}
}
})
}))
datax-ui/src/views/visual/datachart/components/widgets/themes/westeros.js 0 → 100644
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory)
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'))
} else {
// Browser globals
factory({}, root.echarts)
}
}(this, function(exports, echarts) {
var log = function(msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg)
}
}
if (!echarts) {
log('ECharts is not Loaded')
return
}
echarts.registerTheme('westeros', {
'color': [
'#516b91',
'#59c4e6',
'#edafda',
'#93b7e3',
'#a5e7f0',
'#cbb0e3'
],
'backgroundColor': 'rgba(0,0,0,0)',
'textStyle': {},
'title': {
'textStyle': {
'color': '#516b91'
},
'subtextStyle': {
'color': '#93b7e3'
}
},
'line': {
'itemStyle': {
'borderWidth': '2'
},
'lineStyle': {
'width': '2'
},
'symbolSize': '6',
'symbol': 'emptyCircle',
'smooth': true
},
'radar': {
'itemStyle': {
'borderWidth': '2'
},
'lineStyle': {
'width': '2'
},
'symbolSize': '6',
'symbol': 'emptyCircle',
'smooth': true
},
'bar': {
'itemStyle': {
'barBorderWidth': 0,
'barBorderColor': '#ccc'
}
},
'pie': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'scatter': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'boxplot': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'parallel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'sankey': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'funnel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'gauge': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'candlestick': {
'itemStyle': {
'color': '#edafda',
'color0': 'transparent',
'borderColor': '#d680bc',
'borderColor0': '#8fd3e8',
'borderWidth': '2'
}
},
'graph': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
},
'lineStyle': {
'width': 1,
'color': '#aaa'
},
'symbolSize': '6',
'symbol': 'emptyCircle',
'smooth': true,
'color': [
'#516b91',
'#59c4e6',
'#edafda',
'#93b7e3',
'#a5e7f0',
'#cbb0e3'
],
'label': {
'color': '#eee'
}
},
'map': {
'itemStyle': {
'normal': {
'areaColor': '#f3f3f3',
'borderColor': '#516b91',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': '#a5e7f0',
'borderColor': '#516b91',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#000'
}
},
'emphasis': {
'textStyle': {
'color': '#516b91'
}
}
}
},
'geo': {
'itemStyle': {
'normal': {
'areaColor': '#f3f3f3',
'borderColor': '#516b91',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': '#a5e7f0',
'borderColor': '#516b91',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#000'
}
},
'emphasis': {
'textStyle': {
'color': '#516b91'
}
}
}
},
'categoryAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#cccccc'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#999999'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#eeeeee'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.05)',
'rgba(200,200,200,0.02)'
]
}
}
},
'valueAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#cccccc'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#999999'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#eeeeee'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.05)',
'rgba(200,200,200,0.02)'
]
}
}
},
'logAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#cccccc'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#999999'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#eeeeee'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.05)',
'rgba(200,200,200,0.02)'
]
}
}
},
'timeAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#cccccc'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#999999'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#eeeeee'
]
}
},
'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': '#8fd3e8',
'width': 1
},
'itemStyle': {
'normal': {
'color': '#8fd3e8',
'borderWidth': 1
},
'emphasis': {
'color': '#8fd3e8'
}
},
'controlStyle': {
'normal': {
'color': '#8fd3e8',
'borderColor': '#8fd3e8',
'borderWidth': 0.5
},
'emphasis': {
'color': '#8fd3e8',
'borderColor': '#8fd3e8',
'borderWidth': 0.5
}
},
'checkpointStyle': {
'color': '#8fd3e8',
'borderColor': 'rgba(138,124,168,0.37)'
},
'label': {
'normal': {
'textStyle': {
'color': '#8fd3e8'
}
},
'emphasis': {
'textStyle': {
'color': '#8fd3e8'
}
}
}
},
'visualMap': {
'color': [
'#516b91',
'#59c4e6',
'#a5e7f0'
]
},
'dataZoom': {
'backgroundColor': 'rgba(0,0,0,0)',
'dataBackgroundColor': 'rgba(255,255,255,0.3)',
'fillerColor': 'rgba(167,183,204,0.4)',
'handleColor': '#a7b7cc',
'handleSize': '100%',
'textStyle': {
'color': '#333333'
}
},
'markPoint': {
'label': {
'color': '#eee'
},
'emphasis': {
'label': {
'color': '#eee'
}
}
}
})
}))
datax-ui/src/views/visual/datachart/components/widgets/themes/wonderland.js 0 → 100644
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory)
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'))
} else {
// Browser globals
factory({}, root.echarts)
}
}(this, function(exports, echarts) {
var log = function(msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg)
}
}
if (!echarts) {
log('ECharts is not Loaded')
return
}
echarts.registerTheme('wonderland', {
'color': [
'#4ea397',
'#22c3aa',
'#7bd9a5',
'#d0648a',
'#f58db2',
'#f2b3c9'
],
'backgroundColor': 'rgba(255,255,255,0)',
'textStyle': {},
'title': {
'textStyle': {
'color': '#666666'
},
'subtextStyle': {
'color': '#999999'
}
},
'line': {
'itemStyle': {
'borderWidth': '2'
},
'lineStyle': {
'width': '3'
},
'symbolSize': '8',
'symbol': 'emptyCircle',
'smooth': false
},
'radar': {
'itemStyle': {
'borderWidth': '2'
},
'lineStyle': {
'width': '3'
},
'symbolSize': '8',
'symbol': 'emptyCircle',
'smooth': false
},
'bar': {
'itemStyle': {
'barBorderWidth': 0,
'barBorderColor': '#ccc'
}
},
'pie': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'scatter': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'boxplot': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'parallel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'sankey': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'funnel': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'gauge': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
}
},
'candlestick': {
'itemStyle': {
'color': '#d0648a',
'color0': 'transparent',
'borderColor': '#d0648a',
'borderColor0': '#22c3aa',
'borderWidth': '1'
}
},
'graph': {
'itemStyle': {
'borderWidth': 0,
'borderColor': '#ccc'
},
'lineStyle': {
'width': '1',
'color': '#cccccc'
},
'symbolSize': '8',
'symbol': 'emptyCircle',
'smooth': false,
'color': [
'#4ea397',
'#22c3aa',
'#7bd9a5',
'#d0648a',
'#f58db2',
'#f2b3c9'
],
'label': {
'color': '#ffffff'
}
},
'map': {
'itemStyle': {
'normal': {
'areaColor': '#eeeeee',
'borderColor': '#999999',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': 'rgba(34,195,170,0.25)',
'borderColor': '#22c3aa',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#28544e'
}
},
'emphasis': {
'textStyle': {
'color': '#349e8e'
}
}
}
},
'geo': {
'itemStyle': {
'normal': {
'areaColor': '#eeeeee',
'borderColor': '#999999',
'borderWidth': 0.5
},
'emphasis': {
'areaColor': 'rgba(34,195,170,0.25)',
'borderColor': '#22c3aa',
'borderWidth': 1
}
},
'label': {
'normal': {
'textStyle': {
'color': '#28544e'
}
},
'emphasis': {
'textStyle': {
'color': '#349e8e'
}
}
}
},
'categoryAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#cccccc'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#999999'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#eeeeee'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.05)',
'rgba(200,200,200,0.02)'
]
}
}
},
'valueAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#cccccc'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#999999'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#eeeeee'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.05)',
'rgba(200,200,200,0.02)'
]
}
}
},
'logAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#cccccc'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#999999'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#eeeeee'
]
}
},
'splitArea': {
'show': false,
'areaStyle': {
'color': [
'rgba(250,250,250,0.05)',
'rgba(200,200,200,0.02)'
]
}
}
},
'timeAxis': {
'axisLine': {
'show': true,
'lineStyle': {
'color': '#cccccc'
}
},
'axisTick': {
'show': false,
'lineStyle': {
'color': '#333'
}
},
'axisLabel': {
'show': true,
'textStyle': {
'color': '#999999'
}
},
'splitLine': {
'show': true,
'lineStyle': {
'color': [
'#eeeeee'
]
}
},
'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': '#4ea397',
'width': 1
},
'itemStyle': {
'normal': {
'color': '#4ea397',
'borderWidth': 1
},
'emphasis': {
'color': '#4ea397'
}
},
'controlStyle': {
'normal': {
'color': '#4ea397',
'borderColor': '#4ea397',
'borderWidth': 0.5
},
'emphasis': {
'color': '#4ea397',
'borderColor': '#4ea397',
'borderWidth': 0.5
}
},
'checkpointStyle': {
'color': '#4ea397',
'borderColor': 'rgba(60,235,210,0.3)'
},
'label': {
'normal': {
'textStyle': {
'color': '#4ea397'
}
},
'emphasis': {
'textStyle': {
'color': '#4ea397'
}
}
}
},
'visualMap': {
'color': [
'#d0648a',
'#22c3aa',
'#adfff1'
]
},
'dataZoom': {
'backgroundColor': 'rgba(255,255,255,0)',
'dataBackgroundColor': 'rgba(222,222,222,1)',
'fillerColor': 'rgba(114,230,212,0.25)',
'handleColor': '#cccccc',
'handleSize': '100%',
'textStyle': {
'color': '#999999'
}
},
'markPoint': {
'label': {
'color': '#ffffff'
},
'emphasis': {
'label': {
'color': '#ffffff'
}
}
}
})
}))
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment