echarts柱状图通过阴影增加立体效果

效果：

 

code：

  1 <html>
  2 <style>
  3     div{
  4         width: 500px;
  5         height: 500px;
  6         background-color: white;
  7     }
  8 </style>
  9 <body>
 10     <div id="dd"></div>
 11 </body>
 12 
 13 </html>
 14 <script src="./incubator-echarts-4.7.0/dist/echarts.js"></script>
 15 <script>
 16     var MyCubeRect = echarts.graphic.extendShape({
 17         shape: {
 18             x: 0,
 19             y: 0,
 20             width: 48, //柱宽 
 21             zWidth: 8, //阴影折角宽 
 22             zHeight: 4, //阴影折角高 
 23         },
 24         buildPath: function (ctx, shape) {
 25             const api = shape.api;
 26             const xAxisPoint = api.coord([shape.xValue, 0]);
 27             const p0 = [shape.x, shape.y];
 28             const p1 = [shape.x - shape.width / 2, shape.y];
 29             const p4 = [shape.x + shape.width / 2, shape.y];
 30             const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
 31             const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
 32 
 33             ctx.moveTo(p0[0], p0[1]); //0
 34             ctx.lineTo(p1[0], p1[1]); //1
 35             ctx.lineTo(p2[0], p2[1]); //2
 36             ctx.lineTo(p3[0], p3[1]); //3
 37             ctx.lineTo(p4[0], p4[1]); //4
 38             ctx.lineTo(p0[0], p0[1]); //0
 39             ctx.closePath();
 40         }
 41     });
 42     var MyCubeShadow = echarts.graphic.extendShape({
 43         shape: {
 44             x: 0,
 45             y: 0,
 46             width: 48,
 47             zWidth: 8,
 48             zHeight: 4,
 49         },
 50         buildPath: function (ctx, shape) {
 51             const api = shape.api;
 52             const xAxisPoint = api.coord([shape.xValue, 0]);
 53             const p0 = [shape.x, shape.y];
 54             const p1 = [shape.x - shape.width / 2, shape.y];
 55             const p4 = [shape.x + shape.width / 2, shape.y];
 56             const p6 = [shape.x + shape.width / 2 + shape.zWidth, shape.y - shape.zHeight];
 57             const p7 = [shape.x - shape.width / 2 + shape.zWidth, shape.y - shape.zHeight];
 58             const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
 59             const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1] - shape.zHeight];
 60 
 61             ctx.moveTo(p4[0], p4[1]); //4
 62             ctx.lineTo(p3[0], p3[1]); //3
 63             ctx.lineTo(p5[0], p5[1]); //5
 64             ctx.lineTo(p6[0], p6[1]); //6
 65             ctx.lineTo(p4[0], p4[1]); //4
 66 
 67             ctx.moveTo(p4[0], p4[1]); //4
 68             ctx.lineTo(p6[0], p6[1]); //6
 69             ctx.lineTo(p7[0], p7[1]); //7
 70             ctx.lineTo(p1[0], p1[1]); //1
 71             ctx.lineTo(p4[0], p4[1]); //4
 72             ctx.closePath();
 73         }
 74     });
 75     echarts.graphic.registerShape('MyCubeRect', MyCubeRect);
 76     echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow);
 77 
 78     var myChart = echarts.init(document.getElementById('dd'));
 79 
 80     var option = {
 81         grid: {
 82             height: 300
 83         },
 84         xAxis: {
 85             data: ['one', 'two']
 86         },
 87         yAxis: {
 88             type: 'value'
 89         },
 90         series: [{
 91             type: 'custom',
 92             renderItem: function (params, api) {
 93                 let location = api.coord([api.value(0), api.value(1)]);
 94                 return {
 95                     type: 'group',
 96                     children: [{
 97                         type: 'MyCubeRect',
 98                         shape: {
 99                             api,
100                             xValue: api.value(0),
101                             yValue: api.value(1),
102                             x: location[0],
103                             y: location[1]
104                         },
105                         style: {
106                             fill: '#5AD8A6'
107                         }
108                     }, {
109                         type: 'MyCubeShadow',
110                         shape: {
111                             api,
112                             xValue: api.value(0),
113                             yValue: api.value(1),
114                             x: location[0],
115                             y: location[1]
116                         },
117                         style: {
118                             fill: '#2DCF8E'
119                         }
120                     }]
121                 };
122             },
123             data: [20, 60]
124         }]
125     };
126 
127     myChart.setOption(option);
128 </script>

 

注意：4.7.0这个版本的echarts.js可以出这个效果，老版本不一定可以

 

posted @ 2020-05-15 14:27  anderson_1996  阅读(8062)  评论(0)  编辑  收藏  举报