【组件模板】柱形图变形

直接看效果：




直接拷贝代码：

1. <font size="3">//将所有系列显示为三角形
   
2. let seriesData = []
   
3. option.series[0].data.forEach(item => {
   
4.         seriesData.push(item.value)
   
5. })
   
6. 
   
7. option.series.forEach(item => {
   
8.   item.type = 'pictorialBar',
   
9.     item.symbol = 'triangle',
   
10.         item.barGap = '-60%',
    
11.     item.barWidth = '55%'
    
12. })
    
13. 
    
14. //在所有系列之后，添加一个矩形区域作为背景
    
15. var bg =
    
16. {
    
17.         type: 'bar',
    
18.         showBackground:true,
    
19.         backgroundStyle : {
    
20.         color: 'rgba(180, 180, 180, 0.1)'
    
21.       },
    
22.         symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
    
23.         itemStyle: {
    
24.           normal: {
    
25.             color: 'rgba(255, 255, 255, 0)'
    
26.           }
    
27.         },
    
28.         z: '-99',
    
29.         data:seriesData
    
30.       };
    
31. option.series.push(bg);
    
32. return option</font>

复制代码

使用方式：
方式1：
在Wyn管理后台的【导入】功能，导入以下Zip包，然后在仪表板设计器的左侧工具箱的【组件模板分类中】可以找到。
柱形图变形样式.zip (417.92 KB, 下载次数: 20)

2024-1-12 09:41 上传

点击文件名下载附件

方式2：

在仪表板设计器中添加【柱状图(ECharts)】，然后将以上代码粘贴到【自定义属性】中：