Echarts定制-立体圆柱

清风和月明

于 2020-12-06 17:05:08 发布

阅读量6.8k

点赞数 4

分类专栏： Echarts 文章标签： javascript js 大数据 echarts 数据可视化

本文链接：https://blog.youkuaiyun.com/qq_41116027/article/details/110745595

版权

Echarts定制- 立体圆柱

一、基础学习

B站有超详细的基础教学视频，这里我推荐

黑马程序员pink老师[https://www.bilibili.com/video/BV1v7411R7mp]

非常的详细，风格幽默

charts社区[https://www.makeapie.com/explore.html]
这里有超多的炫酷效果

二、立体圆柱

在这里插入图片描述

 let data1 = ['游戏', '金融', '电商', '教育', '旅游'];
 let data2 = [120, 160, 150, 80, 70];
 let barTopColor = ["#02c3f1", "#ffe000", "#9a7fd1", "#06fdbc", "#006ced"];
 let barBottomColor = ["rgba(2,195,241,0.1)", "rgba(83, 229, 104, 0.1)", "rgba(161, 84, 233, 0.1)", "rgba(83, 229, 104, 0.1)", "rgba(161, 84, 233, 0.1)"];
 option = {
   
     backgroundColor: '#0A2E5D',
     //设置网格布局，影响图形位置top bottom left right (上下左右) 
     grid: {
   
         top: 10,
         left: 20,
         right: 10,
         bottom: 100,


     },
     xAxis: {
   
         data: data1,
         axisTick