渐变色柱状图案例

raodeming 3 years ago
parent d216082b0a
commit 464c8d098c

@ -1288,7 +1288,8 @@ const widgetTools = [
placeholder: '', placeholder: '',
}, },
], ],
}, { },
{
name: '坐标轴边距设置', name: '坐标轴边距设置',
list: [ list: [
{ {
@ -1321,7 +1322,8 @@ const widgetTools = [
value: 10, value: 10,
}, },
], ],
}, { },
{
name: '图例操作', name: '图例操作',
list: [ list: [
{ {
@ -1393,7 +1395,8 @@ const widgetTools = [
value: '' value: ''
}, },
], ],
}, { },
{
name: '自定义配色', name: '自定义配色',
list: [ list: [
{ {
@ -1401,10 +1404,575 @@ const widgetTools = [
label: '', label: '',
name: 'customColor', name: 'customColor',
required: false, required: false,
value: [{ color: '#ED0E0E' }, { color: '#6CCD17' }, { color: '#172CCD' }, { color: '#B817CD' }, { color: '#AFCD17' }], value: [{ color: '#ff7f50' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#32cd32' }, { color: '#6495ed' }],
},
],
},
],
],
// 数据
data: [
{
type: 'el-radio-group',
label: '数据类型',
name: 'dataType',
require: false,
placeholder: '',
selectValue: true,
selectOptions: [
{
code: 'staticData',
name: '静态数据',
},
{
code: 'dynamicData',
name: '动态数据',
}, },
], ],
value: 'staticData',
},
{
type: 'el-button',
label: '静态数据',
name: 'staticData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'staticData',
value: '{"categories": ["苹果","三星","小米","oppo","vivo"],"series": [{"name": "手机品牌","data": [1000,2229,3879,2379,4079]}]}',
},
{
type: 'dycustComponents',
label: '',
name: 'dynamicData',
required: false,
placeholder: 'px',
relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData',
chartType: 'widget-barchart',
value: '',
},
],
// 坐标
position: [
{
type: 'el-input-number',
label: '左边距',
name: 'left',
required: false,
placeholder: 'px',
value: 0,
},
{
type: 'el-input-number',
label: '上边距',
name: 'top',
required: false,
placeholder: 'px',
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,
},
],
},
},
{
code: 'widget-gradient-color-barchart',
type: 'chart',
label: '柱形图-渐变色',
icon: 'iconzhuzhuangtu',
options: {
// 配置
setup: [
{
type: 'el-input-text',
label: '图层名称',
name: 'layerName',
required: false,
placeholder: '',
value: '柱状图',
},
{
type: 'el-switch',
label: '竖展示',
name: 'verticalShow',
required: false,
placeholder: '',
value: false,
},
{
type: 'vue-color',
label: '背景颜色',
name: 'background',
required: false,
placeholder: '',
value: ''
},
[
// {
// 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: 22
},
{
type: 'el-select',
label: '字体位置',
name: 'textAlign',
required: false,
placeholder: '',
selectOptions: [
{ code: 'center', name: '居中' },
{ code: 'left', name: '左对齐' },
{ code: 'right', name: '右对齐' },
],
value: 'center'
},
{
type: 'el-input-text',
label: '副标题',
name: 'subText',
required: false,
placeholder: '',
value: ''
}, },
{
type: 'vue-color',
label: '字体颜色',
name: 'subTextColor',
required: false,
placeholder: '',
value: '#90979c'
},
{
type: 'el-input-text',
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-input-text',
// label: '名称',
// name: 'xName',
// required: false,
// placeholder: '',
// value: ''
// },
// {
// type: 'el-switch',
// label: '显示',
// name: 'hideX',
// required: false,
// placeholder: '',
// value: true,
// },
// {
// type: 'vue-color',
// label: '坐标名颜色',
// name: 'xNameColor',
// required: false,
// placeholder: '',
// value: '#fff'
// },
// {
// type: 'el-input-number',
// label: '字体大小',
// name: 'xNameFontSize',
// required: false,
// placeholder: '',
// value: 12
// },
// {
// 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: ''
// },
// {
// type: 'vue-color',
// label: '颜色',
// name: 'Xcolor',
// required: false,
// placeholder: '',
// value: '#fff',
// },
// {
// type: 'el-input-number',
// label: '字号',
// name: 'fontSizeX',
// required: false,
// placeholder: '',
// value: 12,
// },
// ],
// },
// {
// name: 'Y轴设置',
// list: [
// {
// type: 'el-input-text',
// label: '名称',
// name: 'textNameY',
// require: false,
// placeholder: '',
// value: ''
// },
// {
// type: 'el-switch',
// label: '显示',
// name: 'isShowY',
// require: false,
// placeholder: '',
// value: true,
// },
// {
// type: 'vue-color',
// label: '坐标名颜色',
// name: 'NameColorY',
// required: false,
// placeholder: '',
// value: '#fff',
// },
// {
// type: 'el-input-number',
// label: '字体大小',
// name: 'NameFontSizeY',
// required: false,
// placeholder: '',
// value: 12,
// },
// {
// type: 'el-switch',
// label: '轴反转',
// name: 'reversalY',
// required: false,
// placeholder: '',
// value: false
// },
// {
// type: 'vue-color',
// label: '颜色',
// name: 'colorY',
// required: false,
// placeholder: '',
// value: '#fff',
// },
// {
// type: 'el-input-number',
// label: '字号',
// name: 'fontSizeY',
// required: false,
// placeholder: '',
// value: 12,
// },
// ],
// },
// {
// name: '数值设定',
// list: [
// {
// type: 'el-switch',
// label: '显示',
// name: 'isShow',
// required: false,
// placeholder: '',
// value: false
// },
// {
// type: 'el-input-number',
// label: '字体大小',
// name: 'fontSize',
// required: false,
// placeholder: '',
// value: 14
// },
// {
// type: 'vue-color',
// label: '字体颜色',
// name: 'subTextColor',
// required: false,
// placeholder: '',
// value: '#fff'
// },
// {
// type: 'el-select',
// label: '字体粗细',
// name: 'fontWeight',
// 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: 'fontSize',
// required: false,
// placeholder: '',
// },
// {
// type: 'vue-color',
// label: '字体颜色',
// name: 'lineColor',
// required: false,
// placeholder: '',
// },
// ],
// },
// {
// 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: 'el-switch',
// label: '图例',
// name: 'isShowLegend',
// required: false,
// placeholder: '',
// value: true,
// },
// {
// type: 'vue-color',
// label: '字体颜色',
// name: 'lengedColor',
// required: false,
// placeholder: '',
// value: '#fff',
// },
// {
// type: 'el-input-number',
// label: '字体大小',
// name: 'lengedFontSize',
// required: false,
// placeholder: '',
// value: 16,
// },
// {
// type: 'el-input-number',
// label: '图例宽度',
// name: 'lengedWidth',
// required: false,
// placeholder: '',
// value: 15,
// },
// {
// type: 'el-select',
// label: '横向位置',
// name: 'lateralPosition',
// required: false,
// placeholder: '',
// selectOptions: [
// { code: 'left', name: '左对齐' },
// { code: 'right', name: '右对齐' },
// ],
// value: ''
// },
// {
// type: 'el-select',
// label: '纵向位置',
// name: 'longitudinalPosition',
// required: false,
// placeholder: '',
// selectOptions: [
// { code: 'top', name: '顶部' },
// { code: 'bottom', name: '底部' },
// ],
// value: ''
// },
// {
// type: 'el-select',
// label: '布局前置',
// name: 'layoutFront',
// required: false,
// placeholder: '',
// selectOptions: [
// { code: 'vertical', name: '竖排' },
// { code: 'horizontal', name: '横排' },
// ],
// value: ''
// },
// ],
// },
// {
// name: '自定义配色',
// list: [
// {
// type: 'customColor',
// label: '',
// name: 'customColor',
// required: false,
// value: [{ color: '#ff7f50' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#32cd32' }, { color: '#6495ed' }],
// },
// ],
// },
], ],
], ],
// 数据 // 数据

