vue中使用echarts绘制折柱混合图、环形饼状图

最新推荐文章于 2024-11-14 15:34:44 发布

芝士焗红薯

最新推荐文章于 2024-11-14 15:34:44 发布

阅读量2k

点赞数 1

分类专栏：前端 # echarts 文章标签： echarts vue.js 前端

本文链接：https://blog.csdn.net/weixin_44320032/article/details/127752370

版权

本文详细介绍了在Vue项目中如何使用ECharts实现折柱混合图、单环形饼状图以及双环形饼状图。通过设置series的type属性切换柱状图和折线图，利用radius属性控制饼状图的形状和大小。代码示例展示了具体的实现过程。

摘要由CSDN通过智能技术生成

最近又使用到echarts相关的内容，再做一个相应的总结。

之前的基本柱状图、折线图、饼状图文章：

vue中使用echart绘制柱状图、折现图、饼状图_芝士焗红薯的博客-CSDN博客_vue画柱状图

1.折柱混合

折柱混合其实很容易实现，只要将对应的type改成想要的图表类型就可以了。

首先引用

<div class="echart" id="szmxBar" :style="{ float: 'left', width: '90%', height: '400px'  }"></div>

js方法：

根据之前的文章可以知道，柱状图和折线图都是通过series来控制y轴数据，所以只要将series中的type属性改成对应的bar（柱状图）、line（折线图）就可以了。

如下：

具体代码：

// 收支明细
    getSzmxEcharts () {
      const option = {
        // 标题
        title: {
          // text: '收支明细柱状图'
        },
        // 鼠标放到图上展示的数据样式，trigger: 'axis'   (有axis/item/none三个值,axis是一条竖线)
        tooltip: {},
        // 用来标志图表数据，data字段的数组需要对应每个柱条的名称，鼠标hover到最顶部的legend标志，可以标志对应的图，点击legend标志会隐藏对应的图
        legend: {
          data: ['流水增加','流水减少','余额','流水净额']
        },
        // 配置x轴数据、样式、名称
        xAxis: {
          type: 'category', // 可以不写，默认type就是category
          data: ['10月', '12月