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

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可以设置是否可以将图表保存为图片

echarts stack 图表

0 人点赞