devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

[echarts]vue2项目中折柱图-柱形图伪3d效果实现_vue2中用echarts画一个折柱图

作者：你好赵伟 | 2024-07-27 17:07:11

赞

踩

vue2中用echarts画一个折柱图

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

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

一.需求分析与设计思路

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

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

二.环境准备与依赖引入

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

npm i echarts

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

import * as echarts from 'echarts';

三.构建伪3d柱形图

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

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

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

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

  1. import echartMixins from './echartMixins';
  2. import * as echarts from 'echarts';
  3. import echartMixins from './echartMixins';
  4. //引入的混入中,主要封装了父组件需要往子组件中传递的x轴信息,y轴最大值信息,以及不同柱形以及折线的y轴信息
  5. //依次为xAxisData,values,maxX
  6.  
  7.  
  8.  
  9. //声明下面变量来控制图表是否已经初始化
  10.   data() {
  11.     return {
  12.       hasInitChart: false,
  13.     };
  14.   },

3.具体思路及代码实时

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

  1.   methods: {
  2.     init() {
  3.       //绿色
  4.       const data = [1700, 800, 1700, 600, 800, 1700];
  5.       //蓝色
  6.       const data2 = [2600, 1400, 3350, 1400, 1400, 3350];
  7.       const sideData = data.map((item) => item + 90);
  8.       const sideData2 = data.map((item) => item + 90);
  9.       var serveTBar = echarts.init(document.getElementById('bar3d'));
  10.       serveTBar.setOption(getEcharts3DBar());
  11.  
  12.       function getEcharts3DBar() {
  13.         //蓝色
  14.         var colorArr2 = ['rgba(11, 83, 128)', 'rgba(2, 143, 224)'];
  15.         //绿色
  16.         var colorArr = ['rgb(12, 109, 122)', 'rgba(1, 241, 228)'];
  17.         //绿色
  18.         var color = {
  19.           type: 'linear',
  20.           x: 0,
  21.           x2: 1,
  22.           y: 0,
  23.           y2: 0,
  24.           colorStops: [
  25.             {
  26.               offset: 0,
  27.               color: colorArr[0],
  28.             },
  29.             {
  30.               offset: 0.5,
  31.               color: colorArr[0],
  32.             },
  33.             {
  34.               offset: 0.5,
  35.               color: colorArr[1],
  36.             },
  37.             {
  38.               offset: 1,
  39.               color: colorArr[1],
  40.             },
  41.           ],
  42.         };
  43.         var color2 = {
  44.           type: 'linear',
  45.           x: 0,
  46.           x2: 1,
  47.           y: 0,
  48.           y2: 0,
  49.           colorStops: [
  50.             {
  51.               offset: 0,
  52.               color: colorArr2[0],
  53.             },
  54.             {
  55.               offset: 0.5,
  56.               color: colorArr2[0],
  57.             },
  58.             {
  59.               offset: 0.5,
  60.               color: colorArr2[1],
  61.             },
  62.             {
  63.               offset: 1,
  64.               color: colorArr2[1],
  65.             },
  66.           ],
  67.         };
  68.         var barWidth = 15;
  69.         var option = {
  70.           tooltip: {
  71.             trigger: 'axis',
  72.             formatter: function (params) {
  73.               var str = params[0].name + ':';
  74.               params.filter(function (item) {
  75.                 if (item.componentSubType == 'bar') {
  76.                   str += '<br/>' + item.seriesName + '：' + item.value;
  77.                 }
  78.               });
  79.               return str;
  80.             },
  81.           },
  82.           //图表大小位置限制
  83.           grid: {
  84.             x: '10%',
  85.             x2: '5%',
  86.             y: '15%',
  87.             y2: '15%',
  88.           },
  89.           xAxis: {
  90.             data: ['1月', '2月', '3月', '4月', '5月', '6月'],
  91.             //坐标轴
  92.             axisLine: {
  93.               show: true,
  94.               lineStyle: {
  95.                 width: 1,
  96.                 color: '#214776',
  97.               },
  98.               textStyle: {
  99.                 color: '#fff',
  100.                 fontSize: '10',
  101.               },
  102.             },
  103.             type: 'category',
  104.             axisLabel: {
  105.               textStyle: {
  106.                 color: '#C5DFFB',
  107.                 fontWeight: 500,
  108.                 fontSize: '14',
  109.               },
  110.             },
  111.             axisTick: {
  112.               textStyle: {
  113.                 color: '#fff',
  114.                 fontSize: '16',
  115.               },
  116.               show: false,
  117.             },
  118.             axisLine: {
  119.               show: true,
  120.               lineStyle: {
  121.                 type: 'dashed', //线的类型 虚线
  122.                 color: '#DEDEDE',
  123.               },
  124.             },
  125.           },
  126.           yAxis: {
  127.             name: '自定义显示',
  128.             nameTextStyle: {
  129.               color: '#DEDEDE',
  130.               fontSize: 12,
  131.               padding: 10,
  132.             },
  133.             min: 0, //最小
  134.             max: 3500, //最大
  135.             interval: 500, //相差
  136.             type: 'value',
  137.             splitLine: {
  138.               show: true,
  139.               lineStyle: {
  140.                 type: 'dashed', //线的类型 虚线0
  141.                 opacity: 0.2, //透明度
  142.               },
  143.             },
  144.             axisTick: {
  145.               show: false,
  146.             },
  147.             axisLine: {
  148.               show: false,
  149.             },
  150.             //坐标值标注
  151.             axisLabel: {
  152.               show: true,
  153.               textStyle: {
  154.                 color: '#C5DFFB',
  155.               },
  156.             },
  157.           },
  158.           series: [
  159.             //中
  160.             {
  161.               z: 1,
  162.               name: '绿色',
  163.               type: 'bar',
  164.               barWidth: barWidth,
  165.               barGap: '0%',
  166.               data: data,
  167.               itemStyle: {
  168.                 normal: {
  169.                   color: color,
  170.                   //柱形图上方标题
  171.                   label: {
  172.                     show: true,
  173.                     position: 'top',
  174.                     textStyle: {
  175.                       color: 'rgb(1, 255, 250)',
  176.                       fontSize: 8,
  177.                     },
  178.                   },
  179.                 },
  180.               },
  181.             },
  182.             //下
  183.             {
  184.               z: 2,
  185.               name: '绿色',
  186.               type: 'pictorialBar',
  187.               data: sideData,
  188.               symbol: 'roundRect',
  189.               symbolOffset: ['-75%', '50%'],
  190.               symbolSize: [barWidth, 10],
  191.               itemStyle: {
  192.                 normal: {
  193.                   color: color,
  194.                 },
  195.               },
  196.               tooltip: {
  197.                 show: false,
  198.               },
  199.             },
  200.             //上
  201.             {
  202.               z: 3,
  203.               name: '绿色',
  204.               type: 'pictorialBar',
  205.               symbolPosition: 'end',
  206.               data: data,
  207.               symbol: 'roundRect',
  208.               symbolOffset: ['-75%', '-50%'],
  209.               symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
  210.               itemStyle: {
  211.                 normal: {
  212.                   borderWidth: 2,
  213.                   color: colorArr[2],
  214.                 },
  215.               },
  216.               tooltip: {
  217.                 show: false,
  218.               },
  219.             },
  220.             {
  221.               z: 1,
  222.               name: '蓝色',
  223.               type: 'bar',
  224.               barWidth: barWidth,
  225.               barGap: '50%',
  226.               data: data2,
  227.               itemStyle: {
  228.                 normal: {
  229.                   color: color2,
  230.                   //柱形图上方标题
  231.                   label: {
  232.                     show: true,
  233.                     position: 'top',
  234.                     textStyle: {
  235.                       color: 'rgb(2, 157, 246)',
  236.                       fontSize: 8,
  237.                     },
  238.                   },
  239.                 },
  240.               },
  241.             },
  242.             {
  243.               z: 2,
  244.               name: '蓝色',
  245.               type: 'pictorialBar',
  246.               data: sideData2,
  247.               symbol: 'roundRect',
  248.               symbolOffset: ['75%', '50%'],
  249.               symbolSize: [barWidth, 10],
  250.               itemStyle: {
  251.                 normal: {
  252.                   color: color2,
  253.                 },
  254.               },
  255.               tooltip: {
  256.                 show: false,
  257.               },
  258.             },
  259.             {
  260.               z: 3,
  261.               name: '蓝色',
  262.               type: 'pictorialBar',
  263.               symbolPosition: 'end',
  264.               data: data2,
  265.               symbol: 'roundRect',
  266.               symbolOffset: ['75%', '-50%'],
  267.               symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
  268.               itemStyle: {
  269.                 normal: {
  270.                   borderWidth: 2,
  271.                   color: colorArr2[2],
  272.                 },
  273.               },
  274.               tooltip: {
  275.                 show: false,
  276.               },
  277.             },
  278.           ],
  279.         };
  280.         return option;
  281.       }
  282.     },
  283.   },

