echarts 全局换肤 echarts根据系统颜色换肤,echarts自定义icon,echarts发光效果

官网定义颜色网址
效果

代码

<template>
  <div :id="id"></div>
</template>
<script>
import echarts from 'echarts';
import theme from './theme.json'; // 定义颜色的json
import { mapGetters } from 'vuex';
export default {
  props: ['id', 'pieData'],
  data() {
    return {
      charts: null,
      pieNames: [],
      imageUrl: require('@/assets/chart/chartalarm.png'), // icon图片
      color: [
        'rgba(226, 59, 65,1)',
        'rgba(201, 20, 34, 1)',
        'rgba(185, 40, 41, 1)',
        'rgba(253, 173, 56, 1)',
        'rgba(253, 195, 68, 1)',
        'rgba(251, 105, 164, 1)',
      ],
    };
  },
  watch: {
    pieData(val) {
      this.pieData.forEach((ele) => {
        this.pieNames.push(ele.name);
      });
      if (val.length > 0) {
        this.$nextTick(() => {
          if (this.theme === 'white-theme') {
            this.imageUrl = require('@/assets/chart/chartalarm2.png');
            this.initChart(this.id, theme.whitetheme);
          } else {
            this.imageUrl = require('@/assets/chart/chartalarm.png');
            this.initChart(this.id, theme.blacktheme);
          }
        });
      }
    },
    theme: {
      handler(val) {
        // 每次切换先销毁echarts实例,重新绘制echarts
        this.charts.dispose();
        if (val === 'white-theme') {
          this.$nextTick(() => {
            this.imageUrl = require('@/assets/chart/chartalarm2.png');
            this.initChart(this.id, theme.whitetheme);
          });
        } else {
          this.$nextTick(() => {
            this.imageUrl = require('@/assets/chart/chartalarm.png');
            this.initChart(this.id, theme.blacktheme);
          });
        }
      },
    },
  },
  computed: {
    ...mapGetters(['theme']),
  },
  methods: {
    initChart(id, themeType) {
      // 注册主题
      echarts.registerTheme('slef-theme', themeType);
      // 创建实例
      this.charts = echarts.init(document.getElementById(id), 'slef-theme');
      let option = {
        // animation: true, // 是否开启动画 默认为true
        // animationDuration: 500, // 动画时长 可以接受 回调函数
        // animationEasing: 'cubicInOut', // 缓动动画 动画样式方法
        // animationThreshold: 8, // 动画阈值 data 里面的元素多余8个停止动画
        color: this.color, // 色值
        // 定义icon
        graphic: {
          elements: [
            {
              type: 'image',
              style: {
                image: this.imageUrl,
                width: 130,
                height: 130,
              },
              left: 'center',
              top: 'center',
            },
          ],
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
          position: 'inside',
        },
        legend: {
          bottom: 'bottom',
          data: this.pieNames,
        },
        series: [
          {
            name: '报警分析',
            type: 'pie',
            radius: ['43%', '55%'],
            data: this.createChartData(),
          },
        ],
      };
      // true 可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件。
      this.charts.setOption(option, true);
    },
    // 创建Ecahrts数据,定义颜色
    createChartData() {
      let pieChartData = this.pieData;
      let data = [];
      for (var i = 0; i < pieChartData.length; i++) {
        data.push({
          value: pieChartData[i].value,
          name: pieChartData[i].name,
          itemStyle: {
            normal: {
              // borderWidth: 5,
              shadowBlur: 30,
              // borderColor: this.color[i],
              shadowColor: this.color[i],
            },
          },
        });
      }
      return data;
    },
  },
};
</script>

theme.json 文件

{
    "blacktheme": {
        "legend": {
            "textStyle": {
                "color": "#fff"
            }
        }
    },
    "whitetheme": {
        "legend": {
            "textStyle": {
                "color": "#262626"
            }
        }
    }
}