Echarts 3D柱形图和3D堆叠柱形图实现

这篇具有很好参考价值的文章主要介绍了Echarts 3D柱形图和3D堆叠柱形图实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

实现目标展示

Echarts 3D柱形图和3D堆叠柱形图实现,echarts,3d,前端,javascript

Echarts 3D柱形图和3D堆叠柱形图实现,echarts,3d,前端,javascript

1、双柱图实现步骤

内容分析

此处采用的双柱样式,来源于链接: 点击此处跳转。
我对其进行了样式的修改,得到了如图所示的结果。这个图本身组成部分多样,一组双柱图(蓝绿柱子),由10个部分构成,解释其中一个(蓝色),一个由3个菱形,2个直边构成。3个菱形为上、中、底部,2个直边为背景虚化的柱子,和蓝颜色柱子,绿色柱子同理。

代码实现

<script lang="ts" setup>
import  * as echarts from 'echarts';
import {onMounted} from "vue";

onMounted(() => {
  getEcharts3DBar();
});

function getEcharts3DBar() {

  var chartDom = document.getElementById('chartOne');
  var myChart = echarts.init(chartDom);
  // 计划开工项目
  var zzx1 = [20, 19, 40];
  var zx = zzx1.map((item) => {
    return 1000 - item;
  });
  // 累积开工项目
  var wgx1 = [10, 1, 90];
  var wg = wgx1.map((item) => {
    return 1000 - item;
  });

  var barWidth = 40;
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器,坐标轴触发有效
        type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
      },
      formatter: function(e) {
        // console.log(e);
        var str =
            e[6].axisValue +
            "<br>" +
            "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
            e[6].color.colorStops[0].color +
            ";'></span>" +
            "" +
            e[6].seriesName +
            " : " +
            e[6].value +
            "个<br>" +
            "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +
            e[8].color.colorStops[0].color +
            ";'></span>" +
            "" +
            e[8].seriesName +
            " : " +
            e[8].value +
            "个";
        return str;
      },
    },
    //图像与周边距离的调整
    grid: {
      left: "2%",
      right: "4%",
      bottom: "4%",
      top: "20%",
      containLabel: true,
    },
    //图例的调整
    legend: {
      data: ["计划开工项目", "累积开工项目"],
      show:true,
      textStyle: {
        color: "#00ffff",
        fontSize: 14,
      },
      itemWidth: 12,
      itemHeight: 10,
      // itemGap: 35,
      color: "#242424",
      selectedMode: true,
    },
    //x轴调整
    xAxis: {
      type: "category",
      data: [
        "高速公路",
        "国道干线",
        "农村公路",
      ],
      axisLine: {
        show: true,
        lineStyle: {
          color: "#15205B",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          fontFamily: "Microsoft YaHei",
          color: "#fff", // x轴颜色
          fontWeight: "400",
          fontSize: "14",
        },
        interval: 0, //标签设置为全部显示
        margin: 15,
        lineHeight: 15,
      },
    },
    //y轴调整
    yAxis: {
      type: "value",
      axisLine: {
        show: false,
        lineStyle: {
          color: "#15205B",
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: "rgba(135,140,147,1)", //左侧显示线
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show:false,
      },
    },
    series: [
      // 计划产值中间正方形
      {
        type: "pictorialBar",
        symbol: "diamond",//设置样式为菱形
        symbolSize: [barWidth, 8],//设置菱形的宽高
        symbolOffset: [-24, -4],//设置菱形的位置偏移量
        symbolPosition: "end",//设置菱形位置
        z: 12,
        color: "#3185FF",
        data: zzx1,
      },
      // 实际产值中间正方形
      {
        type: "pictorialBar",
        symbol: "diamond",
        symbolSize: [barWidth, 8],
        symbolOffset: [24, -4],
        symbolPosition: "end",
        z: 12,
        color: "#1BCC98",
        data: wgx1,
      },
      //  计划产值底部正方形
      {
        type: "pictorialBar",
        symbol: "diamond",
        symbolSize: [barWidth, 8],
        symbolOffset: [-24, 4],
        z: 12,
        color: "#161D6E",
        data: zzx1,
      },
      // 实际产值底部正方形
      {
        name: "",
        type: "pictorialBar",
        symbol: "diamond",
        symbolSize: [barWidth, 8],
        symbolOffset: [26, 4],
        color: "#151D6E",
        z: 12,
        data: wgx1,
      },
      // 计划产值上部正方形
      {
        data: [100, 100, 100, 100, 100],
        type: "pictorialBar",
        symbol: "diamond",
        symbolSize: [barWidth, 8],
        symbolOffset: [-24, -4],
        color: "#283190",
        symbolPosition: "end",
      },
      // 实际产值上部正方形
      {
        data: [100, 100, 100, 100, 100],
        type: "pictorialBar",

        symbol: "diamond",
        symbolSize: [barWidth, 8],
        symbolOffset: [24, -4],
        color: "#283190",
        symbolPosition: "end",
      },
      // 计划产值进度柱子
      {
        name: "计划开工项目",
        type: "bar",
        barWidth: barWidth,
        // zlevel: 2,
        stack: "1",
        itemStyle: {//这一串就是图形渐变色的来源
          normal: {
            opacity: 0.7,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: "#2863D2",
            },
              {
                offset: 1,
                color: "#161D6E",
              },
            ]),
            barBorderRadius: 0,
          },
        },
        label: {
          show: true,
          position: ["-18", "-18"],
          color: "#00f8ff",
          fontSize: 12,
        },
        data: zzx1,
      },
      // 计划产值底部柱子
      {
        data: zx,
        type: "bar",

        barWidth: barWidth,
        stack: "1",

        zlevel: -1,
        itemStyle: {
          normal: { 
            opacity: 0.7,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: "#182075",
            },
              {
                offset: 1,
                color: "#182075",
              },
            ]),
            barBorderRadius: 0,
          },
        },
      },
      // 实际产值进度柱子
      {
        name: "累积开工项目",
        type: "bar",
        stack: "2",
        barWidth: barWidth,
        itemStyle: {
          normal: {
            opacity: 0.7,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: "#19958B",
            },
              {
                offset: 1,
                color: "#151B6F",
              },
            ]),
            barBorderRadius: 0,
          },
        },
        label: {
          show: true,
          position: ["18", "-18"],
          color: "#00f8ff",
          fontSize: 12,
        },
        data: wgx1,
      },
      // 实际产值底部柱子
      {
        data: wg,
        type: "bar",
        barWidth: barWidth,
        stack: "2",

        zlevel: -1,
        itemStyle: {
          normal: {
            opacity: 0.7,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: "#182075",
            },
              {
                offset: 1,
                color: "#182075",
              },
            ]),
            barBorderRadius: 0,
          },
        },
      },
    ],
  };
  option && myChart.setOption(option);
}

