实现echarts主题随项目主题切换

已于 2023-03-03 23:13:37 修改
阅读量2.5k 收藏 6
点赞数 3
分类专栏： 使用方法 基础知识 文章标签： echarts 前端 javascript
于 2023-03-03 23:09:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41886421/article/details/129328889
版权
文章详细描述了如何在Vue3项目中结合Vuetify框架，使Echarts图表能够根据项目的dark和light主题动态切换样式。主要步骤包括配置和注册自定义Echarts主题，监听项目主题变化以重绘图表，以及处理窗口大小变化时的resize事件。同时，文章提供了vue3和vue2版本的代码示例来说明具体实现方法。
摘要由CSDN通过智能技术生成

前言

项目中很多时候都带有dark/light两中主题类型，通过switch标签控制，但是echarts图形是通过canvas标签绘制，其背景颜色和字体样式并不会随着项目主题类型的切换而切换。所以需要额外设置监听主题事件，主要实现思路如下：

  1. 配置echarts主题，并引入注册
  2. 配置选项并绘制图形
  3. 监听系统主题变化，根据其改变echarts主题
  4. 监听屏幕变化，实现大小屏切换resize效果

实现效果

dark主题：

在这里插入图片描述

light主题：

在这里插入图片描述

项目环境

配置echarts主题

其实最新的echarts（5.x.x）已支持dark/light模式两种主题，但是很多时候还是满足不了项目需求，比如主题下的primary、warnning、error等样式，就可以使用**registerThemeAPI**注册主题样式，先配置主题样式（地址：主题编辑器），然后进行注册，这个官网已经给出了教程

vuetify的dark样式其实和echarts的dark样式相似，故不用使用**registerTheme**注册，主要区别在于backgroundColor和color的不同，所以使用在init()之前使用条件判断，如下：

let baseOptions = {};
// vm.$vuetify.theme.dark：是否是dark模式
if (vm.$vuetify.theme.dark) {
  baseOptions = {
    backgroundColor: themeConfig.themes.dark.backgroundColor,
    textStyle: {
      color: themeConfig.themes.dark.color,
    },
  };
}

绘制echarts图形

主要是通过onDrawLine()实现，实现思路如下：

  1. 判断vm.$vuetify.theme.dark （项目dark主题）是否为true
  2. 如果为true，配置backgroundColor和textStyle.color ，使用echarts的dark主题
  3. 如果为false，不配置backgroundColor和textStyle.color ，使用echarts中的light（即默认主题）
let lineChart = {};
const splitLine = {
  show: true,
  lineStyle: {
    // 实线
    // type: 'solid',
    // width: 0.5,
    // opacity: 0.8,

    // 虚线
    type: [5, 5],
    dashOffset: 0,
    shadowBlur: 0,
  },
};
const axisLine = { show: false };
const axisTick = { show: false };
const onDrawLine = () => {
  lineChart = vm.$echarts.init(
    document.getElementById("line-chart"),
    vm.$vuetify.theme.dark ? "dark" : "light"
  );
  let baseOptions = {};
  if (vm.$vuetify.theme.dark) {
    baseOptions = {
      backgroundColor: themeConfig.themes.dark.backgroundColor,
      textStyle: {
        color: themeConfig.themes.dark.color,
      },
    };
  }
  const option = {
    ...baseOptions,
    color: [
      $themeColors.error,
      $themeColors.danger,
      $themeColors.warning,
      $themeColors.low,
    ],
    title: {
      // text: 'Stacked Line'
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["严重", "高", "中", "低"],

      // 放在底部
      bottom: 0,
    },
    grid: {
      top: "5%",
      left: "2%",
      right: "3%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "10/09",
        "10/10",
        "10/11",
        "10/12",
        "10/13",
        "10/14",
        "10/15",
        "10/16",
        "10/17",
        "10/18",
        "10/19",
        "10/20",
        "10/21",
        "10/22",
        "10/23",
      ],
      splitLine,

      axisLine,
      axisTick,
    },
    yAxis: {
      type: "value",
      splitLine,
      interval: 90,
      max: 450,
      axisLine,
    },

    // 数据值
    series: [
      {
        name: "严重",
        type: "line",
        lineStyle: {
          width: 5,
        },

        // 显示点为实圆心
        stack: "Total",
        showSymbol: false,
        symbol: "none",
        data: [
          80, 150, 180, 270, 210, 160, 160, 202, 265, 210, 270, 255, 290, 360,
          375,
        ],
      },
      {
        name: "高",
        type: "line",
        showSymbol: false,
        symbol: "none",
        lineStyle: {
          width: 5,
        },
        data: [
          80, 125, 105, 130, 215, 195, 140, 160, 230, 300, 220, 170, 210, 200,
          280,
        ],
      },
      {
        name: "中",
        type: "line",
        showSymbol: false,
        symbol: "none",
        lineStyle: {
          width: 5,
        },
        data: [
          80, 99, 82, 90, 115, 115, 74, 75, 130, 155, 125, 90, 140, 130, 180,
        ],
      },
      {
        name: "低",
        type: "line",
        showSymbol: false,
        symbol: "none",
        lineStyle: {
          width: 5,
        },
        data: [
          10, 19, 32, 50, 15, 105, 14, 55, 30, 145, 115, 80, 200, 100, 150,
        ],
      },
    ],
  };

  lineChart.setOption(option)
};

