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

NPC-

于 2022-12-30 15:22:11 发布

阅读量920

点赞数 1

文章标签： echarts vue.js 3d

本文链接：https://blog.youkuaiyun.com/weixin_47336389/article/details/128496196

版权

本文介绍了在Vue项目中利用ECharts创建3D双色柱状图的方法，包括展示效果图、引入ECharts库、设置图表布局以及提供具体实现代码。文章最后提出疑问，询问如何实现从上到下的颜色渐变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

在这里插入图片描述

引入：

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

最低0.47元/天解锁文章