Echarts 自定义工具栏事件 || 柱状图和饼状图之间的切换

1. echarts中有柱状图和折线图之间的切换,却没有柱状图和饼图直接的切换
2. 不过echarts有自定义工具栏方法,我们可以通过自定工具栏的方法来实现echarts没有的图形切换
3. toolbox 中的 feature 自定方法 (title: 鼠标放上去显示的文字;icon: 自定工具栏的图标的path路径;onclick: 点击事件)
   
4. 在点击事件写自己要处理成的图形代码就行了, 下面有我的一个完整实例
5. 如何引入echarts,在我的上一篇文章中,

完整代码:

<template>
  <div class="app-container">
    <div class="main-content">
      <el-row :gutter="5">
        <el-col :span="17">
          <div ref="tjcishujiange" style="width: 98%;height: calc(100vh - 231px)"></div>
        </el-col>
        <el-col :span="6">
          <div class="tables-content">
            <div style="background: #FFFFFF;height: 44px;text-align: center;line-height: 44px;font-size: 18px">
              测试
            </div>
            <el-table
              :data="data_jhyf_list"
              height="calc(100vh - 275px)"
              max-height="calc(100vh - 275px)"
              style="width: 100%">
              <el-table-column prop="month" label="区间" show-overflow-tooltip/>
              <el-table-column prop="number1" label="数量" show-overflow-tooltip/>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

export default {
  name: "TjCishujiange",
  data() {
    return {
      data_jhyf_list: [],
      options: {},
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 请求数据
    getList() {
      this.data_jhyf_list = [
        {month: '0-1', number1: '1500'},
        {month: '2-3', number1: '1200'},
        {month: '4-5', number1: '1100'},
        {month: '6-7', number1: '1000'},
        {month: '8-9', number1: '900'},
        {month: '10-11', number1: '800'},
        {month: '12-13', number1: '700'},
      ]
      this.$nextTick(function () {
        this.dataHandle()
        this.randerEcharts()
      })
    },
    // 查询
    handleQuery() {
      this.getList()
    },
    //  饼状图数据处理
    dataHandle() {
      let echartsData = this.data_jhyf_list.map(item => {
        return {
          value: item.number1,
          name: item.month
        }
      })
      let that = this
      that.options = {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            let value = params.data.value
            return `${params.seriesName} <br/>${params.name}: ${value} (${params.percent}%)`
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {show: true, readOnly: false},
            myTool: {
              show: true,
              title: '切换为柱状图',
              icon: 'path://M163.84 880.64h122.88v-737.28h-122.88v737.28z m-40.96-778.24h204.8v819.2h-204.8v-819.2z m286.72 204.8h204.8v614.4h-204.8v-614.4z m40.96 573.44h122.88v-532.48h-122.88v532.48z m245.76-368.64h204.8v409.6h-204.8v-409.6z m40.96 368.64h122.88v-327.68h-122.88v327.68z',
              onclick: function () {
                that.dataZhuzhuan()
                that.randerEcharts()
              }
            },

            myTool1: {
              show: true,
              title: '切换为饼状图',
              icon: 'path://M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m460.1856 489.8816H537.6V52.0192a461.2096 461.2096 0 0 1 434.5856 437.8624z m0 51.2a458.752 458.752 0 0 1-93.3888 249.4464L582.0416 541.0816zM512 972.8a460.8 460.8 0 0 1-25.6-921.6v464.2816a25.8048 25.8048 0 0 0 9.8304 20.48L845.6192 829.44a459.776 459.776 0 0 1-333.6192 143.36z',
              onclick: function () {
                that.dataHandle()
                that.randerEcharts()
              }
            },
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          type: 'scroll',
        },
        series: [
          {
            name: '数量',
            type: 'pie',
            radius: '50%',
            data: echartsData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    },
    // 柱状图数据处理
    dataZhuzhuan() {
      let wb_data = this.data_jhyf_list
      let xList = wb_data.map(item => item.month)
      let data = wb_data.map(item => item.number1)
      let that = this
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },

        legend: {
          orient: 'vertical',
          left: 'left',
          type: 'scroll',
        },
        toolbox: {
          show: true,
          feature: {
            dataView: {show: true, readOnly: false},
            myTool1: {
              show: true,
              title: '切换为饼状图',
              icon: 'path://M163.84 880.64h122.88v-737.28h-122.88v737.28z m-40.96-778.24h204.8v819.2h-204.8v-819.2z m286.72 204.8h204.8v614.4h-204.8v-614.4z m40.96 573.44h122.88v-532.48h-122.88v532.48z m245.76-368.64h204.8v409.6h-204.8v-409.6z m40.96 368.64h122.88v-327.68h-122.88v327.68z',
              onclick: function () {
                that.dataZhuzhuan()
                that.randerEcharts()
              }
            },
            myTool: {
              show: true,
              title: '切换为饼状图',
              icon: 'path://M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m460.1856 489.8816H537.6V52.0192a461.2096 461.2096 0 0 1 434.5856 437.8624z m0 51.2a458.752 458.752 0 0 1-93.3888 249.4464L582.0416 541.0816zM512 972.8a460.8 460.8 0 0 1-25.6-921.6v464.2816a25.8048 25.8048 0 0 0 9.8304 20.48L845.6192 829.44a459.776 459.776 0 0 1-333.6192 143.36z',
              onclick: function () {
                that.dataHandle()
                that.randerEcharts()
              }
            },
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        xAxis: {
          type: 'category',
          data: xList
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
          },
        },
        series: [
          {
            data: data,
            type: 'bar',
            name: '数量',
            barMaxWidth: 22
          }
        ]
      }
      this.options = option
    },
    //渲染图表
    randerEcharts() {
      let tjcishujiange = this.echarts.init(this.$refs.tjcishujiange)
      tjcishujiange.resize();
      tjcishujiange.clear()
      tjcishujiange.setOption(this.options, true)
    },
  },
}
</script>