echart自定义主题

不念不忘少年蓝@ 2021-07-26 15:25 652阅读 0赞

(function (root, factory) {
        if (typeof define === 'function' && define.amd) {
            // AMD. Register as an anonymous module.
            define(['exports', 'echarts'], factory);
        } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
            // CommonJS
            factory(exports, require('echarts'));
        } else {
            // Browser globals
            factory({}, root.echarts);
        }
    }(this, function (exports, echarts) {
        var log = function (msg) {
            if (typeof console !== 'undefined') {
                console && console.error && console.error(msg);
            }
        };
        if (!echarts) {
            log('ECharts is not Loaded');
            return;
        }
        echarts.registerTheme('westeros', {
            "color": [
                '#058C6B','#E6AF09','#AC4ED3','#2ec7c9','#0E6CE9',
                '#EA4B5D','#b6a2de','#5ab1ef','#ffb980','#d87a80',
                '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
                '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
                '#59678c','#c9ab00','#7eb00a','#FFBD8B','#c14089'
            ],
            "backgroundColor": "rgba(0,0,0,0)",
            "textStyle": {},
            "title": {
                "textStyle": {
                    "color": "#ffffff"
                },
                "subtextStyle": {
                    "color": "#ffffff"
                }
            },
            "line": {
                "itemStyle": {
                    "normal": {
                        "borderWidth": "2"
                    }
                },
                "lineStyle": {
                    "normal": {
                        "width": "2"
                    }
                },
                "symbolSize": "6",
                "symbol": "emptyCircle",
                "smooth": true
            },
            "radar": {
                "itemStyle": {
                    "normal": {
                        "borderWidth": "2"
                    }
                },
                "lineStyle": {
                    "normal": {
                        "width": "2"
                    }
                },
                "symbolSize": "6",
                "symbol": "emptyCircle",
                "smooth": true
            },
            "bar": {
                "itemStyle": {
                    "normal": {
                        "barBorderWidth": 0,
                        "barBorderColor": "#ccc"
                    },
                    "emphasis": {
                        "barBorderWidth": 0,
                        "barBorderColor": "#ccc"
                    }
                }
            },
            "pie": {
                "itemStyle": {
                    "normal": {
                        "borderWidth": 0,
                        "borderColor": "#ccc"
                    },
                    "emphasis": {
                        "borderWidth": 0,
                        "borderColor": "#ccc"
                    }
                }
            },
            "scatter": {
                "itemStyle": {
                    "normal": {
                        "borderWidth": 0,
                        "borderColor": "#ccc"
                    },
                    "emphasis": {
                        "borderWidth": 0,
                        "borderColor": "#ccc"
                    }
                }
            },
            "boxplot": {
                "itemStyle": {
                    "normal": {
                        "borderWidth": 0,
                        "borderColor": "#ccc"
                    },
                    "emphasis": {
                        "borderWidth": 0,
                        "borderColor": "#ccc"
                    }
                }
            },
            "parallel": {
                "itemStyle": {
                    "normal": {
                        "borderWidth": 0,
                        "borderColor": "#ccc"
                    },
                    "emphasis": {
                        "borderWidth": 0,
                        "borderColor": "#ccc"
                    }
                }
            },
            "sankey": {
                "itemStyle": {
                    "normal": {
                        "borderWidth": 0,
                        "borderColor": "#ccc"
                    },
                    "emphasis": {
                        "borderWidth": 0,
                        "borderColor": "#ccc"
                    }
                }
            },
            "funnel": {
                "itemStyle": {
                    "normal": {
                        "borderWidth": 0,
                        "borderColor": "#ccc"
                    },
                    "emphasis": {
                        "borderWidth": 0,
                        "borderColor": "#ccc"
                    }
                }
            },
            "gauge": {
                "itemStyle": {
                    "normal": {
                        "borderWidth": 0,
                        "borderColor": "#ccc"
                    },
                    "emphasis": {
                        "borderWidth": 0,
                        "borderColor": "#ccc"
                    }
                }
            },
            "candlestick": {
                "itemStyle": {
                    "normal": {
                        "color": "#edafda",
                        "color0": "transparent",
                        "borderColor": "#d680bc",
                        "borderColor0": "#8fd3e8",
                        "borderWidth": "2"
                    }
                }
            },
            "graph": {
                "itemStyle": {
                    "normal": {
                        "borderWidth": 0,
                        "borderColor": "#ccc"
                    }
                },
                "lineStyle": {
                    "normal": {
                        "width": 1,
                        "color": "#aaa"
                    }
                },
                "symbolSize": "6",
                "symbol": "emptyCircle",
                "smooth": true,
                "color": [
                    "#516b91",
                    "#59c4e6",
                    "#edafda",
                    "#93b7e3",
                    "#a5e7f0",
                    "#cbb0e3"
                ],
                "label": {
                    "normal": {
                        "textStyle": {
                            "color": "#eee"
                        }
                    }
                }
            },
            "map": {
                "itemStyle": {
                    "normal": {
                        "areaColor": "#f3f3f3",
                        "borderColor": "#516b91",
                        "borderWidth": 0.5
                    },
                    "emphasis": {
                        "areaColor": "rgba(165,231,240,1)",
                        "borderColor": "#516b91",
                        "borderWidth": 1
                    }
                },
                "label": {
                    "normal": {
                        "textStyle": {
                            "color": "#000"
                        }
                    },
                    "emphasis": {
                        "textStyle": {
                            "color": "rgb(81,107,145)"
                        }
                    }
                }
            },
            "geo": {
                "itemStyle": {
                    "normal": {
                        "areaColor": "#f3f3f3",
                        "borderColor": "#516b91",
                        "borderWidth": 0.5
                    },
                    "emphasis": {
                        "areaColor": "rgba(165,231,240,1)",
                        "borderColor": "#516b91",
                        "borderWidth": 1
                    }
                },
                "label": {
                    "normal": {
                        "textStyle": {
                            "color": "#000"
                        }
                    },
                    "emphasis": {
                        "textStyle": {
                            "color": "rgb(81,107,145)"
                        }
                    }
                }
            },
            "categoryAxis": {
                "axisLine": {
                    "show": true,
                    "lineStyle": {
                        "color": "#cccccc"
                    }
                },
                "axisTick": {
                    "show": false,
                    "lineStyle": {
                        "color": "#333"
                    }
                },
                "axisLabel": {
                    "show": true,
                    "textStyle": {
                        "color": "#999999"
                    }
                },
                "splitLine": {
                    "show": true,
                    "lineStyle": {
                        "color": [
                            "#eeeeee"
                        ]
                    }
                },
                "splitArea": {
                    "show": false,
                    "areaStyle": {
                        "color": [
                            "rgba(250,250,250,0.05)",
                            "rgba(200,200,200,0.02)"
                        ]
                    }
                }
            },
            "valueAxis": {
                "axisLine": {
                    "show": true,
                    "lineStyle": {
                        "color": "#cccccc"
                    }
                },
                "axisTick": {
                    "show": false,
                    "lineStyle": {
                        "color": "#333"
                    }
                },
                "axisLabel": {
                    "show": true,
                    "textStyle": {
                        "color": "#999999"
                    }
                },
                "splitLine": {
                    "show": true,
                    "lineStyle": {
                        "color": [
                            "#eeeeee"
                        ]
                    }
                },
                "splitArea": {
                    "show": false,
                    "areaStyle": {
                        "color": [
                            "rgba(250,250,250,0.05)",
                            "rgba(200,200,200,0.02)"
                        ]
                    }
                }
            },
            "logAxis": {
                "axisLine": {
                    "show": true,
                    "lineStyle": {
                        "color": "#cccccc"
                    }
                },
                "axisTick": {
                    "show": false,
                    "lineStyle": {
                        "color": "#333"
                    }
                },
                "axisLabel": {
                    "show": true,
                    "textStyle": {
                        "color": "#999999"
                    }
                },
                "splitLine": {
                    "show": true,
                    "lineStyle": {
                        "color": [
                            "#eeeeee"
                        ]
                    }
                },
                "splitArea": {
                    "show": false,
                    "areaStyle": {
                        "color": [
                            "rgba(250,250,250,0.05)",
                            "rgba(200,200,200,0.02)"
                        ]
                    }
                }
            },
            "timeAxis": {
                "axisLine": {
                    "show": true,
                    "lineStyle": {
                        "color": "#cccccc"
                    }
                },
                "axisTick": {
                    "show": false,
                    "lineStyle": {
                        "color": "#333"
                    }
                },
                "axisLabel": {
                    "show": true,
                    "textStyle": {
                        "color": "#999999"
                    }
                },
                "splitLine": {
                    "show": true,
                    "lineStyle": {
                        "color": [
                            "#eeeeee"
                        ]
                    }
                },
                "splitArea": {
                    "show": false,
                    "areaStyle": {
                        "color": [
                            "rgba(250,250,250,0.05)",
                            "rgba(200,200,200,0.02)"
                        ]
                    }
                }
            },
            "toolbox": {
                "iconStyle": {
                    "normal": {
                        "borderColor": "#999"
                    },
                    "emphasis": {
                        "borderColor": "#666"
                    }
                }
            },
            "legend": {
                "textStyle": {
                    "color": "#999999"
                }
            },
            "tooltip": {
                "axisPointer": {
                    "lineStyle": {
                        "color": "#ccc",
                        "width": 1
                    },
                    "crossStyle": {
                        "color": "#ccc",
                        "width": 1
                    }
                }
            },
            "timeline": {
                "lineStyle": {
                    "color": "#8fd3e8",
                    "width": 1
                },
                "itemStyle": {
                    "normal": {
                        "color": "#8fd3e8",
                        "borderWidth": 1
                    },
                    "emphasis": {
                        "color": "#8fd3e8"
                    }
                },
                "controlStyle": {
                    "normal": {
                        "color": "#8fd3e8",
                        "borderColor": "#8fd3e8",
                        "borderWidth": 0.5
                    },
                    "emphasis": {
                        "color": "#8fd3e8",
                        "borderColor": "#8fd3e8",
                        "borderWidth": 0.5
                    }
                },
                "checkpointStyle": {
                    "color": "#8fd3e8",
                    "borderColor": "rgba(138,124,168,0.37)"
                },
                "label": {
                    "normal": {
                        "textStyle": {
                            "color": "#8fd3e8"
                        }
                    },
                    "emphasis": {
                        "textStyle": {
                            "color": "#8fd3e8"
                        }
                    }
                }
            },
            "visualMap": {
                "color": [
                    "#516b91",
                    "#59c4e6",
                    "#a5e7f0"
                ]
            },
            "dataZoom": {
                "backgroundColor": "rgba(0,0,0,0)",
                "dataBackgroundColor": "rgba(255,255,255,0.3)",
                "fillerColor": "rgba(167,183,204,0.4)",
                "handleColor": "#a7b7cc",
                "handleSize": "100%",
                "textStyle": {
                    "color": "#333"
                }
            },
            "markPoint": {
                "label": {
                    "normal": {
                        "textStyle": {
                            "color": "#eee"
                        }
                    },
                    "emphasis": {
                        "textStyle": {
                            "color": "#eee"
                        }
                    }
                }
            }
        });
    }));

