使用Echarts结合Canvas实现立体双柱一折线图表

已于 2024-05-11 20:09:45 修改
阅读量572 收藏 8
点赞数 11
分类专栏： 前端 文章标签： echarts 前端 javascript canva可画
于 2024-01-24 11:14:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jnsone/article/details/135482709
版权

一. 前言

项目中遇到了要用图表展示业务数据的需求，于是引入了echarts———— 一个基于 JavaScript 的开源可视化图表库，echarts最初由百度开发，后交由阿帕奇基金会孵化。
echarts已经在全球范围内得到了广泛的应用。它能够运行在PC和移动设备上，并且兼容当前的主流浏览器。通过ECharts，开发者可以轻松地创建出各种类型的图表，包括折线图、柱状图、饼图、散点图等，从而帮助用户更好地理解和分析数据。本文给大家
分享一下echarts的基本使用方法。
先看效果图：
在这里插入图片描述

二. 使用方法

在我们的页面中引入echarts，准备一个盒子，注意盒子要设置宽度与高度

</template>
	<div class='chart-container' ref='myChart'></div>
</template>

<script>
import * as echarts from 'echarts/core';
export default {

  mounted() {
    this.registerShape();
    this.initChart();
  },
}
</script>

<style scoped>
.chart-container{
	width: 100%;
    height: 100%;
}
</style>

我们这里先准备好柱子，使用Canvas实现柱形

		registerShape() {
            const offsetX = 11;   //这里可调整柱子的宽度
            const offsetY = 8;
            // 绘制左侧面
            const CubeLeft = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function(ctx, shape) {
                    const xAxisPoint = shape.xAxisPoint;
                    const c0 = [shape.x, shape.y];
                    const c1 = [shape.x - offsetX, shape.y - offsetY];
                    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
                    const c3 = [xAxisPoint[0], xAxisPoint[1]];
                    ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
                },
            });
            // 绘制右侧面
            const CubeRight = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function(ctx, shape) {
                    const xAxisPoint = shape.xAxisPoint;
                    const c1 = [shape.x, shape.y];
                    const c2 = [xAxisPoint[0], xAxisPoint[1]];
                    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
                    const c4 = [shape.x + offsetX, shape.y - offsetY];
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
                },
            });
            // 绘制顶面
            const CubeTop = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function(ctx, shape) {
                    const c1 = [shape.x, shape.y];
                    const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
                    const c3 = [shape.x, shape.y - offsetX];
                    const c4 = [shape.x - offsetX, shape.y - offsetY];
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
                },
            });
            // 注册三个面图形
            echarts.graphic.registerShape('CubeLeft', CubeLeft);
            echarts.graphic.registerShape('CubeRight', CubeRight);
            echarts.graphic.registerShape('CubeTop', CubeTop);
        },

初始化echarts实例，我里我以Vue为例，也可以使用id选择元素。

