前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >echarts如何在一个图表中切换切线图、柱状图

echarts如何在一个图表中切换切线图、柱状图

作者头像
是小张啊喂
发布2023-02-23 09:08:54
4820
发布2023-02-23 09:08:54
举报
文章被收录于专栏:软件

echarts中一个图表中切换切线图、柱状图以及堆叠

主要利用的是toolbox.feature. magicType

示例

代码语言:javascript
复制
feature: {
    magicType: {
        type: ['line', 'bar', 'stack']
    }
}

官方案例

代码语言:javascript
复制
option = {
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: "none"
      },
      dataView: {
        readOnly: false
      },
      magicType: {
        type: ["line", "bar","stack"]
      },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {
    type: "value",
    axisLabel: {
      formatter: "{value} °C"
    }
  },
  series: [{
    name: "最高气温",
    type: "line",
    data: [11, 11, 15, 13, 12, 13, 10],
    markPoint: {
      data: [{
        type: "max",
        name: "Max"
      }, {
        type: "min",
        name: "Min"
      }]
    },
    markLine: {
      data: [{
        type: "average",
        name: "Avg"
      }]
    }
  }, {
    name: "最低气温",
    type: "line",
    data: [1, -2, 2, 5, 3, 2, 0],
    markPoint: {
      data: [{
        name: "周最低",
        value: -2,
        xAxis: 1,
        yAxis: -1.5
      }]
    },
    markLine: {
      data: [{
          type: "average",
          name: "Avg"
        },
        [{
          symbol: "none",
          x: "90%",
          yAxis: "max"
        }, {
          symbol: "circle",
          label: {
            position: "start",
            formatter: "Max"
          },
          type: "max",
          name: "Top"
        }]
      ]
    }
  }]
}

官方用一个气温的案例介绍了这个切换的功能,只有中多数据图表中堆叠才会生效,所以一般不配置stack堆叠

另外toolbox.feature.saveAsImage可以设置是否可以将图表保存为图片

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-02-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档