数据可视化 立体柱状图 柱状图

立体柱状图

1、首先通过标签方式直接引入构建好的 echarts 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

2、然后准备一个具备高宽的 DOM 容器。

<body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
     <div id="main" style="width: 600px;height:400px;"></div>
</body>

3、通过 echarts.init 方法初始化 echarts 实例并通过 setOption 方法生成立体壮壮图,下面是完整代码。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./echarts.min.js"></script>
</head>

<body>
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    console.log(myChart)
    //图形路径
    const symbols = [
      "path://M66.1,35.7L100,49.8v128.7l-33.9-12.7L66.1,35.7z", //左边
      "path://M133.9,35.7L100,49.8v128.7l33.9-12.7V35.7z", //右边
      "path://M66.1,35.7L100,21.5l33.9,14.1L100,49.8L66.1,35.7z", //菱形
    ]
    //源数据
    const data = [{
   
      label: "治安",
      value: 600
    }, {
   
      label: "交通",
      value: 400
    
  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
ECharts 是一个基于 JavaScript 的开源可视化库,它可以用于制作各种类型的图表,包括立体柱形图。立体柱形图是一种三维图表,它可以展示数据在三个方向上的变化情况,通过不同的高度来表示数据的大小。 在 ECharts 中制作立体柱形图,需要使用柱形图和三维坐标系两个组件。柱形图组件用于绘制柱形,而三维坐标系组件则负责展示立体效果。 下面是一个简单的立体柱形图的配置示例: ``` option = { tooltip: {}, visualMap: { max: 20, inRange: { color: ['#50a3ba', '#eac736', '#d94e5d'] } }, xAxis3D: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, yAxis3D: { type: 'value' }, zAxis3D: { type: 'category', data: ['2019', '2020', '2021'] }, grid3D: { boxWidth: 200, boxDepth: 80, viewControl: { distance: 300 }, light: { main: { intensity: 1.2, shadow: true }, ambient: { intensity: 0.3 } } }, series: [{ type: 'bar3D', data: [ ['A', 0, '2019', 10], ['B', 1, '2019', 15], ['C', 2, '2019', 13], ['D', 3, '2019', 17], ['E', 4, '2019', 12], ['A', 0, '2020', 7], ['B', 1, '2020', 9], ['C', 2, '2020', 11], ['D', 3, '2020', 15], ['E', 4, '2020', 8], ['A', 0, '2021', 12], ['B', 1, '2021', 8], ['C', 2, '2021', 14], ['D', 3, '2021', 10], ['E', 4, '2021', 15] ], shading: 'lambert', label: { textStyle: { fontSize: 16, borderWidth: 1 } }, itemStyle: { opacity: 0.8 } }] }; ``` 以上代码中,我们定义了一个三维坐标系和一个柱形图。柱形图的数据包括横轴、纵轴和高度,通过 series.type 属性指定为 bar3D 类型。grid3D 中定义了一些参数用于控制立体效果的显示,包括箱子的宽度和深度,视角距离和光照等。在页面中引入 echarts.min.js 文件后,可以通过调用 echarts.init() 方法和 setOption() 方法将配置应用到图表中。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值