如何使用单选按钮控制echarts图形类型切换

1. 场景模拟

      在使用Vue + Element +Echarts组合，利用Element中的单选按钮，控制echarts图形类型转换

2. 使用技术

• Vue.js
• Element
• Echarts
• Webpack

3. 实现源码

3.1 图形组件

<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-radio-group v-model="chartType" @change="changeChartType">
        <el-radio label="column">柱形图</el-radio>
        <el-radio label="bar">条状图</el-radio>
        <el-radio label="line">折线图</el-radio>
        <el-radio label="area">面积图</el-radio>
      </el-radio-group>
      <div id="column_chart"></div>
    </el-col>
  </el-row>
</template>

<script>
  import echarts from 'echarts'
  export default {
    data() {
      return {
        chartType: 'column'
      }
    },
    mounted() {
      this.buildColumn('column')
    },
    methods: {
      buildColumn(val) {
        let column = echarts.init(document.getElementById('column_chart'))
        let option = {
          title: {
            text: '销售量统计',
            x: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: this.buildXdata(val),
          yAxis: this.buildYdata(val),
          series: this.buildSeries(val)
        }

        column.setOption(option)
      },
      buildXdata(val) {
        var xAxis = {}
        if(val == 'bar') {
          xAxis = {
            type: 'value'
          }
        } else {
          xAxis = {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'],
            axisTick: {
              alignWithLabel: true
            }
          }
        }

        return xAxis
      },
      buildYdata(val) {
        var yAxis = {}
        if(val == 'bar') {
          yAxis = {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'],
            axisTick: {
              alignWithLabel: true
            }
          }
        } else {
          yAxis = {
            type: 'value'
          }
        }

        return yAxis
      },
      buildSeries(val) {
        var series = []
        var chartType = 'bar'
        if(val == 'line' || val == 'area'){
          chartType = 'line'
        }
        if(val == 'area') {
          console.log(val)
          series.push({
            name: '销量',
            type: chartType,
            areaStyle: {},
            data: [589, 258, 985, 456, 789, 321, 412, 623, 745, 454, 569, 784]
          })
        } else {
          series.push({
            name: '销量',
            type: chartType,
            data: [589, 258, 985, 456, 789, 321, 412, 623, 745, 454, 569, 784]
          })
        }

        return series
      },
      changeChartType(val) {
        this.buildColumn(val)
      }
    }
  }
</script>

<style scoped>
  #column_chart{
     width: 1800px;
     height: 800px;
  }
</style>

3.2 路由配置

import Vue from 'vue'
import Router from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Pie from '@/components/charts/pie'
import Column from '@/components/charts/column'

Vue.use(Router)
Vue.use(ElementUI)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Pie',
      component: Pie
    }, {
      path: '/column',
      name: 'Column',
      component: Column
    }
  ]
})

4. 实现效果

4.1 柱状图

柱状图

4.2 条状图

条状图

4.3 折线图

折线图

4.4 面积图

面积图