</script>

2、堆叠图实现步骤

内容分析

实现一个这样的3D图,其实,是利用了5个部分进行拼接而成。3个底部的菱形,2个直边。其中,直边的图形利用两种颜色,深浅不一进行渲染,出现了类似于直边的效果。菱形也不是纯色的,而是采用了分段的染色,这些部分都会在接下来的代码之中标明。

代码实现

<script lang="ts" setup>
import  * as echarts from 'echarts';
import {onMounted} from "vue";

onMounted(() => {
  create();
});

function create(){
  var chartDom = document.getElementById('chart');
  var myChart = echarts.init(chartDom);
  var xData = ["国道", "省道", "县道", "乡道", "村道"];
// 计划数据数组
  var planData = [328, 1488, 360, 22, 922];
// 完成数据数组
  var completeData = [320, 132, 101, 0, 90];

  var color = [
    {
      type: "linear",
      x: 0,
      x2: 1,
      y: 0,
      y2: 0,
      //给菱形上色
      colorStops: [
        {
          offset: 0,
          color: "#54a2d3",
        },
        {
          offset: 0.5,
          color: "#54a2d3",
        },
        {
          offset: 0.5,
          color: "#7ed1e3",
        },
        {
          offset: 1,
          color: "#7ed1e3",
        },
      ],
    },
    {
      type: "linear",
      x: 0,
      x2: 1,
      y: 0,
      y2: 0,
      //给菱形上色
      colorStops: [
        {
          offset: 0,
          color: "#a3a418",
        },
        {
          offset: 0.5,
          color: "#a3a418",
        },
        {
          offset: 0.5,
          color: "#cdbf38",
        },
        {
          offset: 1,
          color: "#cdbf38",
        },
      ],
    },
  ];
  var barWidth = 30;
  var constData = [];
  var showData = [];
  var otherData = [];
  
//计算堆叠数据为多少
  for (var i = 0; i < planData.length; i++) {
    planData[i] = Number(planData[i]);
    completeData[i] = Number(completeData[i]);
    otherData[i] = planData[i] - completeData[i];
    if (planData[i] <= 0) {
      constData.push(0);
      showData.push({
        value: 1,
        itemStyle: {
          normal: {
            borderColor: "rgba(0,0,0,0)",
            borderWidth: 2,
            color: "rgba(0,0,0,0)",
          },
        },
      });
    } else {
      if (completeData[i] == planData[i]) {
        constData.push({
          value: 1,
          itemStyle: {
            normal: {
              color: color[1],
            },
          },
        });
      } else {
        constData.push(1);
      }
      if (completeData[i] > 0) {
        showData.push({
          value: planData[i],
          itemStyle: {
            normal: {
              borderColor: "#e9d86c",
              borderWidth: 2,
              color: "#e9d86c",
            },
          },
        });
      } else {
        showData.push({
          value: planData[i],
          itemStyle: {
            normal: {
              borderColor: "#89e3ec",
              borderWidth: 2,
              color: "#89e3ec",
            },
          },
        });
      }
    }
  }

  var option = {
  //调整光标移入,展示数据的样式
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        return params[0].axisValue + ":" +
            "<br/>计划:" + planData[params[0].dataIndex] +
            "<br/>完成:" + completeData[params[0].dataIndex];
      },
    },
    //调整图例
    legend: {
      data: ["计划", "完成"],
      show:false
    },
    //调整图表距边框的距离
    grid: {
      left: "3%", 
      right: "3%",
      top: "15%",
      bottom: "5%",
      containLabel: true,
    },
    // 调整图像x轴
    xAxis: {
      data: xData,
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          fontFamily: "Microsoft YaHei",
          color: "#fff", 
          fontWeight: "400",
          fontSize: "14",
        },
      },
    },
    //调整图像y轴
    yAxis: {
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show:true,
        lineStyle: {
          color: '#FFFFFF',
          width: 1,
          opacity: 0.11,
        }
      }
    },
    //图像的关键显示部分,此处5个拼接一个堆叠柱子,注意此处的调整
    series: [
      {
        z: 1,
        name: "计划",
        type: "bar",
        stack:'1',
        barWidth: barWidth,
        // stack: "总量",
        color: color[0],
        data: otherData,
      },
      {
        z: 2,
        name: "完成",
        type: "bar",
        stack:'1',
        barWidth: barWidth,
        // stack: "总量",
        color: color[1],
        data: completeData,
      },
      //柱形底部
      {
        z: 3,
        name: "项目",
        type: "pictorialBar",
        data: constData,
        symbol: "diamond",
        symbolOffset: ["0%", "50%"],
        symbolSize: [barWidth, 10],
        itemStyle: {
          normal: {
            color: color[0],
          },
        },

        tooltip: {
          show: false,
        },
      },
      //某个柱形的底部
      {
        z: 4,
        name: "项目",
        type: "pictorialBar",
        data: otherData,
        symbol: "diamond",
        symbolPosition: "end",
        symbolOffset: ["0%", "-50%"],
        symbolSize: [barWidth, 10],
        itemStyle: {
          normal: {
            color: color[1],
          },
        },
        tooltip: {
          show: false,
        },
      },
      {
        z: 5,
        name: "项目",
        type: "pictorialBar",
        symbolPosition: "end",
        data: showData,
        symbol: "diamond",
        symbolOffset: ["0%", "-50%"],
        symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
        tooltip: {
          show: false,
        },
        itemStyle:{
          normal: {
            label: {
              formatter: "{c}",
              show: true,
              position: "top",
              textStyle: {
                fontWeight: 400,
                fontSize: "13",
                color: "#F2F7FA",
                lineHeight:20,
              },
            },
          }
        }
      },

    ],
  };
  option && myChart.setOption(option);
}

