Vue-echarts theme switching + selection panel implementation

By implementing the theme selection panel, it is more convenient to switch themes of echarts charts, and supports pie charts, line charts, histograms and other types of echarts charts.

Table of contents

1. Implementation process

1.1. Import echarts theme JS file

1.2. Add a selection button picture

1.3. Add button

1.4. Realization of theme selection panel

1.5. Initialize the echarts graph

1.6. Add selection event

2. Realize the effect

3. Implement the code

4. Image files required for the panel

---

1. Implementation process

1.1. Import echarts theme JS file

To implement echarts theme switching, you need to import the theme JS file of the echarts module, which is located in the echarts/theme/ directory.

import * as echarts from "echarts";
import 'echarts/theme/azul.js'
import 'echarts/theme/bee-inspired.js'
import 'echarts/theme/blue.js'
import 'echarts/theme/caravan.js'
import 'echarts/theme/carp.js'
import 'echarts/theme/cool.js'
import 'echarts/theme/dark.js'
import 'echarts/theme/dark-blue.js'
import 'echarts/theme/dark-bold.js'
import 'echarts/theme/dark-digerati.js'
import 'echarts/theme/dark-fresh-cut.js'
import 'echarts/theme/dark-mushroom.js'
import 'echarts/theme/eduardo.js'
import 'echarts/theme/forest.js'
import 'echarts/theme/fresh-cut.js'
import 'echarts/theme/fruit.js'
import 'echarts/theme/gray.js'
import 'echarts/theme/green.js'
import 'echarts/theme/helianthus.js'
import 'echarts/theme/infographic.js'
import 'echarts/theme/inspired.js'
import 'echarts/theme/jazz.js'
import 'echarts/theme/london.js'
import 'echarts/theme/macarons.js'
import 'echarts/theme/macarons2.js'
import 'echarts/theme/mint.js'
import 'echarts/theme/red.js'
import 'echarts/theme/red-velvet.js'
import 'echarts/theme/roma.js'
import 'echarts/theme/royal.js'
import 'echarts/theme/sakura.js'
import 'echarts/theme/shine.js'
import 'echarts/theme/tech-blue.js'
import 'echarts/theme/vintage.js'

1.2. Add a selection button picture

The image file has been placed at the end of the article. After downloading, just add the folder to the /src/assets/ directory.

corresponding to the code

:src="require(`@/assets/right_angle_picture/`+btn+`.png`)"

1.3. Add button

Add button control panel display, click the button will pop up theme selection panel

<el-button type="info" plain @click="dialogVisible = true">切换主题</el-button>

1.4. Realization of theme selection panel

Use el-dialog display panel, add el-scrollbar scroll bar to display selection buttons, v-for loop to add buttons and pictures

<el-dialog
      title="Echarts主题选择"
      :visible.sync="dialogVisible"
      width="500px"
      class="class_dialog_hospital"
      center>
      <div class="cab">
        <el-scrollbar style="height: 100%">
          <el-row align="middle"
                  v-for="(btnArr, index) in oprBtn"
                  :key="index">
            <el-col :span="12"
                    style="padding-top:5px;padding-bottom:5px"
                    v-for="(btn, index) in btnArr"
                    :key="index">
              <div>
                <div>
                  <el-button plain round @click="handleToggle(btn)">
                    <img style="width: 151px; height: 19px"
                         :src="require(`@/assets/right_angle_picture/`+btn+`.png`)" alt=""/>
                  </el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-scrollbar>
      </div>
    </el-dialog>

1.5. Initialize the echarts graph

Specify a topic name. When the ECharts object is initialized, specify the theme name to be imported through the second parameter of init. Such as statisticsChart = echarts.init(this.$refs.statisticsChart, topic name); .

  mounted() {
    statisticsChart = echarts.init(this.$refs.statisticsChart, 'light',{renderer:'svg'}); //svg格式显示图表
    statisticsChart.setOption(this.options);
  },

1.6. Add selection event

After clicking the theme selection button, pass the theme name into the method, change the theme first destroy the echarts avatar, and rebuild echarts, click to hide the theme selection panel, here select the SVG renderer when building echarts,

    handleToggle(theme) {
      statisticsChart.dispose(); //销毁echarts
      statisticsChart = echarts.init(this.$refs.statisticsChart, theme,{renderer:'svg'});  //svg格式显示图表
      statisticsChart.setOption(this.options);
      this.dialogVisible = false;
    },

2. Realize the effect

 

 

3. Implement the code