但是这样设置静态柱形图,微调下看着或许是没有什么影响,但是当你多个柱形的时候,点击上方的legend标签来控制柱形的显示与隐藏时,每个柱形原本的上部和下部就会偏移,不能很好的控制上和下部的相对定位,于是边保留了部分代码,换做下面的一种类似效果

第二版效果如下

去除上部和下部的组合,只保留了色差的效果,代码如下

  1.     initChart(xAxisData, values, maxX) {
  2.       var serveTBar = echarts.init(document.getElementById('bar3d'));
  3.       serveTBar.setOption(getEcharts3DBar());
  4.  
  5.       function getEcharts3DBar() {
  6.         //提醒数
  7.         var colorArr2 = ['rgba(232, 137, 187,1)', 'rgba(232, 137, 187,0.7)'];
  8.         //预加载
  9.         var colorArr = ['rgba(249, 218, 142,1)', 'rgba(240, 234, 142,0.7)'];
  10.         //互认数
  11.         var colorArr3 = ['rgba(89, 172, 176,1)', 'rgba(89, 172, 176,0.7)'];
  12.         //引用数
  13.         var colorArr4 = ['rgba(104, 221, 250,1)', 'rgba(104, 221, 250,0.7)'];
  14.         //颜色设置
  15.         var color = {
  16.           type: 'linear',
  17.           x: 0,
  18.           x2: 1,
  19.           y: 0,
  20.           y2: 0,
  21.           colorStops: [
  22.             {
  23.               offset: 0,
  24.               color: colorArr[1], // 不透明
  25.             },
  26.             {
  27.               offset: 0.5,
  28.               color: colorArr[1], // 不透明
  29.             },
  30.             {
  31.               offset: 0.5,
  32.               color: colorArr[0], // 更透明
  33.             },
  34.             {
  35.               offset: 1,
  36.               color: colorArr[0], // 更透明
  37.             },
  38.           ],
  39.         };
  40.         var color2 = {
  41.           type: 'linear',
  42.           x: 0,
  43.           x2: 1,
  44.           y: 0,
  45.           y2: 0,
  46.           colorStops: [
  47.             {
  48.               offset: 0,
  49.               color: colorArr2[1],
  50.             },
  51.             {
  52.               offset: 0.5,
  53.               color: colorArr2[1],
  54.             },
  55.             {
  56.               offset: 0.5,
  57.               color: colorArr2[0],
  58.             },
  59.             {
  60.               offset: 1,
  61.               color: colorArr2[0],
  62.             },
  63.           ],
  64.         };
  65.         var color3 = {
  66.           type: 'linear',
  67.           x: 0,
  68.           x2: 1,
  69.           y: 0,
  70.           y2: 0,
  71.           colorStops: [
  72.             {
  73.               offset: 0,
  74.               color: colorArr3[1],
  75.             },
  76.             {
  77.               offset: 0.5,
  78.               color: colorArr3[1],
  79.             },
  80.             {
  81.               offset: 0.5,
  82.               color: colorArr3[0],
  83.             },
  84.             {
  85.               offset: 1,
  86.               color: colorArr3[0],
  87.             },
  88.           ],
  89.         };
  90.         var color4 = {
  91.           type: 'linear',
  92.           x: 0,
  93.           x2: 1,
  94.           y: 0,
  95.           y2: 0,
  96.           colorStops: [
  97.             {
  98.               offset: 0,
  99.               color: colorArr4[1],
  100.             },
  101.             {
  102.               offset: 0.5,
  103.               color: colorArr4[1],
  104.             },
  105.             {
  106.               offset: 0.5,
  107.               color: colorArr4[0],
  108.             },
  109.             {
  110.               offset: 1,
  111.               color: colorArr4[0],
  112.             },
  113.           ],
  114.         };
  115.         //柱子宽度
  116.         var barWidth = 10;
  117.         var option = {
  118.           tooltip: {
  119.             trigger: 'axis',
  120.             axisPointer: {
  121.               type: 'cross',
  122.               crossStyle: {
  123.                 color: '#999',
  124.               },
  125.             },
  126.             backgroundColor: 'rgba(16, 29, 66,0.8)',
  127.             textStyle: {
  128.               color: '#fff',
  129.             },
  130.             borderColor: '#63acf3',
  131.           },
  132.           grid: {
  133.             x: '10%',
  134.             x2: '15%',
  135.             y: '20%',
  136.             y2: '25%',
  137.           },
  138.           legend: {
  139.             data: ['预加载', '提醒数', '互认数', '引用数', '互认率'],
  140.             textStyle: {
  141.               color: '#fff',
  142.             },
  143.             itemWidth: 6,
  144.             itemHeight: 3,
  145.           },
  146.           xAxis: {
  147.             data: xAxisData,
  148.             type: 'category',
  149.             axisPointer: {
  150.               type: 'shadow',
  151.             },
  152.             //字体颜色
  153.             axisLabel: {
  154.               textStyle: {
  155.                 color: '#fff',
  156.               },
  157.             },
  158.             axisLabel: {
  159.               interval: 0,
  160.               textStyle: {
  161.                 color: 'fff',
  162.                 fontWeight: 500,
  163.                 fontSize: '12',
  164.               },
  165.             },
  166.           },
  167.           yAxis: [
  168.             {
  169.               type: 'value',
  170.               name: '次',
  171.               nameTextStyle: {
  172.                 color: '#fff', // 白色
  173.               },
  174.               min: 0,
  175.               max: maxX,
  176.               interval: maxX / 5,
  177.               axisLabel: {
  178.                 formatter: function (value) {
  179.                   return value / 10000 + '万';
  180.                 },
  181.                 textStyle: {
  182.                   color: '#fff', // 白色
  183.                 },
  184.               },
  185.             },
  186.             {
  187.               type: 'value',
  188.               name: '',
  189.               nameTextStyle: {
  190.                 color: '#fff', // 白色
  191.               },
  192.               min: 0,
  193.               max: 100,
  194.               interval: 20,
  195.               axisLabel: {
  196.                 formatter: '{value} %',
  197.                 textStyle: {
  198.                   color: '#fff', // 白色
  199.                 },
  200.               },
  201.             },
  202.           ],
  203.           series: [
  204.             {
  205.               name: '预加载',
  206.               type: 'bar',
  207.               barWidth: barWidth,
  208.               barGap: '15%',
  209.               data: values[3],
  210.               symbol: 'roundRect',
  211.               itemStyle: {
  212.                 normal: {
  213.                   color: color,
  214.                 },
  215.               },
  216.               tooltip: {
  217.                 valueFormatter: function (value) {
  218.                   return value + ' 次';
  219.                 },
  220.               },
  221.             },
  222.             {
  223.               name: '提醒数',
  224.               type: 'bar',
  225.               barWidth: barWidth,
  226.               barGap: '15%',
  227.               data: values[1],
  228.               symbol: 'roundRect',
  229.               itemStyle: {
  230.                 normal: {
  231.                   color: color2,
  232.                 },
  233.               },
  234.               tooltip: {
  235.                 valueFormatter: function (value) {
  236.                   return value + ' 次';
  237.                 },
  238.               },
  239.             },
  240.             {
  241.               name: '互认数',
  242.               type: 'bar',
  243.               barWidth: barWidth,
  244.               barGap: '15%',
  245.               data: values[0],
  246.               symbol: 'roundRect',
  247.               itemStyle: {
  248.                 normal: {
  249.                   color: color3,
  250.                 },
  251.               },
  252.               tooltip: {
  253.                 valueFormatter: function (value) {
  254.                   return value + ' 次';
  255.                 },
  256.               },
  257.             },
  258.             {
  259.               name: '引用数',
  260.               type: 'bar',
  261.               barWidth: barWidth,
  262.               barGap: '15%',
  263.               data: values[2],
  264.               symbol: 'roundRect',
  265.               itemStyle: {
  266.                 normal: {
  267.                   color: color4,
  268.                 },
  269.               },
  270.               tooltip: {
  271.                 valueFormatter: function (value) {
  272.                   return value + ' 次';
  273.                 },
  274.               },
  275.             },
  276.             {
  277.               name: '互认率',
  278.               type: 'line',
  279.               yAxisIndex: 1,
  280.               data: values[4],
  281.               color: 'rgba(241, 161, 105,0.9)',
  282.               tooltip: {
  283.                 valueFormatter: function (value) {
  284.                   return value + ' %';
  285.                 },
  286.               },
  287.             },
  288.           ],
  289.         };
  290.         return option;
  291.       }
  292.     },

四、最终小结

比较匆忙哈,相信肯定还有好的方法,有好的方法的大佬欢迎指点迷津.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/891041
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号