initChart() {
      let echartsDom = this.$refs.myChart;
      let echartInstance = echarts.init(echartsDom);
      let option = {
      	backgroundColor: '#051542', //背景色
        tooltip: {
          trigger: 'axis',
        },
        //这里可以调整图表与容器之间的间距
        grid: {
          left: '10%',
          right: '10%',
          bottom: '10%',
          top: '10%',
          containLabel: false,
        },
        //需要多少系列配置在legend数组里面
        legend: [
          {
            data: [
              {
                name: '员工数量',
              },
            ],
            textStyle: {
              color: '#FFFFFF',
              fontSize: 14,
            },
            left: '10%',
            //这里可以定义系列选择器的样式
            itemHeight: 6,
            itemStyle: {
              color: '#319DEA',
            },
          },
          {
            data: [
              {
                name: '支出工资',
              },
            ],
            textStyle: {
              color: '#FFFFFF',
              fontSize: 14,
            },
            left: 'center',
            itemHeight: 6,
            itemStyle: {
              color: '#23C0BB',
            },
          },
          {
            data: [
              {
                name: '公司营收趋势',
              },
            ],
            textStyle: {
              color: '#FFFFFF',
              fontSize: 14,
            },
            itemHeight: 8,
            itemStyle: {
              color: '#F6AB00',
            },
            right: '10%',
          },
        ],
        xAxis: {
          type: 'category',
          data: [2022,2023,2024],
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(45, 60, 92, 1)',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              fontFamily: 'Microsoft YaHei',
              color: '#fff', // x轴颜色
              fontWeight: 'normal',
              fontSize: '14',
              lineHeight: 22,
            },
            interval: 0, //标签设置为全部显示
            lineHeight: 15,
          },
        },

        yAxis: [
          {
           //这两个值可定义这条轴的最大刻度与最小刻度，可不写，将自行优化分配刻度
            min: 0,
            max: 800,
            type: 'value',
            name: '个',
            //分成刻度段
            splitNumber: 4,
            nameTextStyle: {
              color: '#fff',
              fontSize: '12px',
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(45, 60, 92, 1)',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(45, 60, 92, .3)', //左侧显示线
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: 14,
              },
            },
          },
          {
            type: 'value',
            name: '元',
            splitNumber: 4,
            nameTextStyle: {
              color: '#fff',
              fontSize: '12px',
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#15205B',
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(135,140,147,1)', //左侧显示线
              },
            },
            axisTick: {
              show: true,
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: 14,
              },
            },
          },

          {
            // min: -100,
            // max: 100,
            type: 'value',
            name: '百分比',
            interval: 20,
            offset: 85,
            nameTextStyle: {
              color: '#fff',
              fontSize: '12px',
            },
            splitNumber: 4,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#15205B',
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(135,140,147,1)', //左侧显示线
              },
            },
            axisTick: {
              show: true,
            },
            axisLabel: {
              margin: -31,
              //数据格式
              formatter: '{value}%',
              textStyle: {
                color: '#fff',
                fontSize: 14,
              },
            },
          },

        ],
        series: [
          {
            name: '员工数量',
            type: 'custom',    //使用自定义柱子，这里的type要写 'custom'
            color: '#319DEA',
            yAxisIndex: 0,	   //使用第一个y轴
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                x: -14,			//如果多个系列都是用自定义柱子的话，可适当调整x的值
                type: 'group',  //组合
                children: [
                  {
                    type: 'CubeLeft',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      //这里设置柱子的颜色
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: 'rgba(57, 206, 255, 1)',
                        },
                        {
                          offset: 1,
                          color: 'rgba(45, 72, 173, 0.1)',
                        },
                      ]),
                    },
                  },
                  {
                    type: 'CubeRight',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: 'rgba(57, 206, 255, 1)',
                        },
                        {
                          offset: 1,
                          color: 'rgba(45, 72, 173, 0.1)',
                        },
                      ]),
                    },
                  },
                  {
                    type: 'CubeTop',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: 'rgba(57, 206, 255, 1)',
                        },
                        {
                          offset: 1,
                          color: 'rgba(57, 206, 255, 1)',
                        },
                      ]),
                    },
                  },
                ],
              };
            },
            //鼠标悬停时的提示
            tooltip: {
              valueFormatter: function(value) {
                return formatNumber(value) + '个';
              },
            },
            data: [168,256,365],
          },

          {
            name: '支出工资',
            type: 'custom',
            color: '#23C0BB',
            yAxisIndex: 1,
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                x: 14,
                type: 'group',
                children: [
                  {
                    type: 'CubeLeft',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: 'rgba(49, 213, 199, 1)',
                        },
                        {
                          offset: 1,
                          color: 'rgba(29, 39, 115, 0.1)',
                        },
                      ]),
                    },
                  },
                  {
                    type: 'CubeRight',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: 'rgba(49, 213, 199, 1)',
                        },
                        {
                          offset: 1,
                          color: 'rgba(29, 39, 115, 0.1)',
                        },
                      ]),
                    },
                  },
                  {
                    type: 'CubeTop',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 1,
                          color: 'rgba(49, 213, 199, 1)',
                        },
                        {
                          offset: 1,
                          color: 'rgba(49, 213, 199, 1)',
                        },
                      ]),
                    },
                  },
                ],
              };
            },
            tooltip: {
              valueFormatter: function(value) {
                return formatNumber(value) + '元';
              },
            },
            data: [1608,1256,965]
          },
          {
            name: '公司营收趋势',
            type: 'line',
            smooth: true, //是否使用平滑曲线
            stack: '3',
            yAxisIndex: 2,
            symbol: 'circle',
            symbolSize: 10,
            itemStyle: {
              shadowColor: '#fff',
              shadowBlur: 5,
              color: '#F6AB00',
            },
            tooltip: {
              valueFormatter: function(value) {
                return value + '%';
              },
            },
            data: [25.6,23.9,87.6]
          },
        ],
      };
      myEcharts.setOption(option);
    },

这样一个自定义双柱一折线的echarts图表就实现了，各位觉得怎么样呢，欢迎评论区留言啊！

