多柱线图一版
qianming
3 years ago
parent
701c96b2c2
commit
cfc2dbd38a
@ -0,0 +1,700 @@
|
||||
/*
|
||||
* @Descripttion: 多柱线图
|
||||
* @version:
|
||||
* @Author: foming
|
||||
* @Date:
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
*/
|
||||
export const widgetMoreBarLine = {
|
||||
code: 'widgetMoreBarLineChart',
|
||||
type: 'chart',
|
||||
label: '多柱线图',
|
||||
icon: 'iconzhuxiantu',
|
||||
options: {
|
||||
// 配置
|
||||
setup: [
|
||||
{
|
||||
type: 'el-input-text',
|
||||
label: '图层名称',
|
||||
name: 'layerName',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '多柱线图',
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '背景颜色',
|
||||
name: 'background',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
[
|
||||
{
|
||||
name: '折线设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '标记点',
|
||||
name: 'markPoint',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
type: 'el-slider',
|
||||
label: '点大小',
|
||||
name: 'pointSize',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '平滑曲线',
|
||||
name: 'smoothCurve',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '面积堆积',
|
||||
name: 'area',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
type: 'el-slider',
|
||||
label: '面积厚度',
|
||||
name: 'areaThickness',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
type: 'el-slider',
|
||||
label: '线条宽度',
|
||||
name: 'lineWidth',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '柱体设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-slider',
|
||||
label: '最大宽度',
|
||||
name: 'maxWidth',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 10,
|
||||
},
|
||||
{
|
||||
type: 'el-slider',
|
||||
label: '圆角',
|
||||
name: 'radius',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
value: 5,
|
||||
},
|
||||
{
|
||||
type: 'el-slider',
|
||||
label: '最小高度',
|
||||
name: 'minHeight',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
value: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '标题设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '标题',
|
||||
name: 'isNoTitle',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: true
|
||||
},
|
||||
{
|
||||
type: 'el-input-text',
|
||||
label: '标题',
|
||||
name: 'titleText',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '字体颜色',
|
||||
name: 'textColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#fff'
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '字体粗细',
|
||||
name: 'textFontWeight',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'normal', name: '正常'},
|
||||
{code: 'bold', name: '粗体'},
|
||||
{code: 'bolder', name: '特粗体'},
|
||||
{code: 'lighter', name: '细体'}
|
||||
],
|
||||
value: 'normal'
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '字体大小',
|
||||
name: 'textFontSize',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '字体位置',
|
||||
name: 'textAlign',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'center', name: '居中'},
|
||||
{code: 'left', name: '左对齐'},
|
||||
{code: 'right', name: '右对齐'},
|
||||
],
|
||||
value: 'left'
|
||||
},
|
||||
{
|
||||
type: 'el-input-text',
|
||||
label: '副标题',
|
||||
name: 'subText',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '字体颜色',
|
||||
name: 'subTextColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#fff'
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '字体粗细',
|
||||
name: 'subTextFontWeight',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'normal', name: '正常'},
|
||||
{code: 'bold', name: '粗体'},
|
||||
{code: 'bolder', name: '特粗体'},
|
||||
{code: 'lighter', name: '细体'}
|
||||
],
|
||||
value: 'normal'
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '字体大小',
|
||||
name: 'subTextFontSize',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 20
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'X轴设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '显示',
|
||||
name: 'hideX',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
type: 'el-input-text',
|
||||
label: '坐标名',
|
||||
name: 'xName',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '坐标名颜色',
|
||||
name: 'nameColorX',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#fff',
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '坐标字号',
|
||||
name: 'nameFontSizeX',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 14,
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '数值颜色',
|
||||
name: 'Xcolor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#fff',
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '数值字号',
|
||||
name: 'fontSizeX',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 14,
|
||||
},
|
||||
{
|
||||
type: 'el-slider',
|
||||
label: '数值角度',
|
||||
name: 'textAngle',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '数值间隔',
|
||||
name: 'textInterval',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '轴反转',
|
||||
name: 'reversalX',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: false
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '轴颜色',
|
||||
name: 'lineColorX',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#fff',
|
||||
},
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '分割线显示',
|
||||
name: 'isShowSplitLineX',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '分割线颜色',
|
||||
name: 'splitLineColorX',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#fff',
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Y轴设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '左显示',
|
||||
name: 'isShowYLeft',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
type: 'el-input-text',
|
||||
label: '左坐标名',
|
||||
name: 'textNameYLeft',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '左坐标名颜色',
|
||||
name: 'nameColorYLeft',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#fff',
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '左坐标字号',
|
||||
name: 'namefontSizeYLeft',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 14,
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '左均分',
|
||||
name: 'splitNumberLeft',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '右显示',
|
||||
name: 'isShowYRight',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
type: 'el-input-text',
|
||||
label: '右坐标名',
|
||||
name: 'textNameYRight',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '右坐标名颜色',
|
||||
name: 'nameColorYRight',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#fff',
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '右坐标字号',
|
||||
name: 'namefontSizeYRight',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 14,
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '右均分',
|
||||
name: 'splitNumberRight',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '数值颜色',
|
||||
name: 'colorY',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#fff',
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '数值字号',
|
||||
name: 'fontSizeY',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 14,
|
||||
},
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '轴反转',
|
||||
name: 'reversalY',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: false
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '轴颜色',
|
||||
name: 'lineColorY',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#fff',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '折线数值设定',
|
||||
list: [
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '显示',
|
||||
name: 'isShowLine',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: false
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '距离',
|
||||
name: 'distanceLine',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '字体字号',
|
||||
name: 'fontSizeLine',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 14
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '字体颜色',
|
||||
name: 'subTextColorLine',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#fff'
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '字体粗细',
|
||||
name: 'fontWeightLine',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'normal', name: '正常'},
|
||||
{code: 'bold', name: '粗体'},
|
||||
{code: 'bolder', name: '特粗体'},
|
||||
{code: 'lighter', name: '细体'}
|
||||
],
|
||||
value: 'normal'
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '柱体数值设定',
|
||||
list: [
|
||||
{
|
||||
type: 'el-switch',
|
||||
label: '显示',
|
||||
name: 'isShowBar',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: false
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '距离',
|
||||
name: 'distanceBar',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '字体字号',
|
||||
name: 'fontSizeBar',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 14
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '字体颜色',
|
||||
name: 'subTextColorBar',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#fff'
|
||||
},
|
||||
{
|
||||
type: 'el-select',
|
||||
label: '字体粗细',
|
||||
name: 'fontWeightBar',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
selectOptions: [
|
||||
{code: 'normal', name: '正常'},
|
||||
{code: 'bold', name: '粗体'},
|
||||
{code: 'bolder', name: '特粗体'},
|
||||
{code: 'lighter', name: '细体'}
|
||||
],
|
||||
value: 'normal'
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '提示语设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '字体大小',
|
||||
name: 'tipFontSize',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 12
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
label: '字体颜色',
|
||||
name: 'lineColor',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: '#e68b55'
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '坐标轴边距设置',
|
||||
list: [
|
||||
{
|
||||
type: 'el-slider',
|
||||
label: '左边距(像素)',
|
||||
name: 'marginLeft',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 10,
|
||||
}, {
|
||||
type: 'el-slider',
|
||||
label: '顶边距(像素)',
|
||||
name: 'marginTop',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 50,
|
||||
}, {
|
||||
type: 'el-slider',
|
||||
label: '右边距(像素)',
|
||||
name: 'marginRight',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 40,
|
||||
}, {
|
||||
type: 'el-slider',
|
||||
label: '底边距(像素)',
|
||||
name: 'marginBottom',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 10,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '自定义配色',
|
||||
list: [
|
||||
{
|
||||
type: 'customColor',
|
||||
label: '',
|
||||
name: 'customColor',
|
||||
required: false,
|
||||
value: [{color: '#00F4FFFF'}, {color: '#e68b55'}],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
],
|
||||
// 数据
|
||||
data: [
|
||||
{
|
||||
type: 'el-radio-group',
|
||||
label: '数据类型',
|
||||
name: 'dataType',
|
||||
require: false,
|
||||
placeholder: '',
|
||||
selectValue: true,
|
||||
selectOptions: [
|
||||
{
|
||||
code: 'staticData',
|
||||
name: '静态数据',
|
||||
},
|
||||
{
|
||||
code: 'dynamicData',
|
||||
name: '动态数据',
|
||||
},
|
||||
],
|
||||
value: 'staticData',
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '刷新时间(毫秒)',
|
||||
name: 'refreshTime',
|
||||
relactiveDom: 'dataType',
|
||||
relactiveDomValue: 'dynamicData',
|
||||
value: 5000
|
||||
},
|
||||
{
|
||||
type: 'el-button',
|
||||
label: '静态数据',
|
||||
name: 'staticData',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
relactiveDom: 'dataType',
|
||||
relactiveDomValue: 'staticData',
|
||||
value: [
|
||||
{"datetime": "2021-06-18", "unsales": 21, "manus": 252, "rework": 38, "sales": 231, "return": 7},
|
||||
{"datetime": "2021-06-19", "unsales": 8, "manus": 133, "rework": 22, "sales": 140, "return": 14},
|
||||
{"datetime": "2021-06-20", "unsales": 19, "manus": 189, "rework": 26, "sales": 170, "return": 7},
|
||||
{"datetime": "2021-06-21", "unsales": 28, "manus": 219, "rework": 21, "sales": 191, "return": 6},
|
||||
{"datetime": "2021-06-22", "unsales": 15, "manus": 159, "rework": 19, "sales": 144, "return": 9}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'dycustComponents',
|
||||
label: '',
|
||||
name: 'dynamicData',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
relactiveDom: 'dataType',
|
||||
chartType: 'widget-barlinechart',
|
||||
dictKey: 'BAR_LINE_PROPERTIES',
|
||||
relactiveDomValue: 'dynamicData',
|
||||
},
|
||||
],
|
||||
// 坐标
|
||||
position: [
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '左边距',
|
||||
name: 'left',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '上边距',
|
||||
name: 'top',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '宽度',
|
||||
name: 'width',
|
||||
required: false,
|
||||
placeholder: '该容器在1920px大屏中的宽度',
|
||||
value: 400,
|
||||
},
|
||||
{
|
||||
type: 'el-input-number',
|
||||
label: '高度',
|
||||
name: 'height',
|
||||
required: false,
|
||||
placeholder: '该容器在1080px大屏中的高度',
|
||||
value: 200,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,443 @@
|
||||
<template>
|
||||
<div :style="styleObj">
|
||||
<v-chart :options="options" autoresize/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
//https://echarts.apache.org/examples/zh/editor.html?c=multiple-y-axis
|
||||
name: "widgetMoreBarLineChart",
|
||||
components: {},
|
||||
props: {
|
||||
value: Object,
|
||||
ispreview: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
right: '20%'
|
||||
},
|
||||
legend: {
|
||||
data: ['Evaporation', 'Precipitation', 'Temperature']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
// prettier-ignore
|
||||
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: 'Evaporation',
|
||||
min: 0,
|
||||
max: 250,
|
||||
position: 'right',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#5470C6'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value} ml'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: 'Precipitation',
|
||||
min: 0,
|
||||
max: 250,
|
||||
position: 'right',
|
||||
offset: 80,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#91CC75'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value} ml'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '温度',
|
||||
min: 0,
|
||||
max: 25,
|
||||
position: 'left',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#EE6666'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value} °C'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Evaporation',
|
||||
type: 'bar',
|
||||
data: [
|
||||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Precipitation',
|
||||
type: 'bar',
|
||||
yAxisIndex: 1,
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Temperature',
|
||||
type: 'line',
|
||||
yAxisIndex: 2,
|
||||
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
styleObj() {
|
||||
return {
|
||||
position: this.ispreview ? "absolute" : "static",
|
||||
width: this.optionsStyle.width + "px",
|
||||
height: this.optionsStyle.height + "px",
|
||||
left: this.optionsStyle.left + "px",
|
||||
top: this.optionsStyle.top + "px",
|
||||
background: this.optionsSetup.background
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.optionsStyle = val.position;
|
||||
this.optionsData = val.data;
|
||||
this.optionsCollapse = val.collapse;
|
||||
this.optionsSetup = val.setup;
|
||||
this.editorOptions();
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.optionsStyle = this.value.position;
|
||||
this.optionsData = this.value.data;
|
||||
this.optionsCollapse = this.value.collapse;
|
||||
this.optionsSetup = this.value.setup;
|
||||
this.editorOptions();
|
||||
},
|
||||
methods: {
|
||||
// 修改图标options属性
|
||||
editorOptions() {
|
||||
this.setOptionsTitle();
|
||||
/*this.setOptionsX();
|
||||
this.setOptionsY();
|
||||
this.setOptionsTop();
|
||||
this.setOptionsBar();
|
||||
this.setOptionsTooltip();
|
||||
this.setOptionsData();
|
||||
this.setOptionsMargin();
|
||||
this.setOptionsLegend();
|
||||
this.setOptionsColor();*/
|
||||
},
|
||||
// 标题修改
|
||||
setOptionsTitle() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const title = {};
|
||||
title.text = optionsSetup.titleText;
|
||||
title.show = optionsSetup.isNoTitle;
|
||||
title.left = optionsSetup.textAlign;
|
||||
title.textStyle = {
|
||||
color: optionsSetup.textColor,
|
||||
fontSize: optionsSetup.textFontSize,
|
||||
fontWeight: optionsSetup.textFontWeight
|
||||
};
|
||||
title.subtext = optionsSetup.subText;
|
||||
title.subtextStyle = {
|
||||
color: optionsSetup.subTextColor,
|
||||
fontWeight: optionsSetup.subTextFontWeight,
|
||||
fontSize: optionsSetup.subTextFontSize
|
||||
};
|
||||
|
||||
this.options.title = title;
|
||||
},
|
||||
// X轴设置
|
||||
setOptionsX() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const xAxis = {
|
||||
type: "category",
|
||||
show: optionsSetup.hideX, // 坐标轴是否显示
|
||||
name: optionsSetup.xName, // 坐标轴名称
|
||||
nameTextStyle: {
|
||||
color: optionsSetup.nameColorX,
|
||||
fontSize: optionsSetup.nameFontSizeX
|
||||
},
|
||||
nameRotate: optionsSetup.textAngle, // 文字角度
|
||||
inverse: optionsSetup.reversalX, // 轴反转
|
||||
axisLabel: {
|
||||
show: true,
|
||||
interval: optionsSetup.textInterval, // 文字间隔
|
||||
rotate: optionsSetup.textAngle, // 文字角度
|
||||
textStyle: {
|
||||
color: optionsSetup.Xcolor, // x轴 坐标文字颜色
|
||||
fontSize: optionsSetup.fontSizeX
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: optionsSetup.lineColorX
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: optionsSetup.isShowSplitLineX,
|
||||
lineStyle: {
|
||||
color: optionsSetup.splitLineColorX
|
||||
}
|
||||
}
|
||||
};
|
||||
this.options.xAxis = xAxis;
|
||||
},
|
||||
// Y轴设置
|
||||
setOptionsY() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const yAxis = [
|
||||
{
|
||||
type: "value",
|
||||
splitNumber: optionsSetup.splitNumberLeft,// 均分
|
||||
show: optionsSetup.isShowYLeft, // 坐标轴是否显示
|
||||
name: optionsSetup.textNameYLeft, // 坐标轴名称
|
||||
nameTextStyle: { // 别名
|
||||
color: optionsSetup.nameColorYLeft,
|
||||
fontSize: optionsSetup.namefontSizeYLeft
|
||||
},
|
||||
inverse: optionsSetup.reversalY, // 轴反转
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: optionsSetup.colorY, // y轴 坐标文字颜色
|
||||
fontSize: optionsSetup.fontSizeY
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: optionsSetup.lineColorY
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
splitNumber: optionsSetup.splitNumberRight,// 均分
|
||||
show: optionsSetup.isShowYRight, // 坐标轴是否显示
|
||||
name: optionsSetup.textNameYRight, // 坐标轴名称
|
||||
nameTextStyle: { // 别名
|
||||
color: optionsSetup.nameColorYRight,
|
||||
fontSize: optionsSetup.namefontSizeYRight
|
||||
},
|
||||
inverse: optionsSetup.reversalY, // 轴反转
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: optionsSetup.colorY, // y轴 坐标文字颜色
|
||||
fontSize: optionsSetup.fontSizeY
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: optionsSetup.lineColorY
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
}
|
||||
}
|
||||
];
|
||||
this.options.yAxis = yAxis;
|
||||
},
|
||||
// 折线设置 数值设置
|
||||
setOptionsTop() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const series = this.options.series;
|
||||
for (const key in series) {
|
||||
if (series[key].type == "line") {
|
||||
series[key].showSymbol = optionsSetup.markPoint;
|
||||
series[key].symbolSize = optionsSetup.pointSize;
|
||||
series[key].smooth = optionsSetup.smoothCurve;
|
||||
if (optionsSetup.area) {
|
||||
series[key].areaStyle = {
|
||||
opacity: optionsSetup.areaThickness / 100
|
||||
};
|
||||
} else {
|
||||
series[key].areaStyle = {
|
||||
opacity: 0
|
||||
};
|
||||
}
|
||||
series[key].lineStyle = {
|
||||
width: optionsSetup.lineWidth
|
||||
};
|
||||
series[key].itemStyle.borderRadius = optionsSetup.radius;
|
||||
series[key].label = {
|
||||
show: optionsSetup.isShowLine,
|
||||
position: "top",
|
||||
distance: optionsSetup.distanceLine,
|
||||
fontSize: optionsSetup.fontSizeLine,
|
||||
color: optionsSetup.subTextColorLine,
|
||||
fontWeight: optionsSetup.fontWeightLine
|
||||
};
|
||||
}
|
||||
}
|
||||
this.options.series = series;
|
||||
},
|
||||
// 柱体设置 数值设置
|
||||
setOptionsBar() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const series = this.options.series;
|
||||
for (const key in series) {
|
||||
if (series[key].type == "bar") {
|
||||
series[key].label = {
|
||||
show: optionsSetup.isShowBar,
|
||||
position: "top",
|
||||
distance: optionsSetup.distanceBar,
|
||||
fontSize: optionsSetup.fontSizeBar,
|
||||
color: optionsSetup.subTextColorBar,
|
||||
fontWeight: optionsSetup.fontWeightBar
|
||||
};
|
||||
series[key].barWidth = optionsSetup.maxWidth;
|
||||
series[key].barMinHeight = optionsSetup.minHeight;
|
||||
series[key].itemStyle.barBorderRadius = optionsSetup.radius;
|
||||
}
|
||||
}
|
||||
this.options.series = series;
|
||||
},
|
||||
// tooltip 设置
|
||||
setOptionsTooltip() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const tooltip = {
|
||||
trigger: "item",
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: optionsSetup.lineColor,
|
||||
fontSize: optionsSetup.tipFontSize
|
||||
}
|
||||
};
|
||||
this.options.tooltip = tooltip;
|
||||
},
|
||||
// 边距设置
|
||||
setOptionsMargin() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const grid = {
|
||||
left: optionsSetup.marginLeft,
|
||||
right: optionsSetup.marginRight,
|
||||
bottom: optionsSetup.marginBottom,
|
||||
top: optionsSetup.marginTop,
|
||||
containLabel: true
|
||||
};
|
||||
this.options.grid = grid;
|
||||
},
|
||||
// 图例颜色修改
|
||||
setOptionsColor() {
|
||||
const optionsSetup = this.optionsSetup;
|
||||
const customColor = optionsSetup.customColor;
|
||||
if (!customColor) return;
|
||||
const arrColor = [];
|
||||
for (let i = 0; i < customColor.length; i++) {
|
||||
arrColor.push(customColor[i].color);
|
||||
}
|
||||
this.options.color = arrColor;
|
||||
this.options = Object.assign({}, this.options);
|
||||
},
|
||||
// 数据处理
|
||||
setOptionsData() {
|
||||
const optionsData = this.optionsData; // 数据类型 静态 or 动态
|
||||
optionsData.dataType == "staticData"
|
||||
? this.staticDataFn(optionsData.staticData)
|
||||
: this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
|
||||
},
|
||||
staticDataFn(val) {
|
||||
const series = this.options.series;
|
||||
let axis = [];
|
||||
let bar = [];
|
||||
let line = [];
|
||||
for (const i in val) {
|
||||
axis[i] = val[i].axis;
|
||||
bar[i] = val[i].bar;
|
||||
line[i] = val[i].line;
|
||||
}
|
||||
// x轴
|
||||
this.options.xAxis.data = axis;
|
||||
// series
|
||||
for (const i in series) {
|
||||
if (series[i].type == "bar") {
|
||||
series[i].data = bar;
|
||||
} else {
|
||||
series[i].data = line;
|
||||
}
|
||||
}
|
||||
},
|
||||
dynamicDataFn(val, refreshTime) {
|
||||
if (!val) return;
|
||||
if (this.ispreview) {
|
||||
this.getEchartData(val);
|
||||
this.flagInter = setInterval(() => {
|
||||
this.getEchartData(val);
|
||||
}, refreshTime);
|
||||
} else {
|
||||
this.getEchartData(val);
|
||||
}
|
||||
},
|
||||
getEchartData(val) {
|
||||
const data = this.queryEchartsData(val);
|
||||
data.then(res => {
|
||||
this.renderingFn(res);
|
||||
});
|
||||
},
|
||||
renderingFn(val) {
|
||||
this.options.xAxis.data = val.xAxis;
|
||||
// series
|
||||
const series = this.options.series;
|
||||
for (const i in series) {
|
||||
for (const j in val.series) {
|
||||
if (series[i].type == val.series[j].type) {
|
||||
series[i].data = val.series[j].data;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.echarts {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue