init
This commit is contained in:
Jane
93
src/views/visual/datachart/components/ChartForm.vue
Normal file
93
src/views/visual/datachart/components/ChartForm.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<el-dialog title="图表" width="50%" :visible.sync="dialogVisible" :show-close="false" :close-on-click-modal="false">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="图表名称" prop="chartName">
|
||||
<el-input v-model="form.chartName" placeholder="请输入图表名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确定</el-button>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addDataChart, updateDataChart } from '@/api/visual/datachart'
|
||||
|
||||
export default {
|
||||
name: 'ChartForm',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: function() {
|
||||
return false
|
||||
}
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
chartName: undefined
|
||||
},
|
||||
rules: {
|
||||
chartName: [
|
||||
{ required: true, message: '图表名称不能为空', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dialogVisible: {
|
||||
get() {
|
||||
return this.visible
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('update:visible', val)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.form = this.data
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.id) {
|
||||
updateDataChart(this.form).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('保存成功')
|
||||
this.dialogVisible = false
|
||||
this.$emit('handleChartFormFinished')
|
||||
}
|
||||
}).catch(error => {
|
||||
this.$message.error(error.msg || '保存失败')
|
||||
})
|
||||
} else {
|
||||
addDataChart(this.form).then(response => {
|
||||
if (response.success) {
|
||||
this.$message.success('保存成功')
|
||||
this.dialogVisible = false
|
||||
this.$emit('handleChartFormFinished')
|
||||
}
|
||||
}).catch(error => {
|
||||
this.$message.error(error.msg || '保存失败')
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
106
src/views/visual/datachart/components/ChartPanel.vue
Normal file
106
src/views/visual/datachart/components/ChartPanel.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
import { chartTypes } from '@/utils/visual-chart'
|
||||
import ChartTable from './widgets/ChartTable'
|
||||
import ChartLine from './widgets/ChartLine'
|
||||
import ChartBar from './widgets/ChartBar'
|
||||
import ChartPie from './widgets/ChartPie'
|
||||
import ChartKpi from './widgets/ChartKpi'
|
||||
import ChartRadar from './widgets/ChartRadar'
|
||||
import ChartFunnel from './widgets/ChartFunnel'
|
||||
import ChartScatter from './widgets/ChartScatter'
|
||||
import ChartGauge from './widgets/ChartGauge'
|
||||
import ChartTreemap from './widgets/ChartTreemap'
|
||||
import ChartWordCloud from './widgets/ChartWordCloud'
|
||||
import ChartLiquidFill from './widgets/ChartLiquidFill'
|
||||
import ChartSankey from './widgets/ChartSankey'
|
||||
import ChartMap from './widgets/ChartMap'
|
||||
import ChartTree from './widgets/ChartTree'
|
||||
import ChartSunburst from './widgets/ChartSunburst'
|
||||
import ChartPolar from './widgets/ChartPolar'
|
||||
|
||||
export default {
|
||||
name: 'ChartPanel',
|
||||
components: {
|
||||
ChartTable, ChartLine, ChartBar, ChartPie,
|
||||
ChartKpi, ChartRadar, ChartFunnel, ChartScatter,
|
||||
ChartGauge, ChartTreemap, ChartWordCloud, ChartLiquidFill,
|
||||
ChartSankey, ChartMap, ChartTree, ChartSunburst, ChartPolar
|
||||
},
|
||||
props: {
|
||||
chartSchema: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartData: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chartTypes
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentChart() {
|
||||
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 || {}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
424
src/views/visual/datachart/components/widgets/ChartBar.vue
Normal file
424
src/views/visual/datachart/components/widgets/ChartBar.vue
Normal file
@@ -0,0 +1,424 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartBar</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartBar',
|
||||
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: {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
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() {
|
||||
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.localData,
|
||||
...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(data, ...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 = data.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>
|
||||
387
src/views/visual/datachart/components/widgets/ChartFunnel.vue
Normal file
387
src/views/visual/datachart/components/widgets/ChartFunnel.vue
Normal file
@@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartFunnel</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartFunnel',
|
||||
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: {
|
||||
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() {
|
||||
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 _rowPaths = this._combineRowPaths(
|
||||
this.localData,
|
||||
...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 = []
|
||||
this.localValues.forEach(({ key }) => {
|
||||
legendData.push(key)
|
||||
})
|
||||
const seriesObj = {}
|
||||
rowConditions.forEach((rowCondition, index) => {
|
||||
const seriesName = Object.values(rowCondition).join(this.connector) || ''
|
||||
seriesObj[seriesName] = {
|
||||
name: seriesName,
|
||||
type: this.chartType,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
},
|
||||
sort: 'descending',
|
||||
data: []
|
||||
}
|
||||
})
|
||||
// 计算每个series数据
|
||||
rowConditions.forEach((rowCondition, rowConditionIndex) => {
|
||||
const seriesName = Object.values(rowCondition).join(this.connector) || ''
|
||||
const seriesData = []
|
||||
colConditions.forEach((colCondition, colConditionIndex) => {
|
||||
// 当前单元对应的条件
|
||||
const conditions = Object.assign({}, rowCondition, colCondition)
|
||||
// 通过当前单元对应的条件，过滤数据
|
||||
const filterData = this._filterData(conditions, this.localData)
|
||||
// 多个值，多条数据
|
||||
this.localValues.forEach(({ key }) => {
|
||||
const seriesDataValue = { name: '', value: '' }
|
||||
seriesDataValue.name = key
|
||||
const value = this._reduceValue(filterData, key)
|
||||
seriesDataValue.value = value
|
||||
seriesData.push(seriesDataValue)
|
||||
})
|
||||
})
|
||||
seriesObj[seriesName].data = seriesData
|
||||
})
|
||||
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) {
|
||||
const b = 100 / (series.length * 9 + 1)
|
||||
if (type === 'funnel') {
|
||||
series.forEach((item, index) => {
|
||||
item.left = b + index * b * 9 + '%'
|
||||
item.width = b * 8 + '%'
|
||||
item.maxSize = '100%'
|
||||
item.label.formatter = (params) => {
|
||||
return params.value + '\n' + params.percent + '%'
|
||||
}
|
||||
})
|
||||
}
|
||||
if (type === 'pyramidfunnel') {
|
||||
series.forEach((item, index) => {
|
||||
item.sort = 'ascending'
|
||||
item.left = b + index * b * 9 + '%'
|
||||
item.width = b * 8 + '%'
|
||||
item.maxSize = '100%'
|
||||
item.label.formatter = (params) => {
|
||||
return params.value + '\n' + params.percent + '%'
|
||||
}
|
||||
})
|
||||
} else if (type === 'contrastfunnel') {
|
||||
let percent = 100
|
||||
series.forEach((item, index) => {
|
||||
if (index === 0) {
|
||||
item.label.position = 'outside'
|
||||
} else {
|
||||
item.label.formatter = (params) => {
|
||||
return params.value + '\n' + params.percent + '%'
|
||||
}
|
||||
}
|
||||
item.maxSize = percent + '%'
|
||||
percent *= 0.8
|
||||
})
|
||||
}
|
||||
option.tooltip.formatter = (params) => {
|
||||
return params.seriesName + ' <br/>' + params.name + ' : ' + params.value + '<br>' + params.percent + '%'
|
||||
}
|
||||
},
|
||||
_combineRowPaths(data, ...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 = data.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>
|
||||
292
src/views/visual/datachart/components/widgets/ChartGauge.vue
Normal file
292
src/views/visual/datachart/components/widgets/ChartGauge.vue
Normal file
@@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartGauge</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartGauge',
|
||||
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() {
|
||||
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(data, ...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 = data.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>
|
||||
233
src/views/visual/datachart/components/widgets/ChartKpi.vue
Normal file
233
src/views/visual/datachart/components/widgets/ChartKpi.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle" style="max-height: 100%; max-width: 100%;">
|
||||
<div class="card-panel">
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-num">{{ calcData.val }}</div>
|
||||
<div class="card-panel-text">{{ calcData.key }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartKpi',
|
||||
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'
|
||||
},
|
||||
chartOption: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => ({})
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localRows: [],
|
||||
localColumns: [],
|
||||
localValues: [],
|
||||
localData: [],
|
||||
// 连接符
|
||||
connector: '-',
|
||||
calcData: { key: '', val: '' }
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
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 localValue = this.localValues[0]
|
||||
const seriesName = localValue.key
|
||||
this.calcData.key = seriesName
|
||||
this.calcData.val = this.localData[0][seriesName]
|
||||
},
|
||||
mergeChartOption() {},
|
||||
mergeChartTheme() {},
|
||||
_combineRowPaths(data, ...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 = data.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>
|
||||
.card-panel {
|
||||
align-items: center; /*垂直居中*/
|
||||
justify-content: center; /*水平居中*/
|
||||
.card-panel-description {
|
||||
text-align: center;
|
||||
.card-panel-num {
|
||||
font-size: 38px;
|
||||
font-weight: bold;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
.card-panel-text {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
font-size: 16px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
412
src/views/visual/datachart/components/widgets/ChartLine.vue
Normal file
412
src/views/visual/datachart/components/widgets/ChartLine.vue
Normal file
@@ -0,0 +1,412 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartLine</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartLine',
|
||||
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: {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
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() {
|
||||
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.localData,
|
||||
...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 === '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(data, ...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 = data.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>
|
||||
@@ -0,0 +1,331 @@
|
||||
<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(data, ...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 = data.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>
|
||||
364
src/views/visual/datachart/components/widgets/ChartMap.vue
Normal file
364
src/views/visual/datachart/components/widgets/ChartMap.vue
Normal file
@@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartGeo</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartGeo',
|
||||
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: {
|
||||
areaCode: '100000',
|
||||
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.localRows.length || !this.localValues.length) return
|
||||
const _rowPaths = this._combineRowPaths(
|
||||
this.localData,
|
||||
...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 seriesData = []
|
||||
this.localValues.forEach(({ key }) => {
|
||||
rowConditions.forEach((rowCondition, rowConditionIndex) => {
|
||||
// 当前单元对应的条件
|
||||
const conditions = Object.assign({}, rowCondition)
|
||||
// 通过当前单元对应的条件，过滤数据
|
||||
const filterData = this._filterData(conditions, this.localData)
|
||||
if (filterData.length) {
|
||||
// 多个值，多条数据
|
||||
const value = this._reduceValue(filterData, key)
|
||||
seriesData.push(
|
||||
{ name: Object.values(rowCondition).join(this.connector), value: value }
|
||||
)
|
||||
}
|
||||
})
|
||||
})
|
||||
const seriesObj = {}
|
||||
const seriesName = this.localValues[0].key
|
||||
seriesObj[seriesName] = {
|
||||
name: seriesName,
|
||||
type: this.chartType,
|
||||
map: this.calcData.areaCode,
|
||||
roam: true,
|
||||
selectedMode: 'single',
|
||||
showLegendSymbol: false,
|
||||
aspectScale: 0.75,
|
||||
zoom: 3,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
areaColor: 'transparent',
|
||||
borderColor: '#B5B5B5',
|
||||
borderWidth: 1,
|
||||
shadowColor: 'rgba(63, 218, 255, 0.5)',
|
||||
shadowBlur: 30
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#2B91B7'
|
||||
}
|
||||
},
|
||||
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)
|
||||
}
|
||||
const rawGeoJson = require('./maps/' + this.calcData.areaCode + '.json')
|
||||
echarts.registerMap(this.calcData.areaCode, rawGeoJson)
|
||||
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 === 'visualMap') {
|
||||
option.visualMap = [{
|
||||
type: 'continuous',
|
||||
inRange: {
|
||||
color: ['#e0ffff', '#006edd']
|
||||
},
|
||||
calculable: true,
|
||||
pieces: [
|
||||
{ gt: 100 },
|
||||
{ gt: 10, lte: 99 },
|
||||
{ gt: 0, lte: 9 }
|
||||
]
|
||||
}]
|
||||
}
|
||||
},
|
||||
_combineRowPaths(data, ...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 = data.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>
|
||||
365
src/views/visual/datachart/components/widgets/ChartPie.vue
Normal file
365
src/views/visual/datachart/components/widgets/ChartPie.vue
Normal file
@@ -0,0 +1,365 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartPie</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartPie',
|
||||
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: {
|
||||
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() {
|
||||
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.localData,
|
||||
...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(data, ...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 = data.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>
|
||||
60
src/views/visual/datachart/components/widgets/ChartPolar.vue
Normal file
60
src/views/visual/datachart/components/widgets/ChartPolar.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartPolar</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ChartPolar',
|
||||
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log(this.data)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
369
src/views/visual/datachart/components/widgets/ChartRadar.vue
Normal file
369
src/views/visual/datachart/components/widgets/ChartRadar.vue
Normal file
@@ -0,0 +1,369 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartRadar</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartRadar',
|
||||
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: {
|
||||
radar: {
|
||||
indicator: [],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
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() {
|
||||
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.localData,
|
||||
...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(data, ...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 = data.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>
|
||||
354
src/views/visual/datachart/components/widgets/ChartSankey.vue
Normal file
354
src/views/visual/datachart/components/widgets/ChartSankey.vue
Normal file
@@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartSankey</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartSankey',
|
||||
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'
|
||||
},
|
||||
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.localData,
|
||||
...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 seriesData = []
|
||||
const seriesLinks = []
|
||||
rowConditions.forEach((rowCondition, rowConditionIndex) => {
|
||||
seriesData.push({ name: Object.values(rowCondition).join(this.connector) })
|
||||
})
|
||||
// 判断没传入列的处理
|
||||
if (!this.localColumns.length) {
|
||||
this.localValues.forEach(({ key }) => {
|
||||
seriesData.push({ name: key })
|
||||
rowConditions.forEach((rowCondition, rowConditionIndex) => {
|
||||
// 当前单元对应的条件
|
||||
const conditions = Object.assign({}, rowCondition)
|
||||
// 通过当前单元对应的条件，过滤数据
|
||||
const filterData = this._filterData(conditions, this.localData)
|
||||
if (filterData.length) {
|
||||
// 多个值，多条数据
|
||||
const value = this._reduceValue(filterData, key)
|
||||
seriesLinks.push(
|
||||
{
|
||||
source: Object.values(rowCondition).join(this.connector),
|
||||
target: key,
|
||||
value: value
|
||||
}
|
||||
)
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
colConditions.forEach((colCondition, colConditionIndex) => {
|
||||
seriesData.push({ name: Object.values(colCondition).join(this.connector) })
|
||||
rowConditions.forEach((rowCondition, rowConditionIndex) => {
|
||||
// 当前单元对应的条件
|
||||
const conditions = Object.assign({}, rowCondition, colCondition)
|
||||
// 通过当前单元对应的条件，过滤数据
|
||||
const filterData = this._filterData(conditions, this.localData)
|
||||
if (filterData.length) {
|
||||
// 多个值，多条数据
|
||||
this.localValues.forEach(({ key }) => {
|
||||
const value = this._reduceValue(filterData, key)
|
||||
seriesLinks.push(
|
||||
{
|
||||
source: Object.values(rowCondition).join(this.connector),
|
||||
target: Object.values(colCondition).join(this.connector),
|
||||
value: value
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const seriesObj = {}
|
||||
const seriesName = 'sankey'
|
||||
seriesObj[seriesName] = {
|
||||
name: seriesName,
|
||||
type: this.chartType,
|
||||
layout: 'none',
|
||||
draggable: false,
|
||||
links: seriesLinks,
|
||||
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(data, ...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 = data.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>
|
||||
375
src/views/visual/datachart/components/widgets/ChartScatter.vue
Normal file
375
src/views/visual/datachart/components/widgets/ChartScatter.vue
Normal file
@@ -0,0 +1,375 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartScatter</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartScatter',
|
||||
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'
|
||||
},
|
||||
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: {
|
||||
xAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: { trigger: 'item' }
|
||||
},
|
||||
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()
|
||||
},
|
||||
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.localData,
|
||||
...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 seriesName = Object.values(colCondition).join(this.connector) || ''
|
||||
legendData.push(seriesName)
|
||||
seriesObj[seriesName] = {
|
||||
name: seriesName,
|
||||
type: this.chartType,
|
||||
data: []
|
||||
}
|
||||
})
|
||||
// 计算每个series数据
|
||||
colConditions.forEach((colCondition, colConditionIndex) => {
|
||||
const seriesName = Object.values(colCondition).join(this.connector) || ''
|
||||
const seriesData = []
|
||||
rowConditions.forEach((rowCondition, rowConditionIndex) => {
|
||||
const seriesDataName = Object.values(rowCondition).join(this.connector)
|
||||
const seriesDataValue = { name: '', value: [] }
|
||||
seriesDataValue.name = seriesDataName
|
||||
seriesDataValue.value.push(seriesDataName)
|
||||
// 当前单元对应的条件
|
||||
const conditions = Object.assign({}, rowCondition, colCondition)
|
||||
// 通过当前单元对应的条件，过滤数据
|
||||
const filterData = this._filterData(conditions, this.localData)
|
||||
// 多个值，多条数据
|
||||
this.localValues.forEach(({ key }) => {
|
||||
const value = this._reduceValue(filterData, key)
|
||||
seriesDataValue.value.push(value)
|
||||
})
|
||||
seriesData.push(seriesDataValue)
|
||||
})
|
||||
seriesObj[seriesName].data = seriesData
|
||||
})
|
||||
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)))
|
||||
option.series = series
|
||||
option.tooltip.formatter = (params) => {
|
||||
let s = params.seriesName + ' ' + params.name + '</br>'
|
||||
this.localValues.forEach(({ key }, index) => {
|
||||
s += key + ' : ' + params.value[index + 1] + '<br>'
|
||||
})
|
||||
return s
|
||||
}
|
||||
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)))
|
||||
option.series = series
|
||||
option.tooltip.formatter = (params) => {
|
||||
let s = params.seriesName + ' ' + params.name + '</br>'
|
||||
this.localValues.forEach(({ key }, index) => {
|
||||
s += key + ' : ' + params.value[index + 1] + '<br>'
|
||||
})
|
||||
return s
|
||||
}
|
||||
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)))
|
||||
option.series = series
|
||||
option.tooltip.formatter = (params) => {
|
||||
let s = params.seriesName + ' ' + params.name + '</br>'
|
||||
this.localValues.forEach(({ key }, index) => {
|
||||
s += key + ' : ' + params.value[index + 1] + '<br>'
|
||||
})
|
||||
return s
|
||||
}
|
||||
this.chart.clear()
|
||||
this.chart.setOption(option, true)
|
||||
}
|
||||
},
|
||||
_combineRowPaths(data, ...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 = data.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>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartSunburst</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ChartSunburst',
|
||||
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log(this.data)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
57
src/views/visual/datachart/components/widgets/ChartTable.vue
Normal file
57
src/views/visual/datachart/components/widgets/ChartTable.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle" style="overflow: auto;">
|
||||
<pivot-table
|
||||
ref="pivottable"
|
||||
:data="data"
|
||||
:rows="rows"
|
||||
:columns="columns"
|
||||
:values="values"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PivotTable from '@/components/PivotTable'
|
||||
|
||||
export default {
|
||||
name: 'ChartTable',
|
||||
components: {
|
||||
PivotTable
|
||||
},
|
||||
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: () => []
|
||||
},
|
||||
chartStyle: {
|
||||
type: Object,
|
||||
require: false,
|
||||
default: () => {
|
||||
return {
|
||||
height: '200px'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
60
src/views/visual/datachart/components/widgets/ChartTree.vue
Normal file
60
src/views/visual/datachart/components/widgets/ChartTree.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartTree</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ChartTree',
|
||||
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log(this.data)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
344
src/views/visual/datachart/components/widgets/ChartTreemap.vue
Normal file
344
src/views/visual/datachart/components/widgets/ChartTreemap.vue
Normal file
@@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<div ref="chart" :style="chartStyle">ChartTreemap</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import { convertPathToMap, SEPARATOR } from '@/utils/visual-chart'
|
||||
|
||||
export default {
|
||||
name: 'ChartTreemap',
|
||||
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'
|
||||
},
|
||||
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',
|
||||
formatter: '{b} : {c}'
|
||||
}
|
||||
},
|
||||
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 seriesData = this.recursion(0, {}, this.localRows, this.localValues, this.localData)
|
||||
const seriesObj = {}
|
||||
const seriesName = 'treemap'
|
||||
seriesObj[seriesName] = {
|
||||
name: seriesName,
|
||||
type: this.chartType,
|
||||
leafDepth: 1,
|
||||
visibleMin: 1,
|
||||
label: { position: 'insideTopLeft' },
|
||||
data: seriesData
|
||||
}
|
||||
this.calcData.seriesObj = seriesObj
|
||||
},
|
||||
// 递归
|
||||
recursion(depth, conditions = {}, rows = [], values = [], data = []) {
|
||||
const _result = []
|
||||
if (depth < rows.length) {
|
||||
const row = rows[depth]
|
||||
row.values.forEach((val) => {
|
||||
conditions[row.key] = val
|
||||
const filters = Object.keys(conditions)
|
||||
.filter((key, index) => index <= depth)
|
||||
.reduce((obj, key) => {
|
||||
obj[key] = conditions[key]
|
||||
return obj
|
||||
}, {})
|
||||
const filterData = data.filter((item) => {
|
||||
let status = true
|
||||
for (const key in filters) {
|
||||
if (filters[key] !== item[key]) {
|
||||
status = false
|
||||
return
|
||||
}
|
||||
}
|
||||
return status
|
||||
})
|
||||
if (filterData.length) {
|
||||
if (depth === (rows.length - 1)) {
|
||||
values.forEach(({ key }) => {
|
||||
const value = this._reduceValue(filterData, key)
|
||||
_result.push({
|
||||
name: val,
|
||||
value: value
|
||||
})
|
||||
})
|
||||
} else {
|
||||
_result.push({
|
||||
name: val,
|
||||
children: this.recursion(depth + 1, conditions, rows, values, filterData)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
return _result
|
||||
},
|
||||
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) {
|
||||
series.forEach((item) => {
|
||||
item.label.formatter = (params) => {
|
||||
return params.name + '\n\nvalue : ' + params.value
|
||||
}
|
||||
})
|
||||
},
|
||||
_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>
|
||||
328
src/views/visual/datachart/components/widgets/ChartWordCloud.vue
Normal file
328
src/views/visual/datachart/components/widgets/ChartWordCloud.vue
Normal file
@@ -0,0 +1,328 @@
|
||||
<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,
|
||||
default: '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()
|
||||
},
|
||||
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.localData,
|
||||
...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(data, ...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 = data.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>
|
||||
File diff suppressed because one or more lines are too long
445
src/views/visual/datachart/components/widgets/themes/chalk.js
Normal file
445
src/views/visual/datachart/components/widgets/themes/chalk.js
Normal file
@@ -0,0 +1,445 @@
|
||||
(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'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
448
src/views/visual/datachart/components/widgets/themes/dark.js
Normal file
448
src/views/visual/datachart/components/widgets/themes/dark.js
Normal file
@@ -0,0 +1,448 @@
|
||||
(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'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
445
src/views/visual/datachart/components/widgets/themes/essos.js
Normal file
445
src/views/visual/datachart/components/widgets/themes/essos.js
Normal file
@@ -0,0 +1,445 @@
|
||||
(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'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
@@ -0,0 +1,459 @@
|
||||
(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'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
469
src/views/visual/datachart/components/widgets/themes/macarons.js
Normal file
469
src/views/visual/datachart/components/widgets/themes/macarons.js
Normal file
@@ -0,0 +1,469 @@
|
||||
(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'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
@@ -0,0 +1,446 @@
|
||||
(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'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
469
src/views/visual/datachart/components/widgets/themes/roma.js
Normal file
469
src/views/visual/datachart/components/widgets/themes/roma.js
Normal file
@@ -0,0 +1,469 @@
|
||||
(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'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
445
src/views/visual/datachart/components/widgets/themes/shine.js
Normal file
445
src/views/visual/datachart/components/widgets/themes/shine.js
Normal file
@@ -0,0 +1,445 @@
|
||||
(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'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
450
src/views/visual/datachart/components/widgets/themes/vintage.js
Normal file
450
src/views/visual/datachart/components/widgets/themes/vintage.js
Normal file
@@ -0,0 +1,450 @@
|
||||
(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'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
441
src/views/visual/datachart/components/widgets/themes/walden.js
Normal file
441
src/views/visual/datachart/components/widgets/themes/walden.js
Normal file
@@ -0,0 +1,441 @@
|
||||
(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'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
442
src/views/visual/datachart/components/widgets/themes/westeros.js
Normal file
442
src/views/visual/datachart/components/widgets/themes/westeros.js
Normal file
@@ -0,0 +1,442 @@
|
||||
(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'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
@@ -0,0 +1,442 @@
|
||||
(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'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}))
|
||||
Reference in New Issue
Block a user