【组件模板】扩展柱状图

显示效果：


实现步骤：
1.使用Echarts图表

2.绑定数据

3.属性中调整自定义属性

代码内容：

1. var data1 = option.series[0].data.map((x)=>{
   
2.         return x.value
   
3.     });
   
4.     var data2 = option.series[1].data.map((x)=>{
   
5.         return x.value
   
6.     });
   
7.     //定义两个上下箭头的矢量路径
   
8.     var up = 'path://M286.031,265l-16.025,3L300,223l29.994,45-16.041-3-13.961,69Z';
   
9.     var down = 'path://M216.969,292l16.025-3L203,334l-29.994-45,16.041,3,13.961-69Z'
   
10.     //遍历data2里面元素的正负定义一个矢量路径的数组
    
11.     var path = [up,down,up,down,down,down,up]
    
12. 
    
13. 
    
14. 
    
15.     const _option = {
    
16.         color: ['#3398DB'],
    
17.         tooltip: {
    
18.             trigger: 'axis',
    
19.             axisPointer: {            // 坐标轴指示器，坐标轴触发有效
    
20.                 type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    
21.             }
    
22.         },
    
23.         grid: {
    
24.             top:option.grid.top,
    
25.             left: option.grid.left,
    
26.             right: option.grid.right-104,
    
27.             bottom:option.grid.bottom,
    
28.             containLabel: true,
    
29.         },
    
30.         xAxis: option.xAxis,
    
31.         yAxis: option.yAxis[0],
    
32.         series: [
    
33.             {
    
34.                 "name": "",
    
35.                 type: 'pictorialBar',
    
36.                 symbol: function(data,params){
    
37.                     if(data2[params.dataIndex]>0){
    
38.                         return up
    
39.                     }else{
    
40.                         return down
    
41.                     }
    
42. 
    
43.                 },
    
44.                 symbolSize: [20, 30],
    
45.                 symbolOffset: [0, -40],
    
46.                 color:'orange',
    
47.                 symbolPosition: 'end',
    
48.                 "label": {
    
49.                     "show": true,
    
50.                     "color": "#ffffff",
    
51.                     "fontStyle": "normal",
    
52.                     "fontWeight": "normal",
    
53.                     "fontFamily": "font-34b4f28e-178a-45fa-87ad-37c48a8f32bf",
    
54.                     "fontSize": 13.333333333333334,
    
55.                     "position": "top",
    
56.                     "alignTo": "none",
    
57.                     "textBorderColor": "transparent",
    
58.                     "bleedMargin": 0
    
59.                 },
    
60.                 data: data1
    
61.             },
    
62.             {
    
63.                 name: '直接访问',
    
64.                 type: 'bar',
    
65.                 barWidth: '40%',
    
66.                 data: data1
    
67.             }
    
68.         ]
    
69.     };
    
70. return _option;

复制代码

运行，浏览效果。
示例案例： wyn-export-20240204151842.zip (398.72 KB, 下载次数: 18)

2024-2-4 15:18 上传

点击文件名下载附件