[echarts]vue2项目中折柱图-柱形图伪3d效果实现

不知道是不是现在的版本更新了,echarts-gl在vue2项目中不能适配使用,难蹦

0417-- 今日偶然发现用命令直接安装5.5.0版本的echarts就可以和gl兼容,改日空了可以试试3d柱状以及折线图

一.需求分析与设计思路

项目当中遇到改版升级,想要实现如下的一下折柱图的立体效果

想在原来平面柱状图的基础上,有立体的效果.本来打算用echarts-gl库来实现3d版的柱形图,但是引入和配置后,浏览器总是报不能识别的错误,为了尽快实现类似效果,就换做左右色差来做效果.

二.环境准备与依赖引入

主要组件库还是基于echarts 库,没有安装的直接在终端输入以下代码安装

npm i echarts

然后在你封装或者使用图表的地方引入使用即可

import * as echarts from 'echarts';

三.构建伪3d柱形图

1.首先按照惯例创建图表元素

<!-- 折线图 -->
<template>
  <div id="bar3d" style="width: 100%; height: 110%; padding-top: 20px; padding-left: 10px"></div>
</template>

当然,行内调整样式根据自己的情况

2.引入echarts,配置该组件需要接收的参数,我个人项目中的情况如下

import echartMixins from './echartMixins';
import * as echarts from 'echarts';
import echartMixins from './echartMixins';
//引入的混入中,主要封装了父组件需要往子组件中传递的x轴信息,y轴最大值信息,以及不同柱形以及折线的y轴信息
//依次为xAxisData,values,maxX



//声明下面变量来控制图表是否已经初始化
  data() {
    return {
      hasInitChart: false,
    };
  },

3.具体思路及代码实时

第一版的时候,我是想采用拼接的方法来达到立体的效果,具体就是在配置每个y轴柱形的数据时,将每个柱形分为3部分组成, 上部-中部-下部,设置头部/底部为椭圆效果,中部为左右色差效果,具体效果和代码如下图

  methods: {
    init() {
      //绿色
      const data = [1700, 800, 1700, 600, 800, 1700];
      //蓝色
      const data2 = [2600, 1400, 3350, 1400, 1400, 3350];
      const sideData = data.map((item) => item + 90);
      const sideData2 = data.map((item) => item + 90);
      var serveTBar = echarts.init(document.getElementById('bar3d'));
      serveTBar.setOption(getEcharts3DBar());

      function getEcharts3DBar() {
        //蓝色
        var colorArr2 = ['rgba(11, 83, 128)', 'rgba(2, 143, 224)'];
        //绿色
        var colorArr = ['rgb(12, 109, 122)', 'rgba(1, 241, 228)'];
        //绿色
        var color = {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: colorArr[0],
            },
            {
              offset: 0.5,
              color: colorArr[0],
            },
            {
              offset: 0.5,
              color: colorArr[1],
            },
            {
              offset: 1,
              color: colorArr[1],
            },
          ],
        };
        var color2 = {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: colorArr2[0],
            },
            {
              offset: 0.5,
              color: colorArr2[0],
            },
            {
              offset: 0.5,
              color: colorArr2[1],
            },
            {
              offset: 1,
              color: colorArr2[1],
            },
          ],
        };
        var barWidth = 15;
        var option = {