如何切换echarts主题颜色

Question

我在 angular 8 应用程序中使用 echarts 库。

这是我的主题对象。

let customTheme = {
      version: 1,
      themeName: "customed",
      theme: {
        seriesCnt: 3,
        backgroundColor: "rgba(255,255,255,0)",
        title: {
          textStyle: {
            fontWeight: "lighter",
            color: "#008acd"
          }
        },
        color: [
          "#3da4e0",
          "#779ff1",
          "#b493f0",
          "#eb84db",
          "#ff76b4",
          "#ff7783",
        ],
        borderColor: "#ccc",
        dataZoom: {
          dataBackgroundColor: "#efefff79",
          dataColor: "rgba(47,69,84,0.3)",
          fillerColor: "#edf2f979",
          handleColor: "#008acd79",
          handleWidth: "100"
        },
        categoryAxis: {
          axisLabel: {
            color: "#ccc"
          },
          axisLine: {
            lineStyle: {
              color: "#008acd"
            }
          },
          splitLine: {
            lineStyle: {
              color: ["#eee"]
            }
          }
        },
        valueAxis: {
          axisLabel: {
            color: "#333"
          }
        }
      }
    };

this.myChart = echarts.init(this.el.nativeElement, customTheme.theme);

我尝试使用 observable ，它确实不行。更新主题。

Answer 1

Echarts 的主题只是普通的 javascript 对象，可以像使用 SetOption 的配置一样传递给实例。只是当你用主题初始化实例时，Echarts 通过名称在当前命名空间中找到它（在你的情况下找不到并用作后备默认主题）。

你的代码必须是这样的：

<script src="echarts.js"></script>
<!-- import vintage theme -->
<script src="theme/vintage.js"></script>
<script>
// The second parameter is the name of the theme imported
var chart = echarts.init(document.getElementById('main'), 'vintage');
chart.setOption({
    ...
});
</script>

Answer 2

var myChart = echarts.init(document.getElementById('chart'));

var chartData = {
  series: [{
    type: 'bar',
    data: [20, 30, 40, 50, 60],
    barCategoryGap: '5%'
  }]
};

var initOption = {
  tooltip: {},
  grid: {
    left: 50,
    right: 0,
    top: 20,
    bottom: 50,
  },
  xAxis: {
    type: 'category',
    data: ['#1', '#2', '#3', '#4', '#5']
  },
  yAxis: {
    max: 80
  },
  dataZoom: [{
      show: true,
      type: 'slider',
      bottom: 0,
      right: 5,
      start: 0,
      end: 100
    },
    {
      type: 'inside',
      start: 0,
      end: 100
    },
  ]
};