注意：这里的lineChart不用使用ref 声明，因为不需要做响应式

术语速查手册

echarts的配置项真的很多，有时候不知道哪个是哪个意思，找起来比较费时间，官网给出了术语速查手册，有助于理解记忆

在这里插入图片描述

实现动态切换

实现echart图形切换主要思路如下：

  1. 监听项目主题（vm.$vuetify.theme.dark）
  2. 注销图形（dispose()）
  3. 重绘图形

主要代码如下：

watch(
  () => vm.$vuetify.theme.dark,
  (value) => {
    lineChart.dispose();
    onDrawLine();
  },
  {
    // immediate: true,
    deep: true,
  }
);

**注意：**不能immediate不能为true ，组件初始化时，lineChart还没有init()，所以会报错，故第一次绘制需要在onMounted，主要实现如下：

onMounted(() => {
  onDrawLine();
});

实现大小屏切换

主要通过[window.onresize](https://juejin.cn/post/7168860905625796616)实现，因为项目需求，有时候会进行大小屏切换，主要实现代码如下：

onMounted(() => {
  onDrawLine();
  window.onresize = function () {
    lineChart.resize();
  };
});

onBeforeUnmount(() => {
  window.onresize = null;
});

注意： 在组件实例销毁时，必须注销window.onresize，原因如下：

  1. window.onresize是全局组件，不注销会影响其他组件的功能
  2. 系统性能变差，因为window.onresize只要屏幕有改变就会触发，如果不注销又多个组件使用，屏幕变化一次，window.onresize会被执行多次

vue3版本代码实现

<!--
* @Description:告警时间趋势 折线图
* @version:1.0.0
* @Author: yuanyu
* @Date: 2022-11-03 10:22:55
* @LastEditors: yuanyu
* @LastEditTime: 2022-12-09 16:17:23
-->
<template>
  <!-- <vue-apex-charts
    type="line"
    height="280"
    :options="apexChatData.lineChartSimple.chartOptions"
    :series="apexChatData.lineChartSimple.series"
  /> -->
  <div id="line-chart" style="min-height:295px;width:100%"></div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'
import {
  onMounted, getCurrentInstance, onBeforeUnmount, watch,
} from 'vue-demi'
import themeConfig from '@themeConfig'
import apexChatData from './apexChartData'

const $themeColors = themeConfig.themes.light
export default {
  components: { VueApexCharts },
  setup() {
    const vm = getCurrentInstance().proxy
    console.log('document', document.getElementById('line-chart'))
    let lineChart = {}
    const splitLine = {
      show: true,
      lineStyle: {
        // 实线
        // type: 'solid',
        // width: 0.5,
        // opacity: 0.8,

        // 虚线
        type: [5, 5],
        dashOffset: 0,
        shadowBlur: 0,
      },
    }
    const axisLine = { show: false }
    const axisTick = { show: false }
    const onDrawLine = () => {
      lineChart = vm.$echarts.init(document.getElementById('line-chart'), vm.$vuetify.theme.dark ? 'dark' : 'light')
      let baseOptions = {}
      if (vm.$vuetify.theme.dark) {
        baseOptions = {
          backgroundColor: themeConfig.themes.dark.backgroundColor,
          textStyle: {
            color: themeConfig.themes.dark.color,
          },
        }
      }
      const option = {
        ...baseOptions,
        color: [$themeColors.error, $themeColors.danger, $themeColors.warning, $themeColors.low],
        title: {
          // text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['严重', '高', '中', '低'],

          // 放在底部
          bottom: 0,
        },
        grid: {
          top: '5%',
          left: '2%',
          right: '3%',
          bottom: '10%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            '10/09',
            '10/10',
            '10/11',
            '10/12',
            '10/13',
            '10/14',
            '10/15',
            '10/16',
            '10/17',
            '10/18',
            '10/19',
            '10/20',
            '10/21',
            '10/22',
            '10/23',
          ],
          splitLine,

          axisLine,
          axisTick,
        },
        yAxis: {
          type: 'value',
          splitLine,
          interval: 90,
          max: 450,
          axisLine,
        },

        // 数据值
        series: [
          {
            name: '严重',
            type: 'line',
            lineStyle: {
              width: 5,
            },

            // 显示点为实圆心
            stack: 'Total',
            showSymbol: false,
            symbol: 'none',
            data: [80, 150, 180, 270, 210, 160, 160, 202, 265, 210, 270, 255, 290, 360, 375],
          },
          {
            name: '高',
            type: 'line',
            showSymbol: false,
            symbol: 'none',
            lineStyle: {
              width: 5,
            },
            data: [80, 125, 105, 130, 215, 195, 140, 160, 230, 300, 220, 170, 210, 200, 280],
          },
          {
            name: '中',
            type: 'line',
            showSymbol: false,
            symbol: 'none',
            lineStyle: {
              width: 5,
            },
            data: [80, 99, 82, 90, 115, 115, 74, 75, 130, 155, 125, 90, 140, 130, 180],
          },
          {
            name: '低',
            type: 'line',
            showSymbol: false,
            symbol: 'none',
            lineStyle: {
              width: 5,
            },
            data: [10, 19, 32, 50, 15, 105, 14, 55, 30, 145, 115, 80, 200, 100, 150],
          },
        ],
      }

      // option = {
      //   ...apexChatData.lineChartSimple.chartOptions,
      //   series: apexChatData.lineChartSimple.series.map(item => Object.assign(item, { type: 'line' })),
      // }
      console.log('apexChatData', apexChatData)
      lineChart.setOption(option)

      window.onresize = function () {
        console.log('改变了', vm.$vuetify.theme.dark)
        lineChart.resize()
      }
    }

    onMounted(() => {
      onDrawLine()
    })
    onBeforeUnmount(() => {
      window.onresize = null
    })
    watch(
      () => vm.$vuetify.theme.dark,
      value => {
        lineChart.dispose()
        onDrawLine()
      },
      {
        // immediate: true,
        deep: true,
      },
    )

    return {
      apexChatData,
    }
  },
}
</script>

