Vue中ECharts配置和使用自定义主题（超简单，包教会）

配置样式

这里介绍两种方式，小伙伴们看个人情况选择

1.采用最简单的方式

配置的样式参考Echarts官网 点我直达Echarts官网，

// theme.json
{
    
    
"default": {
    
    
		// 此处调色盘给定了一组颜色，对于未指定颜色的图形、系列等会自动从其中选择颜色
		"color": ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83'],
        "geo": {
    
    
            "itemStyle": {
    
    
                "areaColor": "#f3f3f3",
                "borderColor": "#999999",
                "borderWidth": 0.5,
                "normal": {
    
    
                    "areaColor": "#3a7fd5",
                    "borderColor": "#0a53e9",
                    "shadowColor": "#092f8f",
                    "shadowBlur": 20
                },
                "emphasis": {
    
    
                    "areaColor": "#0a2dae"
                }
            },
            "label": {
    
    ...}
        },
        "scatter": {
    
    ...}
    },
}

好，我们已经在theme.json中配置了一个名为default的主题

2、采用最直观的方式——官方主题配置工具

也可以使用官网的主题配置工具点我直达主题配置工具

官方提供的十二套主题

当然如果这十二套满足不了你，那么可以使用下面这个自定义模块

使用自定义配置模块

怎么用呢？看个示例

下载主题

配置好相关样式之后，我们可以在如下窗口进行主题下载，然后按照官方提示操作即可

注册

然后我们在组件中使用如下的方式进行注册

// 引入主题
import theme from 'theme.json'

// 使用echarts
import echarts from 'echarts'
echarts.registerTheme('default',theme)

使用

接下来就是给我们的组件换上皮肤

//使用echarts
<div id="test">
	...
</div>
let myChart = echarts.init(document.getElementById("test"),"default");
let option = {
    
    ...}
myChart.setOption(option);

完整示例

theme.vue

<template>
  <div id="main" style="width: 600px;height:400px;"></div>
</template>
<script>
import theme from "../assets/westeros.json";
import * as echarts from "echarts";
export default {
    
    
  mounted() {
    
    
    var obj = theme.other;
    echarts.registerTheme("slef-theme", obj);
    var myChart = echarts.init(document.getElementById("main"), "slef-theme"); // 使用dark 、light或无第二参数
    myChart.setOption({
    
    
      series: [
        {
    
    
          name: "访问来源",
          type: "pie", // 设置图表类型为饼图
          radius: "60%", // 饼图的半径
          data: [
            // 数据数组，name 为数据项名称，value 为数据项值
            {
    
     value: 235, name: "视频广告" },
            {
    
     value: 274, name: "联盟广告" },
            {
    
     value: 310, name: "邮件营销" },
            {
    
     value: 335, name: "直接访问" },
            {
    
     value: 400, name: "搜索引擎" },
          ],
        },
      ],
    });
  },
};
</script>
<style></style>

theme.json

{
    
    
    "default": {
    
    
        "color": [
            "#aaaaff",
            "#eec3aa",
            "#ffd9a5",
            "#dddeff",
            "#bbccff"
        ],
        "backgroundColor": "#eeeeee",
        "label": {
    
    
            "color": "#798dbc"
        }
    },
    "other": {
    
    
        "color": [
            "#3fb1e3",
            "#6be6c1",
            "#626c91",
            "#a0a7e6",
            "#c4ebad",
            "#96dee8"
        ],
        "backgroundColor": "#eeffdd",
        "pie": {
    
    
            "label": {
    
    
                "color": "#dd1111"
            },
            "emphasis": {
    
    
                "itemStyle": {
    
    
                    "color": "#beebee"
                },
                "label": {
    
    
                    "color": "#438dfe"
                }
            }
        }
    }
}

分别配置了default和other两个主题，分别对应下面两张图