echarts.registerTheme('purple-passion', {
  "color": [
    "#9b8bba",
    "#e098c7",
    "#8fd3e8",
    "#71669e",
    "#cc70af",
    "#7cb4cc"
  ],
  "backgroundColor": "rgba(91,92,110,1)",
  "textStyle": {},
  "title": {
    "textStyle": {
      "color": "#ffffff"
    },
    "subtextStyle": {
      "color": "#cccccc"
    }
  },
  "line": {
    "itemStyle": {
      "normal": {
        "borderWidth": "2"
      }
    },
    "lineStyle": {
      "normal": {
        "width": "3"
      }
    },
    "symbolSize": "7",
    "symbol": "circle",
    "smooth": true
  },
  "radar": {
    "itemStyle": {
      "normal": {
        "borderWidth": "2"
      }
    },
    "lineStyle": {
      "normal": {
        "width": "3"
      }
    },
    "symbolSize": "7",
    "symbol": "circle",
    "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": "#e098c7",
        "color0": "transparent",
        "borderColor": "#e098c7",
        "borderColor0": "#8fd3e8",
        "borderWidth": "2"
      }
    }
  },
  "graph": {
    "itemStyle": {
      "normal": {
        "borderWidth": 0,
        "borderColor": "#ccc"
      }
    },
    "lineStyle": {
      "normal": {
        "width": 1,
        "color": "#aaaaaa"
      }
    },
    "symbolSize": "7",
    "symbol": "circle",
    "smooth": true,
    "color": [
      "#9b8bba",
      "#e098c7",
      "#8fd3e8",
      "#71669e",
      "#cc70af",
      "#7cb4cc"
    ],
    "label": {
      "normal": {
        "textStyle": {
          "color": "#eeeeee"
        }
      }
    }
  },
  "map": {
    "itemStyle": {
      "normal": {
        "areaColor": "#eee",
        "borderColor": "#444",
        "borderWidth": 0.5
      },
      "emphasis": {
        "areaColor": "#e098c7",
        "borderColor": "#444",
        "borderWidth": 1
      }
    },
    "label": {
      "normal": {
        "textStyle": {
          "color": "#000"
        }
      },
      "emphasis": {
        "textStyle": {
          "color": "#ffffff"
        }
      }
    }
  },
  "geo": {
    "itemStyle": {
      "normal": {
        "areaColor": "#eee",
        "borderColor": "#444",
        "borderWidth": 0.5
      },
      "emphasis": {
        "areaColor": "#e098c7",
        "borderColor": "#444",
        "borderWidth": 1
      }
    },
    "label": {
      "normal": {
        "textStyle": {
          "color": "#000"
        }
      },
      "emphasis": {
        "textStyle": {
          "color": "#ffffff"
        }
      }
    }
  },
  "categoryAxis": {
    "axisLine": {
      "show": true,
      "lineStyle": {
        "color": "#cccccc"
      }
    },
    "axisTick": {
      "show": false,
      "lineStyle": {
        "color": "#333"
      }
    },
    "axisLabel": {
      "show": true,
      "textStyle": {
        "color": "#cccccc"
      }
    },
    "splitLine": {
      "show": false,
      "lineStyle": {
        "color": [
          "#eeeeee",
          "#333333"
        ]
      }
    },
    "splitArea": {
      "show": true,
      "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": "#cccccc"
      }
    },
    "splitLine": {
      "show": false,
      "lineStyle": {
        "color": [
          "#eeeeee",
          "#333333"
        ]
      }
    },
    "splitArea": {
      "show": true,
      "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": "#cccccc"
      }
    },
    "splitLine": {
      "show": false,
      "lineStyle": {
        "color": [
          "#eeeeee",
          "#333333"
        ]
      }
    },
    "splitArea": {
      "show": true,
      "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": "#cccccc"
      }
    },
    "splitLine": {
      "show": false,
      "lineStyle": {
        "color": [
          "#eeeeee",
          "#333333"
        ]
      }
    },
    "splitArea": {
      "show": true,
      "areaStyle": {
        "color": [
          "rgba(250,250,250,0.05)",
          "rgba(200,200,200,0.02)"
        ]
      }
    }
  },
  "toolbox": {
    "iconStyle": {
      "normal": {
        "borderColor": "#999999"
      },
      "emphasis": {
        "borderColor": "#666666"
      }
    }
  },
  "legend": {
    "textStyle": {
      "color": "#cccccc"
    }
  },
  "tooltip": {
    "axisPointer": {
      "lineStyle": {
        "color": "#cccccc",
        "width": 1
      },
      "crossStyle": {
        "color": "#cccccc",
        "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": [
      "#8a7ca8",
      "#e098c7",
      "#cceffa"
    ]
  },
  "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": "#333333"
    }
  },
  "markPoint": {
    "label": {
      "normal": {
        "textStyle": {
          "color": "#eeeeee"
        }
      },
      "emphasis": {
        "textStyle": {
          "color": "#eeeeee"
        }
      }
    }
  }
});
echarts.registerTheme('macarons', {
  "color": [
    "#2ec7c9",
    "#b6a2de",
    "#5ab1ef",
    "#ffb980",
    "#d87a80",
    "#8d98b3",
    "#e5cf0d",
    "#97b552",
    "#95706d",
    "#dc69aa",
    "#07a2a4",
    "#9a7fd1",
    "#588dd5",
    "#f5994e",
    "#c05050",
    "#59678c",
    "#c9ab00",
    "#7eb00a",
    "#6f5553",
    "#c14089"
  ],
  "backgroundColor": "rgba(0,0,0,0)",
  "textStyle": {},
  "title": {
    "textStyle": {
      "color": "#008acd"
    },
    "subtextStyle": {
      "color": "#aaaaaa"
    }
  },
  "line": {
    "itemStyle": {
      "normal": {
        "borderWidth": 1
      }
    },
    "lineStyle": {
      "normal": {
        "width": 2
      }
    },
    "symbolSize": 3,
    "symbol": "emptyCircle",
    "smooth": true
  },
  "radar": {
    "itemStyle": {
      "normal": {
        "borderWidth": 1
      }
    },
    "lineStyle": {
      "normal": {
        "width": 2
      }
    },
    "symbolSize": 3,
    "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": "#d87a80",
        "color0": "#2ec7c9",
        "borderColor": "#d87a80",
        "borderColor0": "#2ec7c9",
        "borderWidth": 1
      }
    }
  },
  "graph": {
    "itemStyle": {
      "normal": {
        "borderWidth": 0,
        "borderColor": "#ccc"
      }
    },
    "lineStyle": {
      "normal": {
        "width": 1,
        "color": "#aaaaaa"
      }
    },
    "symbolSize": 3,
    "symbol": "emptyCircle",
    "smooth": true,
    "color": [
      "#2ec7c9",
      "#b6a2de",
      "#5ab1ef",
      "#ffb980",
      "#d87a80",
      "#8d98b3",
      "#e5cf0d",
      "#97b552",
      "#95706d",
      "#dc69aa",
      "#07a2a4",
      "#9a7fd1",
      "#588dd5",
      "#f5994e",
      "#c05050",
      "#59678c",
      "#c9ab00",
      "#7eb00a",
      "#6f5553",
      "#c14089"
    ],
    "label": {
      "normal": {
        "textStyle": {
          "color": "#eeeeee"
        }
      }
    }
  },
  "map": {
    "itemStyle": {
      "normal": {
        "areaColor": "#dddddd",
        "borderColor": "#eeeeee",
        "borderWidth": 0.5
      },
      "emphasis": {
        "areaColor": "rgba(254,153,78,1)",
        "borderColor": "#444",
        "borderWidth": 1
      }
    },
    "label": {
      "normal": {
        "textStyle": {
          "color": "#d87a80"
        }
      },
      "emphasis": {
        "textStyle": {
          "color": "rgb(100,0,0)"
        }
      }
    }
  },
  "geo": {
    "itemStyle": {
      "normal": {
        "areaColor": "#dddddd",
        "borderColor": "#eeeeee",
        "borderWidth": 0.5
      },
      "emphasis": {
        "areaColor": "rgba(254,153,78,1)",
        "borderColor": "#444",
        "borderWidth": 1
      }
    },
    "label": {
      "normal": {
        "textStyle": {
          "color": "#d87a80"
        }
      },
      "emphasis": {
        "textStyle": {
          "color": "rgb(100,0,0)"
        }
      }
    }
  },
  "categoryAxis": {
    "axisLine": {
      "show": true,
      "lineStyle": {
        "color": "#008acd"
      }
    },
    "axisTick": {
      "show": true,
      "lineStyle": {
        "color": "#333"
      }
    },
    "axisLabel": {
      "show": true,
      "textStyle": {
        "color": "#333"
      }
    },
    "splitLine": {
      "show": false,
      "lineStyle": {
        "color": [
          "#eee"
        ]
      }
    },
    "splitArea": {
      "show": false,
      "areaStyle": {
        "color": [
          "rgba(250,250,250,0.3)",
          "rgba(200,200,200,0.3)"
        ]
      }
    }
  },
  "valueAxis": {
    "axisLine": {
      "show": true,
      "lineStyle": {
        "color": "#008acd"
      }
    },
    "axisTick": {
      "show": true,
      "lineStyle": {
        "color": "#333"
      }
    },
    "axisLabel": {
      "show": true,
      "textStyle": {
        "color": "#333"
      }
    },
    "splitLine": {
      "show": true,
      "lineStyle": {
        "color": [
          "#eee"
        ]
      }
    },
    "splitArea": {
      "show": true,
      "areaStyle": {
        "color": [
          "rgba(250,250,250,0.3)",
          "rgba(200,200,200,0.3)"
        ]
      }
    }
  },
  "logAxis": {
    "axisLine": {
      "show": true,
      "lineStyle": {
        "color": "#008acd"
      }
    },
    "axisTick": {
      "show": true,
      "lineStyle": {
        "color": "#333"
      }
    },
    "axisLabel": {
      "show": true,
      "textStyle": {
        "color": "#333"
      }
    },
    "splitLine": {
      "show": true,
      "lineStyle": {
        "color": [
          "#eee"
        ]
      }
    },
    "splitArea": {
      "show": true,
      "areaStyle": {
        "color": [
          "rgba(250,250,250,0.3)",
          "rgba(200,200,200,0.3)"
        ]
      }
    }
  },
  "timeAxis": {
    "axisLine": {
      "show": true,
      "lineStyle": {
        "color": "#008acd"
      }
    },
    "axisTick": {
      "show": true,
      "lineStyle": {
        "color": "#333"
      }
    },
    "axisLabel": {
      "show": true,
      "textStyle": {
        "color": "#333"
      }
    },
    "splitLine": {
      "show": true,
      "lineStyle": {
        "color": [
          "#eee"
        ]
      }
    },
    "splitArea": {
      "show": false,
      "areaStyle": {
        "color": [
          "rgba(250,250,250,0.3)",
          "rgba(200,200,200,0.3)"
        ]
      }
    }
  },
  "toolbox": {
    "iconStyle": {
      "normal": {
        "borderColor": "#2ec7c9"
      },
      "emphasis": {
        "borderColor": "#18a4a6"
      }
    }
  },
  "legend": {
    "textStyle": {
      "color": "#333333"
    }
  },
  "tooltip": {
    "axisPointer": {
      "lineStyle": {
        "color": "#008acd",
        "width": "1"
      },
      "crossStyle": {
        "color": "#008acd",
        "width": "1"
      }
    }
  },
  "timeline": {
    "lineStyle": {
      "color": "#008acd",
      "width": 1
    },
    "itemStyle": {
      "normal": {
        "color": "#008acd",
        "borderWidth": 1
      },
      "emphasis": {
        "color": "#a9334c"
      }
    },
    "controlStyle": {
      "normal": {
        "color": "#008acd",
        "borderColor": "#008acd",
        "borderWidth": 0.5
      },
      "emphasis": {
        "color": "#008acd",
        "borderColor": "#008acd",
        "borderWidth": 0.5
      }
    },
    "checkpointStyle": {
      "color": "#2ec7c9",
      "borderColor": "rgba(46,199,201,0.4)"
    },
    "label": {
      "normal": {
        "textStyle": {
          "color": "#008acd"
        }
      },
      "emphasis": {
        "textStyle": {
          "color": "#008acd"
        }
      }
    }
  },
  "visualMap": {
    "color": [
      "#5ab1ef",
      "#e0ffff"
    ]
  },
  "dataZoom": {
    "backgroundColor": "rgba(47,69,84,0)",
    "dataBackgroundColor": "rgba(239,239,255,1)",
    "fillerColor": "rgba(182,162,222,0.2)",
    "handleColor": "#008acd",
    "handleSize": "100%",
    "textStyle": {
      "color": "#333333"
    }
  },
  "markPoint": {
    "label": {
      "normal": {
        "textStyle": {
          "color": "#eeeeee"
        }
      },
      "emphasis": {
        "textStyle": {
          "color": "#eeeeee"
        }
      }
    }
  }
});

myChart.setOption(initOption);
myChart.setOption(chartData);

document.body.addEventListener('click', function(e) {
  if (e.target.nodeName === 'BUTTON') {
    e.preventDefault();
    myChart.dispose();
    myChart = echarts.init(document.getElementById('chart'), e.target.id);
    myChart.setOption(initOption);
    myChart.setOption(chartData);
  }
});

#container {
  text-align: right;
  width: 600px;
  margin: 50px;
}

#chart {
  margin-top: 20px;
}

<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
<div id="container">
  <button id="macarons" type="button">Apply Macarons theme</button>
  <button id="purple-passion" type="button">Apply Purple-passion theme</button>
  <div id="chart" style="width:600px;height:400px"></div>
</div>

如何切换echarts主题颜色

How to toggle echarts theme color

echarts

angular