ECharts组合图
功能概述
组合图将两种图表类型组合在一起，让数据更容易理解。
ECharts 组合图插件与内置的组合图组件不同，它可以通过开放的自定义属性定制出更丰富的视觉效果，下图是部分示例：
示例文件包：可下载后直接导入系统参考查看。
添加ECharts组合图插件
单击可视化插件按钮展开插件列表，然后在 ECharts 插件中将组合图插件拖拽至编辑区，即可添加一个 ECharts 组合图插件。
数据绑定
添加图表后，数据绑定面板会自动打开，在数据绑定面板中选择数据集或数据模型。
示例中我们使用的是一个数据集。
将数据集或模型中的字段拖拽到组件的各个绑定区域完成数据绑定，在左侧编辑区可见组件已经按照绑定的字段进行了绘制。
数据绑定区域 | 说明 |
|---|---|
左值轴 | 可绑定一个或多个字段。 如果已经在系列区域绑定了字段，则此数值轴将无法绑定多个字段。 |
右值轴 | 可绑定一个或多个字段。 如果已经在系列区域绑定了字段，则此数值轴将无法绑定多个字段。 |
分类 | 最多可绑定一个字段。 |
系列 | 最多可绑定一个字段。 如果左值轴或右值轴绑定了多个字段，则系列区域将无法绑定字段。 |
钻取 | 设置组件数据钻取路径，详见数据钻取。 |
数据处理
ECharts 插件与内置图表类似都可进行数据处理，如对数据进行聚合运算，修改数据的显示格式和单位等等，使其更符合使用场景的需要。
数据处理详细操作介绍请参考数据处理。
数据探索与分析
ECharts 插件同样支持丰富的数据探索分析能力，可为您的数据可视化分析过程提供强有力的支撑。
比如为组件添加过滤器、排名筛选、切换类型、添加参考线等等。
有关具体操作的介绍，请参考数据探索与分析中对应的介绍。
基本属性外观设置
在编辑区右侧选择属性设置或者双击该图表，打开属性设置面板可进行图表外观属性的设置。
绝大部分的属性设置项目与内置图表一致，请参考单个组件外观与属性设置。本文中主要举例介绍不同的属性设置项。
显示缩放轴
显示缩放轴： 开启后将在图表中显示缩放轴。
缩放轴尺寸： 设置缩放轴的宽度。
缩放轴默认长度： 设置预览图表时缩放轴默认显示的长度，也就决定了默认显示的数据数量。
缩放轴颜色： 设置缩放轴的颜色。
启用滚动缩放： 是否开启鼠标滚轮控制缩放轴功能。开启后，预览图表时无需拖动缩放轴，使用鼠标滚动即可进行缩放。
提示标签坐标轴指示器
用于开启鼠标提示时对应的坐标数据和指示线，开启后可进一步设置指示器类型、直线类型/颜色/宽度。
自定义属性
ECharts 插件与普通内置图表最大的不同点是可以自定义属性，使用 JS 代码进行深度定制。
自定义属性窗口编写区可直接编写JS代码，具体配置项与 ECharts 一致，请您参考 ECharts 官网 https://echarts.apache.org/zh/option.html#title。
窗口右上角的查看配置项按钮可查看产品图表中默认的配置项，当与定制内容重复时，以定制内容优先。
示例
例如使用JS 代码自定义属性修改了折线图的显示样式，使其分段显示不同的颜色。预览效果如下：
具体代码如下，供您参考。
let cates = []
let data0 = []
let data1 = []
let legend = []
let dataset = {source:[["product","data","data2"]]}
option.xAxis.data.forEach(item => {
cates.push(item.value)
})
option.series.forEach((item,index) => {
legend.push(item.name)
let str = 'data' + index
item.data.forEach(data => {
eval(str).push(data.value)
})
})
cates.forEach((item,index) => {
let tmp = [item,data0[index],data1[index]]
dataset.source.push(tmp)
})
option = {
color: ['rgba(245, 42, 118,', 'rgba(255, 255, 0,', 'rgba(14, 248, 254,'],
backgroundColor: '#020B19',
dataset:dataset,
grid: {
top: '17%',
bottom: '52%',
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "line",
lineStyle: {
width:60,
color:"rgba(14, 248, 254,.1)"
}
},
legend: {
show: true,
right: 10,
data: legend,
itemWidth: 4,
itemHeight: 12,
itemGap: 15,
icon: "circle",
textStyle: {
color: "rgba(14, 248, 254,1)",
fontSize: 12
}
},
borderWidth: 1,
backgroundColor: "#0e2b33",
borderColor: "rgba(14, 248, 254, 1)",
formatter: function(A){
var htm="<div style='color:#fff'>"+A[0].name+"</div><div style='color:rgba(14, 248, 254,1)'>有销库存满足率："+A[0].value[1].toLocaleString()+"%</div><div style='color:rgba(14, 248, 254,1)'>日环比："+A[0].value[2].toLocaleString()+"%</div>"
return htm
},
extraCssText: "z-index:96"
},
xAxis: {
type: "category",
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: true,
interval: 0,
margin: 25,
textStyle: {
color: '#fff',
fontSize: 12
}
}
},
yAxis: {
show: false,
type: "value"
},
series: [{
name: '订单金额', //顶
type: 'pictorialBar',
symbolSize: [25, 10],
symbolOffset: [0, -10],
symbolPosition: 'end',
z: 12,
itemStyle: {
color: function(params) {
return option.color[2] + "1)"
},
barBorderRadius: 30,
},
label: {
show: true,
position: "top",
fontSize: 15,
fontFamily: "DIN",
fontWeight: "bold",
formatter: function(params) {
return params.value[params.encode.y[0]]
}
}
}, {
name: '订单金额', //底
type: 'pictorialBar',
symbolSize: [25, 10],
symbolOffset: [0, 5],
z: 12,
itemStyle: {
color: function(params) {
return option.color[2] + "1)"
},
barBorderRadius: 30
}
}, {
name: '订单金额', //底
type: 'pictorialBar',
symbolSize: [36, 12],
symbolOffset: [0, 8],
itemStyle: {
normal: {
color: 'transparent',
borderColor: "rgba(14, 248, 254,1)",
borderWidth: 2
}
}
}, {
name: '订单金额', //底
type: 'pictorialBar',
symbolSize: [52, 18],
symbolOffset: [0, 14],
itemStyle: {
normal: {
color: 'transparent',
borderColor: "rgba(14, 248, 254,1)",
borderWidth: 2
}
}
}, {
name: '订单利润',
type: 'bar',
itemStyle: {
color: function(params) {
var colorList = []
colorList[params.dataIndex] =
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: option.color[2] + '0.05)' // color at 0%
}, {
offset: 1, color: option.color[2] + '.6)' // color at 100%
}],
}
return colorList[params.dataIndex]
}
},
showBackground: true,
backgroundStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(14, 248, 254,0)' // color at 0%
}, {
offset: 1, color: 'rgba(14, 248, 254,0.2)' // color at 100%
}],
global: false // default is false
}
},
barWidth: 25,
barGap: '-100%'
},
{
"name": "订单利润",
"type": "line",
"smooth": true,
"showAllSymbol": false,
"showSymbol":false,
"symbol": 'circle',
"symbolSize": 3,
"lineStyle": {
"normal": {
"show": true,
"color": "#ffea38"
}
},
"encode": {
"y": "data2"
},
"label": {
"show": false,
"position": "top",
"formatter": function(params) {
return params.data[1]
}
},
"itemStyle": {
"color": "#ffea38",
}
}]
};
console.log(option)
return option