vue2版本代码实现

<!--
* @Description:告警时间趋势 折线图
* @version:1.0.0
* @Author: xxxxxx
* @Date: 2022-12-09 14:50:38
* @LastEditors: xxxxxx
* @LastEditTime: 2022-12-09 16:41:23
-->
<template>
  <div id="line-chart" :style="`height:${height};width:${width}`"></div>
</template>

<script>
import themeConfig from '@themeConfig'

const $themeColors = themeConfig.themes.light
let lineChart = {}
const splitLine = {
  show: true,
  lineStyle: {
    // 实线
    // type: 'solid',
    // width: 0.5,
    // opacity: 0.8,

    // 虚线
    type: [5, 5],
    dashOffset: 0,
    shadowBlur: 0,
  },
}
const axisLine = { show: false }
const axisTick = { show: false }
export default {
  props: {
    // 高度
    height: {
      type: [String],
      require: true,
    },

    // 宽度
    width: {
      type: String,
      default: '100%',
    },
    option: {
			type: Object,
			default: {}
		},
  },
  data() {
    return {}
  },
  watch: {
    '$vuetify.theme.dark': {
      handler(value) {
        lineChart.dispose()
        this.onDrawLine()
      },
      deep: true,
    },
  },
  mounted() {
    this.onDrawLine()
  },
  beforeDestroy() {
    window.onresize = null
  },
  methods: {
    onDrawLine() {
      lineChart = this.$echarts.init(document.getElementById('line-chart'), this.$vuetify.theme.dark ? 'dark' : 'light')
      let baseOptions = {}
      if (this.$vuetify.theme.dark) {
        baseOptions = {
          backgroundColor: themeConfig.themes.dark.backgroundColor,
          textStyle: {
            color: themeConfig.themes.dark.color,
          },
        }
      }
      const option = {
        ...baseOptions,
        color: [$themeColors.error, $themeColors.danger, $themeColors.warning, $themeColors.low],
        title: {
          // text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['严重', '高', '中', '低'],

          // 放在底部
          bottom: 0,
        },
        grid: {
          top: '5%',
          left: '2%',
          right: '3%',
          bottom: '10%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            '10/09',
            '10/10',
            '10/11',
            '10/12',
            '10/13',
            '10/14',
            '10/15',
            '10/16',
            '10/17',
            '10/18',
            '10/19',
            '10/20',
            '10/21',
            '10/22',
            '10/23',
          ],
          splitLine,

          axisLine,
          axisTick,
        },
        yAxis: {
          type: 'value',
          splitLine,
          interval: 90,
          max: 450,
          axisLine,
        },

        // 数据值
        series: [
          {
            name: '严重',
            type: 'line',
            lineStyle: {
              width: 5,
            },

            // 显示点为实圆心
            stack: 'Total',
            showSymbol: false,
            symbol: 'none',
            data: [80, 150, 180, 270, 210, 160, 160, 202, 265, 210, 270, 255, 290, 360, 375],
          },
          {
            name: '高',
            type: 'line',
            showSymbol: false,
            symbol: 'none',
            lineStyle: {
              width: 5,
            },
            data: [80, 125, 105, 130, 215, 195, 140, 160, 230, 300, 220, 170, 210, 200, 280],
          },
          {
            name: '中',
            type: 'line',
            showSymbol: false,
            symbol: 'none',
            lineStyle: {
              width: 5,
            },
            data: [80, 99, 82, 90, 115, 115, 74, 75, 130, 155, 125, 90, 140, 130, 180],
          },
          {
            name: '低',
            type: 'line',
            showSymbol: false,
            symbol: 'none',
            lineStyle: {
              width: 5,
            },
            data: [10, 19, 32, 50, 15, 105, 14, 55, 30, 145, 115, 80, 200, 100, 150],
          },
        ],
      }
      lineChart.setOption(option)

      window.onresize = function () {
        console.log('改变了', this.$vuetify.theme.dark)
        lineChart.resize()
      }
    },
  },
}
</script>
<style scoped lang='scss'>
</style>