<template>
  <div class="app-container">
    <el-button type="info" plain @click="dialogVisible = true">切换主题</el-button>
    <div ref="statisticsChart" class="statistics"></div>
    <el-dialog
      title="Echarts主题选择"
      :visible.sync="dialogVisible"
      width="500px"
      class="class_dialog_hospital"
      center>
      <div class="cab">
        <el-scrollbar style="height: 100%">
          <el-row align="middle"
                  v-for="(btnArr, index) in oprBtn"
                  :key="index">
            <el-col :span="12"
                    style="padding-top:5px;padding-bottom:5px"
                    v-for="(btn, index) in btnArr"
                    :key="index">
              <div>
                <div>
                  <el-button plain round @click="handleToggle(btn)">
                    <img style="width: 151px; height: 19px"
                         :src="require(`@/assets/right_angle_picture/`+btn+`.png`)" alt=""/>
                  </el-button>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-scrollbar>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import * as echarts from "echarts";

import 'echarts/theme/azul.js'
import 'echarts/theme/bee-inspired.js'
import 'echarts/theme/blue.js'
import 'echarts/theme/caravan.js'
import 'echarts/theme/carp.js'
import 'echarts/theme/cool.js'
import 'echarts/theme/dark.js'
import 'echarts/theme/dark-blue.js'
import 'echarts/theme/dark-bold.js'
import 'echarts/theme/dark-digerati.js'
import 'echarts/theme/dark-fresh-cut.js'
import 'echarts/theme/dark-mushroom.js'
import 'echarts/theme/eduardo.js'
import 'echarts/theme/forest.js'
import 'echarts/theme/fresh-cut.js'
import 'echarts/theme/fruit.js'
import 'echarts/theme/gray.js'
import 'echarts/theme/green.js'
import 'echarts/theme/helianthus.js'
import 'echarts/theme/infographic.js'
import 'echarts/theme/inspired.js'
import 'echarts/theme/jazz.js'
import 'echarts/theme/london.js'
import 'echarts/theme/macarons.js'
import 'echarts/theme/macarons2.js'
import 'echarts/theme/mint.js'
import 'echarts/theme/red.js'
import 'echarts/theme/red-velvet.js'
import 'echarts/theme/roma.js'
import 'echarts/theme/royal.js'
import 'echarts/theme/sakura.js'
import 'echarts/theme/shine.js'
import 'echarts/theme/tech-blue.js'
import 'echarts/theme/vintage.js'

let statisticsChart = null;
export default {
  name: "index",
  data() {
    return {
      //主题选择面板显示标识
      dialogVisible: false,
    }
  },
  mounted() {
    statisticsChart = echarts.init(this.$refs.statisticsChart, 'light',{renderer:'svg'}); //svg格式显示图表
    statisticsChart.setOption(this.options);
  },
  computed: {
    options() {
      return {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
      };
    },
    //主题选择面板按钮
    oprBtn(){
      let index = 0;
      let arrTmp = [];
      let displayBtn = ['azul', 'bee-inspired', 'blue', 'caravan',
        'carp', 'cool', 'dark', 'dark-blue',
        'dark-bold', 'dark-digerati', 'dark-fresh-cut', 'dark-mushroom',
        'eduardo', 'forest', 'fresh-cut', 'fruit',
        'gray', 'green', 'helianthus', 'infographic', 'inspired',
        'jazz', 'london', 'macarons', 'macarons2',
        'mint', 'red', 'red-velvet', 'roma',
        'royal', 'sakura', 'shine', 'tech-blue', 'vintage'];
      for (let i = 0; i < displayBtn.length; i++) {
        index = parseInt(i / 4);
        if (arrTmp.length <= index) {
          arrTmp.push([]);
        }
        arrTmp[index].push(displayBtn[i])
      }
      return arrTmp;
    }
  },
  methods: {
    handleToggle(theme) {
      statisticsChart.dispose(); //销毁echarts
      statisticsChart = echarts.init(this.$refs.statisticsChart, theme,{renderer:'svg'});  //svg格式显示图表
      statisticsChart.setOption(this.options);
      this.dialogVisible = false;
    },
  }
}
</script>

<style scoped>

.statistics {
  width: 960px;
  height: 550px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 20px;
}

.cab {
  padding-left: 40px;
  padding-right: 10px;
  height: 480px;
}

/*头区样式*/
/deep/ .class_dialog_hospital .el-dialog__header {
  background: #F0FFF0;
  padding: 4px 0 4px 10px;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  height: 45px;
  line-height: 45px;
  font-family: "PingFang SC";
}

/*头区退出按钮样式*/
/deep/ .class_dialog_hospital .el-dialog__headerbtn {
  top: 10px;
  right: 10px;
  font-size: 15px;
}

/*样式穿透*/

/*对话框区*/
/deep/ .class_dialog_hospital .el-dialog {
  border: 1px solid #DCDFE6;
  box-shadow: 0 0 4px #e6e6e6;
  border-radius: 10px;
  padding: 0;
}

/*内容区*/
/deep/ .class_dialog_hospital .el-dialog__body {
  padding: 10px 0px 10px 0px;
}

/deep/ .cab .is-horizontal {
  display: none;
}

/deep/ .cab .el-scrollbar__wrap {
  overflow-x: hidden;
}

</style>

4. Image files required for the panel

picture file