</script>

最后吐槽,我原本想实现的柱形图,是上方为平行四边形的类型的柱形图,但发现,Echarts自带的图形中,没有平行四边形,得自己画或者去官方那里放入图片进行代码的生成导出,于是放弃,使用这种网上查找的大多数人使用的菱形进行操作。

内容错误之处欢迎指正,共同进步!

如果内容有帮助,请点赞吱个声呗~文章来源地址https://www.toymoban.com/news/detail-700139.html

到了这里,关于Echarts 3D柱形图和3D堆叠柱形图实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • python可视化——3D柱形图

       

    2024年02月06日
    浏览(54)
  • 【Python】如何使用matlibplot绘制3D柱形图

    (1)构造需要显示的数据 如下图所示,X坐标取值为[0,1,2,3,4],Y坐标取值为[0,1,2,3,4,5,6,7,8],每一个(X,Y)组合的值Z=X+Y,所需要绘制的图就是在X,Y所对应的坐标位置上面根据Z的值来绘制柱形图。 (2)坐标设置 将坐标网格化, X=[0,1,2,3,4],Y=[0,1,2,3,4,5,6,7,8]网格化的结果,如下图

    2024年02月16日
    浏览(36)
  • 【Python】Python中使用Matplotlib绘制折线图、散点图、饼形图、柱形图和箱线图

    python数据可视化课程,实验二 Matplotlib 中文API:API 概览 | Matplotlib 一、实验任务的数据背景 提供的源数据(数据文件employee.csv)共拥有4个特征,分别为就业人员、第一产业就业人员、第二产业就业人员、第三产业就业人员。根据3个产业就业人员的数量绘制散点图和折线图。

    2023年04月15日
    浏览(94)
  • echarts实现3D地球模式--3D线

    前言:基于echarts实现3D地球自动旋转展示及不同坐标点相互连线 这里主体基于echarts,需引入依赖资源 echarts.min.js,echarts-gl.min.js 效果如下: 代码如下: 依赖资源 HTML CSS JS 贴图奉上 echarts官方文档地址:https://echarts.apache.org/zh/index.html 简单记录如有问题或更优解还请不要吝啬

    2024年02月04日
    浏览(49)
  • vue使用echarts与echarts-gl实现3d地图与 3d柱状图

    目录 前言 一、下载echarts与echarts gl 二、vue引入与页面使用 1.引入 2.页面引入echarts-gl 三、下载地图数据 四、使用地图 1、html初始化地图放入位置: 2、data创建变量 3、创建地图 4、钩子函数渲染地图 5、渲染完成效果 总结 提示:本项目使用vue,请提前搭建好vue项目 本次需求

    2024年02月12日
    浏览(41)
  • echarts实现3D柱状图(视觉层面)和3D饼图

    原理: 立体图形从一个方向只能看到三个面,于是我们通过echarts图表实现 顶部,明面,和暗面。 效果图如下: 需要四份数据, 两个柱子的数据+X轴数据+颜色数据, 通过 setData 和 setColor 生成需要的数据,横向柱状图同理,参照代码中注释。 以下是完整案例代码: 3D饼图没

    2024年02月16日
    浏览(38)
  • echarts 实现 3d 柱状图

    实现要求 能够调整大小 实现3d效果,可以改变颜色 前置环境 效果 调整大小和颜色 代码 baseCharts.vue 使用 10.12 更新 效果 代码 使用

    2024年02月11日
    浏览(46)
  • 用echarts实现3d饼图

    安装echarts和echarts-gl npm install echarts npm install echarts-gl echarts版本5.x的话需要对应echarts-gl版本2.x echarts版本4.x的话需要对应echarts-gl版本1.x 指定版本命令 npm install echarts-gl@1.1.2 1.关键函数,生成扇形的曲面参数方程,用于 series-surface Documentation - Apache ECharts官网series-surface介绍 

    2024年02月16日
    浏览(28)
  • echarts实现3D饼图

    echarts是一款强大的数据可视化工具,它可以帮助我们快速、简单地创建各种图表。 要在echarts中实现3D饼图,需要使用echarts的 series 系列中的 pie3D 组件。 下面是一个简单的例子,展示如何使用echarts创建3D饼图: 上面的代码中,我们使用了 pie3D 组件,并设置了半径范围为 [\\\'

    2024年02月16日
    浏览(43)
  • echarts 实现3D饼图

    2023.6.30今天我学习了如何使用echarts渲染一个3d的饼图,效果如下: 相关代码如下:

    2024年02月17日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包