vue+element+echarts 换肤功能

龚箭

已于 2023-10-28 15:46:46 修改

阅读量1.2k

点赞数

分类专栏： vue问题总结文章标签： vue.js javascript css3

于 2020-05-21 10:12:17 首次发布

本文链接：https://blog.csdn.net/weixin_39513821/article/details/106240385

版权

vue问题总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

demo中的换肤效果没有用到css预编译处理

整体的思路是预先定义好多套css样式表分别放到static文件中,根据按钮切换在DOM上挂载相对应的CSS,听上去是个比较笨的方法,下面直接上代码

1.预先在准备好自己写好的css文件、element官方主题样式、echarts官方样式（这里下载是js格式）

2. 将默认的主题放在vuex中

import Vue from 'vue'
import Vuex from 'vuex'

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象
const store = new Vuex.Store({
    state:{
        //存放的键值对就是所要管理的状态
        echThemeName:sessionStorage.getItem("echartTheme") || "essos", //echarts主题
        elementName:sessionStorage.getItem("elementtheme") || "static/elementThem2.css", //element主题
        htmlTheme:sessionStorage.getItem("htmlTheme") || "static/htmlTheme.css", //html主题


    },
    getters:{
        GEt_echThemeName:(state)=>{
            return state.echThemeName
        },
        Get_elementName:(state)=>{
            return state.elementName
        },
        Get_htmlThemeURl:(state)=>{
            return state.htmlTheme
        },

    }

})

export default store

然后在mian.js中挂载vuex

import store from './store'
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

3.下面将echarts主题在vue.app中引入，这样全局的组件都可使用这个主题文件


<script>
import '../static/echarts_essos' // 引入echarts主题文件
import "../static/echarts_dark" // 引入echarts主题文件
export default {
  name: 'App'
}
</script>

4.在index.html中预先定义好两个link 用于更换不同的主题css文件

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" id="elementTheme" href="static/index.css">
    <link rel="stylesheet" id="styleTheme" href="static/theme.css">
    <title>vue换肤</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

5.在页面上绑定一个按钮用作换肤的切换

<script>
import echarts from "../components/echarts"
import {mapGetters,mapActions} from "vuex"
export default {
  components:{
    echarts
  },
  props:{},
  data(){
    return {}
  },
  watch:{
    
  },
  computed:{
    /**vuex数据映射 */
    ...mapGetters({
      GetEchsName:'GEt_echThemeName',
      GetelementName:"Get_elementName",
      GethtmlTheme:"Get_htmlThemeURl",
    }),
  },
  created(){},
  mounted(){
    //页面初始化获取vuex的默认主题挂载到DOM上
    document.getElementById('styleTheme').href = this.GethtmlTheme; 
    document.getElementById("elementTheme").href = this.GetelementName;
  },
  methods:{
    switchFun(){
      let styleDom = document.getElementById('styleTheme')
      let elemetDom = document.getElementById("elementTheme")
      //判断echarts主题的文件名称,在session中存取相对应的主题文件地址
      switch (this.GetEchsName) {
        case "essos":
          sessionStorage.setItem("echartTheme","dark");
          sessionStorage.setItem("elementtheme","static/elementThem.css");
          sessionStorage.setItem("htmlTheme","static/htmlTheme2.css");
                
          break;
        default:
          sessionStorage.setItem("echartTheme","essos");
          sessionStorage.setItem("elementtheme","static/elementThem2.css");
          sessionStorage.setItem("htmlTheme","static/htmlTheme.css"); 
          break;
      }
      location.reload()
    }
  },
}
</script>

6.echarts组件在渲染时需要在vuex中获取echarts主题的名称,并需要刷新页面才会渲染新的主题文件

<script>
var echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");
require("echarts/lib/chart/radar");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
import {mapGetters,mapActions} from "vuex"
export default {
  components: {},
  props: {},
  data() {
    return {
      option: {
        title: {
          text: "堆叠区域图"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "邮件营销",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "联盟广告",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "视频广告",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "直接访问",
            type: "line",
            stack: "总量",
            areaStyle: {},
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: "搜索引擎",
            type: "line",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "top"
              }
            },
            areaStyle: {},
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
    };
  },
  watch: {
    GetEchsName(value,ovalue){
      this.echartsFun(value)
    }
  },
  computed: {
    /**vuex数据映射 */
    ...mapGetters({
      GetEchsName:'GEt_echThemeName'
    }),
  },
  created() {},
  mounted() {
    this.echartsFun()
  },
  methods: {
    echartsFun(theme){
      let text = theme
      let myEch = echarts.init(document.getElementById('echElement'),this.GetEchsName);
      myEch.setOption(this.option)
    }
  }
};

经测试换肤效果成功

获取全平台学习资源