配置样式
这里介绍两种方式,小伙伴们看个人情况选择
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两个主题,分别对应下面两张图