**使用：**

var myChart_modal = echarts.getInstanceByDom(document.getElementById('chart_modal'), 'westeros');   
    if (myChart_modal === undefined) {
      	 myChart_modal = echarts.init(document.getElementById('chart_modal'), 'westeros');  
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，652人围观）

还没有评论，来说两句吧...

相关阅读

相关 element自定义主题色

修改element的主题色，提供以下两种方法 1.在项目中改变 SCSS 变量 Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了

忘是亡心i/ 2023年02月10日 11:29/ 0 赞/ 225 阅读

相关 elementUI自定义主题颜色

1、官方在线主题编辑器，下载自定义主题：[在线主题编辑器][Link 1] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk

柔光的暖阳◎/ 2023年01月22日 05:00/ 0 赞/ 256 阅读

相关 echarts自定义样式

一、柱状图x、y轴：（1）实现隐藏x轴，y轴，刻度线，网格 yAxis: { show: true, type: 'value',

迷南。/ 2022年12月15日 03:39/ 0 赞/ 282 阅读

相关 echarts自定义地图

先看看效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L

亦凉/ 2022年10月08日 15:19/ 0 赞/ 247 阅读

相关 Jupyter Notebook 自定义主题

1. 命令 jt -t solarizedl -f fira -fs 14 -cellw 90% -ofs 12 -dfs 12 -T -N jt -t g

冷不防/ 2022年09月04日 11:00/ 0 赞/ 21 阅读

相关 Echarts - 引入自定义主题方案（Vue配置示例）

前言 > 很多时候，我们不会直接使用 `Echarts` 默认的样式，而是自家设计师有一套主题样式。通过每个配置项手动去改样式，显然不是明智之举，不仅代码冗余，还浪费

秒速五厘米/ 2022年09月01日 12:58/ 0 赞/ 367 阅读

相关 [Android记录]自定义主题

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] 在AndroidManifest.xml中，可以定义整个app的主题，也可以定义单个ac

比眉伴天荒/ 2022年01月15日 05:05/ 0 赞/ 347 阅读

相关 echart自定义tooltip

给echart的tooltip数据提示部分增加单位 tooltip: { trigger: 'axis', axisPoi

青旅半醒/ 2021年07月26日 17:41/ 0 赞/ 787 阅读

相关 echart自定义主题

(function (root, factory) { if (typeof define === 'function' && define.amd)

不念不忘少年蓝@/ 2021年07月26日 15:25/ 0 赞/ 653 阅读

相关 Struts自定义主题

一视图 <%@ page contentType="text/html; charset=GBK" language="java" errorPage="" %>

我就是我/ 2021年07月24日 21:58/ 0 赞/ 517 阅读