import * as echarts from "echarts";
且echart自带明亮和黑暗主题,可以一句代码进行设置
var chart = echarts.init(dom, 'light');
var chart = echarts.init(dom, 'dark');
还可以使用主题编辑器根据需要修改图标的样式主题颜色
主题编辑器 - Apache ECharts
自定义好主题之后可以导出主题代码保存为一个js文件,引入目标页面在代码中使用该主题
vue结合echart主题编辑器的使用方法如下:
示例:原本我写的示例代码里默认样式长这样
首先我们去主题编辑器里选择好一个主题,下载它的json版本代码
点击左上角的【下载主题】
复制,点击复制后官方文档还贴心的给出了提示【已复制到剪贴板,请保持至*.json文件】
那么我们就到vue中创建一个js文件把我们复制的代码放进去备用
别忘了js文件末尾要记得声明
接着需要使用该主题的vue文件中导入主题
第一步:引入js文件
import theme from './echarts_test'
第二步: 注册主题
ECharts.registerTheme('chalk',chalk);
第三步:给init传入第二个参数,使用主题
this.myChart = ECharts.init(document.getElementById('main'),'chalk')
实现效果:
变成了⬇⬇⬇⬇⬇⬇⬇⬇
最后再贴个代码吧
主题配置:
//将下载的主题json文件放入const theme ={}中
const theme = {
"color": [
"#516b91",
"#59c4e6",
"#edafda",
"#93b7e3",
"#a5e7f0",
"#cbb0e3"
"backgroundColor": "rgba(0,0,0,0)",
"textStyle": {},
"title": {
"textStyle": {
"color": "#516b91"
"subtextStyle": {
"color": "#93b7e3"
"line": {
"itemStyle": {
"borderWidth": "2"
"lineStyle": {
"width": "2"
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": true
"radar": {
"itemStyle": {
"borderWidth": "2"
"lineStyle": {
"width": "2"
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": true
"bar": {
"itemStyle": {
"barBorderWidth": 0,
"barBorderColor": "#ccc"
"pie": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
"scatter": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
"boxplot": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
"parallel": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
"sankey": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
"funnel": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
"gauge": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
"candlestick": {
"itemStyle": {
"color": "#edafda",
"color0": "transparent",
"borderColor": "#d680bc",
"borderColor0": "#8fd3e8",
"borderWidth": "2"
"graph": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
"lineStyle": {
"width": 1,
"color": "#aaaaaa"
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": true,
"color": [
"#516b91",
"#59c4e6",
"#edafda",
"#93b7e3",
"#a5e7f0",
"#cbb0e3"
"label": {
"color": "#eeeeee"
"map": {
"itemStyle": {
"areaColor": "#f3f3f3",
"borderColor": "#516b91",
"borderWidth": 0.5
"label": {
"color": "#000"
"emphasis": {
"itemStyle": {
"areaColor": "#a5e7f0",
"borderColor": "#516b91",
"borderWidth": 1
"label": {
"color": "#516b91"
"geo": {
"itemStyle": {
"areaColor": "#f3f3f3",
"borderColor": "#516b91",
"borderWidth": 0.5
"label": {
"color": "#000"
"emphasis": {
"itemStyle": {
"areaColor": "#a5e7f0",
"borderColor": "#516b91",
"borderWidth": 1
"label": {
"color": "#516b91"
"categoryAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
"axisLabel": {
"show": true,
"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,
"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,
"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,
"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": {
"borderColor": "#999999"
"emphasis": {
"iconStyle": {
"borderColor": "#666666"
"legend": {
"textStyle": {
"color": "#999999"
"tooltip": {
"axisPointer": {
"lineStyle": {
"color": "#cccccc",
"width": 1
"crossStyle": {
"color": "#cccccc",
"width": 1
"timeline": {
"lineStyle": {
"color": "#8fd3e8",
"width": 1
"itemStyle": {
"color": "#8fd3e8",
"borderWidth": 1
"controlStyle": {
"color": "#8fd3e8",
"borderColor": "#8fd3e8",
"borderWidth": 0.5
"checkpointStyle": {
"color": "#8fd3e8",
"borderColor": "#8a7ca8"
"label": {
"color": "#8fd3e8"
"emphasis": {
"itemStyle": {
"color": "#8fd3e8"
"controlStyle": {
"color": "#8fd3e8",
"borderColor": "#8fd3e8",
"borderWidth": 0.5
"label": {
"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": {
"color": "#eeeeee"
"emphasis": {
"label": {
"color": "#eeeeee"
//使用export default导出上面声明的主题
export default theme
可视化组件实现vue页面:
<template>
class="echart"
id="mychart"
:style="{ float: 'left', width: '100%', height: '400px' }"
></div>
</template>
<script>
import * as echarts from "echarts";
import theme from './echarts_test'
export default {
data() {
return {
name: "张雪",
xData: ["2020-02", "2020-03", "2020-04", "2020-05"],
yData: [30, 132, 80, 134]
mounted() {
this.initEcharts();
methods: {
initEcharts() {
var option = {
series : [
name: '访问来源',
type: 'pie',
radius: '55%',
roseType: 'angle',
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
echarts.registerTheme('theme',theme);
const myChart = echarts.init(document.getElementById('mychart'),'theme');
myChart.setOption(option);
window.addEventListener("resize", () => {
myChart.resize();
</script>
STATICHIT静砸