ℳ墨尔本
关注
  • 11
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts实现双柱图数据联动
温小鹿的博客
09-03 2634
一、效果 实现如下的双柱图联动 二、需求分析 1. 两个echarts实现联动 用到echarts中的 echarts.connect（[图表名称1，图表名称2]） let stackingBar1 = this.$echarts.init(document.getElementById("myCharts1")); let stackingBar2 = this.$echarts.init(document.getElementById("myCharts2")); stackingBar1.se
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
基于Echarts的横向双3D柱形图
最新发布
qq_42267856的博客
06-19 185
【代码】基于Echarts的横向双3D柱形图。
echarts 双立体柱状图
qq_40279395的博客
06-15 1185
const xData = ['南京', '苏州', '连云港', '扬州', '无锡'];//data1存放背景条的数值，for循环使其数量与value一致。data: ['市政管道', '庭院管道', '立管'],show: true, // 是否显示坐标轴轴线。name: '单位（公里）',name: '市政管道',name: '庭院管道',name: '市政管道',name: '庭院管道',name: '立管',name: '立管',
快速入门前端图表插件E-chart
qq_39581763的博客
03-07 584
在前端项目开发中，有很多地方会遇到绘制图表的需求，一般的图表可以通过canvas来绘制，但是遇到复杂一点的图表怎么办呢？ 而且黑马的课程大纲已经把canvas课程删掉了，既然canvas有用，为什么要把他从课程大纲里面删掉呢？ canvas主要是用作前端小游戏的渲染，还有图表的制作。我们去公司做的项目，游戏类的项目，很少。然后自己手写canvas图表，非常的复杂，可...
双立体柱状图/双y轴
Xiang_Gong_Ya_的博客
06-30 269
立体柱状图
如何使用echart中获取canvas绘制到自己的canvas上去
热门推荐
02-24 1万+
echart是一个非常好的html5的组件，可以用于分析、报表等等。但是echart有一个很大缺点(这也不能怨echart)，它不能组件叠加显示在一个canvas中，在一个canvas中显示多个组件是很有必要的，这个时候就想如何能使用echart生成组件，然后显示在之间的canvas中。首先想到的肯定是离屏canvas。echart归根结底是使用html5中的canvas实现的，肯定支持离屏can
echarts多条折线图动态分层的实现方法
10-16
首先，ECharts 是百度开发的一个基于 JavaScript 的数据可视化库，它使用 WebGL 和 Canvas 技术，能够高效地处理大量数据并生成交互式图表。ECharts 的文档（http://echarts.baidu.com/doc/example.html）包含了大量...
原生canvas实现折线图封装
07-01
总的来说，原生canvas实现折线图封装是一个涉及到JavaScript编程、图形学和用户交互的过程。通过掌握这些基础知识，开发者可以创建出满足特定需求的、高度定制化的数据可视化工具。同时，这样的实践也有助于理解底层...
ec-canvas 实现echart图表显示
05-19
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
EasyUI表格合并，及echarts折线图，导出折线图为图片
01-23
而Echarts是一款由百度开发的开源数据可视化库，它支持各种图表类型，如折线图、柱状图、饼图等，为数据分析和展示提供了强大的支持。 在"EasyUI表格合并"这一主题中，我们主要讨论的是如何使用EasyUI的datagrid...
微信小程序使用echarts获取数据并生成折线图
10-16
在微信小程序中使用ECharts生成折线图是一项常见的数据可视化任务。ECharts是一款由百度开发的开源JavaScript图表库，它提供了丰富的图表类型和强大的交互功能，适用于Web和移动应用。在微信小程序中，我们可以借助...
【echarts】3D双柱形图
qq_42122434的博客
11-06 475
【代码】【echarts】3D双柱形图。
Canvans实现ECharts图的叠加
qqjuanqq的博客
10-12 593
Canvans制作ECharts图表
Echarts操作与使用
huashui996521的博客
05-11 171
canvas和svg区别？ 1.canvas生成的是图片，位图（也称像素图），不能单独选中某个图形，只能选中整体 2.svg:放大不失真，能单独选中局部的某个图形，并且可以用css,js来操纵 1.Echarts优势 开源，免费，并且是百度开发，有详细中文文档 2.Echarts使用 2.1 快速使用： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <.
前端echarts图可以传到后台吗_小程序-引入 echart 图表画圆饼图
weixin_39531037的博客
11-25 308
前言在 web 中引入echart可视化图表是很常见的操作,那在小程序当中又如何引入使用呢示例效果完整示例效果-可以点击此处查看下载使用 ec-canvas在github上下载echarts-for-weixin代码,并将ec-canvas文件夹,复制拷贝到根目录路径下,与pages目录同级,或者放置到components自定义组件文件夹中在引用ec-canvas时,相对路径引入正确即可如下所示:...
echarts柱状图 双柱状图基本用法
m0_62285976的博客
06-27 8568
echarts柱状图 双柱状图基本用法
echart-两条折线图-柱状图差值
qq_38985444的博客
02-26 2151
let expendChart = []//支出 let incomeChart = []//收入 let dateChart = []//时间 let difference = []//差值 if(res.length>0){ res[0].data.forEach(item => { let expend = "" if(item.tradeAmountZc>0){ .
echarts 如何在一条柱形显示两个数字_堆积柱形图：告别只懂两根柱形图做比较的尴尬...
weixin_39748928的博客
11-13 1601
今日分享主题：如何用柱形图直观地呈现变化幅度大小。在数据分析中，有些时候，相比指标本身的大小，我们更希望看到指标变化幅度的大小。所以图表呈现的时候，我们更希望呈现变化幅度，这要怎么做呢？你可能会说，这好办呐。把变化幅度算出来，然后做个最简单的柱形图就好了。这确实是呈现了变化幅度的大小，可以满足我们的需求。但如果此时，我再对你提个需求：光有个变化幅度太片面了，我还想知道指标本身的大小，能不能同时把变...
echarts放大canvas中的图表
09-19
要实现Echarts图表放大功能，可以通过改变canvas的尺寸来实现。 首先，我们可以为canvas设置一个初始的大小，例如500像素宽和300像素高。然后，我们可以在用户想要放大图表时，通过监听用户的事件来改变canvas的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值