求解

在项目中，echarts图形会不止一个，如果每次使用watch监听主题变化，代码会变得非常冗余，目前的思路是封装一个echarts公共组件，不知道有没有大佬有更好的思路，求指点

参考链接

https://echarts.apache.org/examples/zh/editor.html?c=line-stack

边中之城
关注
专栏目录
在vue中实现echarts随窗体变化
10-15
总结来说，要在Vue中实现ECharts随窗体变化，主要步骤包括： 1. 初始化ECharts实例。 2. 设置图表容器的宽度和高度，使其与窗口大小相关联。 3. 监听`window`对象的`resize`事件并在事件触发时调用`resize()`方法。 ...
echarts动态切换主题
2401_82654433的博客
04-15 223
先导入js脚本，然后一一应用，其中jquery是必须要使用的，不然没有任何效果。代码末尾再配置好动态切换。
echarts 自定义主题
weixin_43931625的博客
11-03 4122
echarts 自定义主题
「ECharts」主题这样配置才能更绚丽
imByte的博客
01-09 6355
本文主要介绍 ECharts 主题相关配置，和动画加载效果如何使用。
vue-echarts主题切换+选择面板实现
Ctrl-a-c-v44220970的博客
01-07 3753
通过实现主题选择面板，更方便的对echarts图表进行主题的切换，并且支持饼状图、折线图、柱状图等多类型echarts图表。
动态切换主题及自定义ECharts主题
2301_77281478的博客
04-15 621
以做到个性化定制。4.ECharts是一款原生js写的图表类库，ECharts为打造一款数据可视化平台提供了良好的图表支持。百度Echarts团队提供了几种风格的主题。
如何切换Echarts主题
Lucivita的博客
07-12 2338
一、打开Echarts官方文档 点击资源 -> 主题构建工具 进入到主题选择页面 二、选择默认主题 点击默认方案选择合适的主题 例如选择macarons，点击后右侧展示对应主题效果 三、应用主题 1.下载主题 点击下载主题，建议选择JSON版本，点击下面下载便会生成一个JSON文件 2.项目使用 把JSON文件放入项目的某个文件夹中，在需要使用Echarts的文件中导入。 //引入 import macarons from '../.....
Echarts主题构建工具的使用
01-18
而ECharts主题构建工具则允许我们自定义ECharts的默认样式，以满足特定项目的需求或品牌风格。 在ECharts的官方文档中，我们可以找到关于主题构建的详细教程。首先，我们需要了解ECharts的主题系统。ECharts支持...
Echarts + Web实现大屏展示效果
09-21
在Web上实现大屏展示效果，ECharts是一个非常优秀的工具，尤其在数据可视化领域，它可以将复杂的数据转化为易于理解的图形，提升信息传递的效率。 首先，我们要了解ECharts的基本使用方法。ECharts的核心在于创建一...
JAVA WEB实现echarts动态图表实例.zip
03-20
在本实例中，我们主要探讨如何使用Java Web技术与ECharts库来实现动态图表的展示。ECharts是一款基于JavaScript的数据可视化库，广泛应用于Web前端的数据图表制作，它提供了丰富的图表类型，灵活的交互功能，以及...
ECharts 数据可视化项目
09-21
该项目的核心是通过ECharts库来实现数据的图形化表示，帮助用户更直观地理解复杂的数据。`index.html`文件是项目的入口，通常包含了HTML结构，以及ECharts图表的初始化和配置代码。在这个文件中，开发者会引入...
echarts实现地图以及半圆图表
04-15
在这个主题中，我们将深入探讨如何使用ECharts实现地图和半圆图表。 一、ECharts地图可视化 ECharts地图组件允许开发者将地理数据映射到地图上，提供多种地图类型，包括中国省份地图、世界地图等，并支持自定义...
echarts 双折线图 实现 与虚线
05-15
根据提供的信息，我们可以深入探讨如何在 ECharts 中实现双折线图，并且让其中一条折线显示为虚线。此示例代码虽然未完全展示，但已经足够让我们理解其核心概念和技术要点。 ### 一、ECharts 双折线图简介 #### ...
react中实现echarts-liquidfill水滴球效果
02-22
本文详细介绍了如何在React项目中实现ECharts的Liquid Fill效果，包括安装依赖、配置图表、初始化ECharts实例等多个步骤。通过这种方式，开发者可以轻松地将动态且美观的水滴球图表嵌入到React应用中，增强数据的...
echarts饼图自动切换代码
08-28
在这个项目中，"echarts饼图自动切换代码" 说明了作者实现了饼图的动态切换功能，这通常用于展示不同类别数据的比例分布，并且能够自动在不同的数据状态间进行切换，以提供更直观的数据观察体验。 要实现饼图的自动...
echarts更换主题
itmacy的博客
12-14 1809
官网中已经了echarts除了有默认的主题外，并且内置了dark主题，还可以加载其他非内置的主题。
Echarts主题切换
m0_67187094的博客
05-17 630
Echarts 主题
ECharts动态切换及自定义主题
最新发布
2302_80385233的博客
04-15 628
【代码】ECharts动态切换及自定义主题。
vue3改变echarts主题
weixin_71199388的博客
11-29 713
6.在进行切换主题时，图表不会进行刷新，我们需要进行监听，在接收到的数据发生变化时，进行重新渲染图表。1.如果大家是将多个图表切换主题，并进行组件化，首先在app.js文件中引入主题。2.设置单选按钮，进行主题选择（这里大家可以使用自己的方式进行传值）大家可以去echarts官方文档中去查找更多的主题。节省大家时间，就不做图表的展示了，直接进入主题。3，组件传值，将我们选中的主题进行传递。作为演示，我只选择了一个组件。4，组件中接收传递的值。5.在图表初始化时设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值