@ -0,0 +1,426 @@
<template>
<div :style="styleObj">
<v-chart :options="options" autoresize/>
</div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'WidgetGradientColorBarchart', //https://www.makeapie.com/editor.html?c=x0oZWoncE
components: {},
props: {
value: Object,
ispreview: Boolean,
},
data() {
return {
options: {
backgroundColor: '#00265f',
"title": {
"text": "政策补贴额度",
x: "center",
y:"4%",
textStyle: {
color: '#fff',
fontSize: '22'
},
subtextStyle: {
color: '#90979c',
fontSize: '16',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '15%',
right: '3%',
left: '5%',
bottom: '12%'
},
legend: {
textStyle: {
color: '#fff',
},
},
xAxis: {
type: 'category',
data: ['制造业', '建筑业', '农林牧渔', '房地产', '金融业', '居民服务及其他'],
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
},
axisLabel: {
margin: 10,
color: '#e2e9ff',
textStyle: {
fontSize: 14
},
},
},
yAxis: {
name: '单位:万元',
axisLabel: {
formatter: '{value}',
color: '#e2e9ff',
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.12)'
}
}
},
series: [{
type: 'bar',
data: [5000, 2600, 1300, 1300, 1250, 1500],
barWidth: '20px',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,244,255,1)' // 0%
}, {
offset: 1,
color: 'rgba(0,77,167,1)' // 100%
}], false),
barBorderRadius: [30, 30, 30, 30],
shadowColor: 'rgba(0,160,221,1)',
shadowBlur: 4,
}
},
label: {
normal: {
show: true,
lineHeight: 30,
width: 80,
height: 30,
backgroundColor: 'rgba(0,160,221,0.1)',
borderRadius: 200,
position: ['-8', '-60'],
distance: 1,
formatter: [
' {d|●}',
' {a|{c}} \n',
' {b|}'
].join(','),
rich: {
d: {
color: '#3CDDCF',
},
a: {
color: '#fff',
align: 'center',
},
b: {
width: 1,
height: 30,
borderWidth: 1,
borderColor: '#234e6c',
align: 'left'
},
}
}
}
}]
},
optionsStyle: {}, //
optionsData: {}, //
optionsSetup: {},
}
},
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) {
console.log(val)
this.optionsStyle = val.position
this.optionsData = val.data
this.optionsCollapse = val.setup
this.optionsSetup = val.setup
this.editorOptions()
},
deep: true,
},
},
mounted() {
this.optionsStyle = this.value.position
this.optionsData = this.value.data
this.optionsCollapse = this.value.setup
this.optionsSetup = this.value.setup
this.editorOptions()
},
methods: {
// options
editorOptions() {
this.setOptionsTitle()
// this.setOptionsX()
// this.setOptionsY()
// this.setOptionsTop()
// this.setOptionsTooltip()
// this.setOptionsMargin()
// this.setOptionsLegend()
// this.setOptionsColor()
this.setOptionsData()
},
//
setOptionsTitle() {
const optionsCollapse = this.optionsSetup
const title = {}
title.text = optionsCollapse.titleText
title.show = optionsCollapse.isNoTitle
title.left = optionsCollapse.textAlign
title.textStyle = {
color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight,
}
title.subtext = optionsCollapse.subText
title.subtextStyle = {
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.subTextFontWeight,
fontSize: optionsCollapse.subTextFontSize,
}
this.options.title = title
},
// X
setOptionsX() {
const optionsCollapse = this.optionsSetup
const xAxis = {
type: 'category',
show: optionsCollapse.hideX, //
name: optionsCollapse.xName, //
nameTextStyle: {
color: optionsCollapse.xNameColor,
fontSize: optionsCollapse.xNameFontSize,
},
nameRotate: optionsCollapse.textAngle, //
inverse: optionsCollapse.reversalX, //
axisLabel: {
show: true,
interval: optionsCollapse.textInterval, //
rotate: optionsCollapse.textAngle, //
textStyle: {
color: optionsCollapse.Xcolor, // x
fontSize: optionsCollapse.fontSizeX,
},
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
}
this.options.xAxis = xAxis
},
// Y
setOptionsY() {
const optionsCollapse = this.optionsSetup
const yAxis = {
type: 'value',
show: optionsCollapse.isShowY, //
name: optionsCollapse.textNameY, //
nameTextStyle: {
color: optionsCollapse.NameColorY,
fontSize: optionsCollapse.NameFontSizeY,
},
inverse: optionsCollapse.reversalY, //
axisLabel: {
show: true,
textStyle: {
color: optionsCollapse.colorY, // x
fontSize: optionsCollapse.fontSizeY,
},
},
splitLine: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
},
},
}
this.options.yAxis = yAxis
},
// or
setOptionsTop() {
const optionsCollapse = this.optionsSetup
const series = this.options.series
for (const key in series) {
if (series[key].type == 'bar') {
series[key].label = {
show: optionsCollapse.isShow,
position: 'top',
distance: 10,
fontSize: optionsCollapse.fontSize,
color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.fontWeight,
}
series[key].barWidth = optionsCollapse.maxWidth
series[key].barMinHeight = optionsCollapse.minHeight
}
}
this.options.series = series
},
// tooltip
setOptionsTooltip() {
const optionsCollapse = this.optionsSetup
const tooltip = {
trigger: 'item',
show: true,
textStyle: {
color: optionsCollapse.lineColor,
fontSize: optionsCollapse.fontSize,
},
}
this.options.tooltip = tooltip
},
//
setOptionsMargin() {
const optionsCollapse = this.optionsSetup
const grid = {
left: optionsCollapse.marginLeft,
right: optionsCollapse.marginRight,
bottom: optionsCollapse.marginBottom,
top: optionsCollapse.marginTop,
containLabel: true,
}
this.options.grid = grid
},
// legend
setOptionsLegend() {
const optionsCollapse = this.optionsSetup
const legend = this.options.legend
legend.show = optionsCollapse.isShowLegend
legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto'
legend.right = optionsCollapse.lateralPosition == 'right' ? 0 : 'auto'
legend.top = optionsCollapse.longitudinalPosition == 'top' ? 0 : 'auto'
legend.bottom = optionsCollapse.longitudinalPosition == 'bottom' ? 0 : 'auto'
legend.orient = optionsCollapse.layoutFront
legend.textStyle = {
color: optionsCollapse.lengedColor,
fontSize: optionsCollapse.fontSize,
}
legend.itemWidth = optionsCollapse.lengedWidth
},
//
setOptionsColor() {
const optionsCollapse = this.optionsSetup
const customColor = optionsCollapse.customColor
if (!customColor) return
const arrColor = []
for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color)
}
const itemStyle = {
normal: {
color: (params) => {
return arrColor[params.dataIndex]
},
barBorderRadius: optionsCollapse.radius,
},
}
for (const key in this.options.series) {
if (this.options.series[key].type == 'bar') {
this.options.series[key].itemStyle = itemStyle
}
}
this.options = Object.assign({}, this.options)
},
//
setOptionsData() {
const optionsSetup = this.optionsSetup
console.log(optionsSetup)
const optionsData = this.optionsData // or
console.log(optionsData)
optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData, optionsSetup) : this.dynamicDataFn(optionsData.dynamicData, optionsSetup)
},
//
staticDataFn(val, optionsSetup) {
const staticData = JSON.parse(val)
// x
if (optionsSetup.verticalShow) {
this.options.xAxis.data = []
this.options.yAxis.data = staticData.categories
this.options.xAxis.type = 'value'
this.options.yAxis.type = 'category'
} else {
this.options.xAxis.data = staticData.categories
this.options.yAxis.data = []
this.options.xAxis.type = 'category'
this.options.yAxis.type = 'value'
}
// series
const series = this.options.series
for (const i in series) {
if (series[i].type == 'bar') {
series[i].data = staticData.series[0].data
}
}
},
//
dynamicDataFn(val, optionsSetup) {
console.log(val)
if (!val) return
// x
if (optionsSetup.verticalShow) {
this.options.xAxis.data = []
this.options.yAxis.data = val.xAxis
this.options.xAxis.type = 'value'
this.options.yAxis.type = 'category'
} else {
this.options.xAxis.data = val.xAxis
this.options.yAxis.data = []
this.options.xAxis.type = 'category'
this.options.yAxis.type = 'value'
}
// series
const series = this.options.series
for (const i in series) {
if (series[i].type == 'bar') {
series[i].data = val.series[i].data
}
}
},
},
}
</script>
<style scoped lang="scss">
.echarts {
width: 100%;
height: 100%;
min-width: 200px;
min-height: 200px;
overflow: hidden;
}
</style>

@ -55,6 +55,7 @@ import widgetSlider from './widgetSlider.vue'
import widgetVideo from './widgetVideo.vue' import widgetVideo from './widgetVideo.vue'
import WidgetIframe from './widgetIframe.vue' import WidgetIframe from './widgetIframe.vue'
import widgetBarchart from './widgetBarchart.vue' import widgetBarchart from './widgetBarchart.vue'
import widgetGradientColorBarchart from './bar/widgetGradientColorBarchart.vue'
import widgetLinechart from './widgetLinechart.vue' import widgetLinechart from './widgetLinechart.vue'
import widgetBarlinechart from './widgetBarlinechart' import widgetBarlinechart from './widgetBarlinechart'
import WidgetPiechart from './widgetPiechart.vue' import WidgetPiechart from './widgetPiechart.vue'
@ -75,6 +76,7 @@ export default {
widgetVideo, widgetVideo,
WidgetIframe, WidgetIframe,
widgetBarchart, widgetBarchart,
widgetGradientColorBarchart,
widgetLinechart, widgetLinechart,
widgetBarlinechart, widgetBarlinechart,
WidgetPiechart, WidgetPiechart,

Loading…
Cancel
Save