vue中使用echarts实现3d双色柱状图

最新推荐文章于 2024-05-12 17:24:39 发布

NPC-

最新推荐文章于 2024-05-12 17:24:39 发布

阅读量752

点赞数 1

文章标签： echarts vue.js 3d

本文链接：https://blog.csdn.net/weixin_47336389/article/details/128496196

版权

效果图：

在这里插入图片描述

引入：

import * as echarts from 'echarts'

布局：

 <div id="bar3d" style="height: 260px;width:580px;margin: 0 auto;"></div>

具体实现代码：

 mounted() {
   
      this.initChart()
    },

 methods:{
   
	    initChart() {
   
        //绿色
        const data = [1700,800, 1700, 600,800,1700,800,1700,1700,800,1700,800];
        //蓝色
        const data2 = [2600,1400, 3350, 1400, 1400, 3350, 1400, 3350, 2600,1400,3350,1400];
        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)", "rgba(11, 83, 128)"];
       //绿色
       var colorArr = ["rgb(12, 109, 122)", "rgba(1, 241, 228)", "rgb(12, 109, 122)"];
       //绿色
			 var color = {
   
				 type: "linear",
				 x: 0,
				 x2: 1,
				 y: 0,
				 y2: 0,
				 colorStops:  [
					 {
   
						 offset: 0,
						 color: color