通过vue使用ECharts主题编辑器中的颜色主题

最新推荐文章于 2024-04-14 02:07:49 发布
最新推荐文章于 2024-04-14 02:07:49 发布
阅读量1.3k 收藏 4
点赞数 3
分类专栏： vue echarts 文章标签： vue echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43157849/article/details/102673085
版权

通过vue使用ECharts主题编辑器中的颜色主题


前往 ECharts主题编辑器官网，选择自己需要的主题，这里我选择的主题名称是 chalk
在这里插入图片描述
下载 JSON版本
在这里插入图片描述
接下来转到vue，这是在尚未使用主题样式情况下的页面效果
在这里插入图片描述
那么如何使用主题编辑器中的颜色主题呢？
首先新建chalk.js，内容如下 

//将刚刚下载得到的chalk.json中的内容复制到chalk对象中
const chalk = {
    "color": [
        "#fc97af",
        "#87f7cf",
        "#f7f494",
        "#72ccff",
        "#f7c5a0",
        "#d4a4eb",
        "#d2f5a6",
        "#76f2f2"
    ],
    "backgroundColor": "rgba(41,52,65,1)",
    "textStyle": {},
    "title": {
        "textStyle": {
            "color": "#ffffff"
        },
        "subtextStyle": {
            "color": "#dddddd"
        }
    },
    "line": {
        "itemStyle": {
            "normal": {
                "borderWidth": "4"
            }
        },
        "lineStyle": {
            "normal": {
                "width": "3"
            }
        },
        "symbolSize": "0",
        "symbol": "circle",
        "smooth": true
    },
    "radar": {
        "itemStyle": {
            "normal": {
                "borderWidth": "4"
            }
        },
        "lineStyle": {
            "normal": {
                "width": "3"
            }
        },
        "symbolSize": "0",
        "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": "#fc97af",
                "color0": "transparent",
                "borderColor": "#fc97af",
                "borderColor0": "#87f7cf",
                "borderWidth": "2"
            }
        }
    },
    "graph": {
        "itemStyle": {
            "normal": {
                "borderWidth": 0,
                "borderColor": "#ccc"
            }
        },
        "lineStyle": {
            "normal": {
                "width": "1",
                "color": "#ffffff"
            }
        },
        "symbolSize": "0",
        "symbol": "circle",
        "smooth": true,
        "color": [
            "#fc97af",
            "#87f7cf",
            "#f7f494",
            "#72ccff",
            "#f7c5a0",
            "#d4a4eb",
            "#d2f5a6",
            "#76f2f2"
        ],
        "label": {
            "normal": {
                "textStyle": {
                    "color": "#293441"
                }
            }
        }
    },
    "map": {
        "itemStyle": {
            "normal": {
                "areaColor": "#f3f3f3",
                "borderColor": "#999999",
                "borderWidth": 0.5
            },
            "emphasis": {
                "areaColor": "rgba(255,178,72,1)",
                "borderColor": "#eb8146",
                "borderWidth": 1
            }
        },
        "label": {
            "normal": {
                "textStyle": {
                    "color": "#893448"
                }
            },
            "emphasis": {
                "textStyle": {
                    "color": "rgb(137,52,72)"
                }
            }
        }
    },
    "geo": {
        "itemStyle": {
            "normal": {
                "areaColor": "#f3f3f3",
                "borderColor": "#999999",
                "borderWidth": 0.5
            },
            "emphasis": {
                "areaColor": "rgba(255,178,72,1)",
                "borderColor": "#eb8146",
                "borderWidth": 1
            }
        },
        "label": {
            "normal": {
                "textStyle": {
                    "color": "#893448"
                }
            },
            "emphasis": {
                "textStyle": {
                    "color": "rgb(137,52,72)"
                }
            }
        }
    },
    "categoryAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#666666"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "textStyle": {
                "color": "#aaaaaa"
            }
        },
        "splitLine": {
            "show": false,
            "lineStyle": {
                "color": [
                    "#e6e6e6"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.05)",
                    "rgba(200,200,200,0.02)"
                ]
            }
        }
    },
    "valueAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#666666"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "textStyle": {
                "color": "#aaaaaa"
            }
        },
        "splitLine": {
            "show": false,
            "lineStyle": {
                "color": [
                    "#e6e6e6"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.05)",
                    "rgba(200,200,200,0.02)"
                ]
            }
        }
    },
    "logAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#666666"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "textStyle": {
                "color": "#aaaaaa"
            }
        },
        "splitLine": {
            "show": false,
            "lineStyle": {
                "color": [
                    "#e6e6e6"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "areaStyle": {
                "color": [
                    "rgba(250,250,250,0.05)",
                    "rgba(200,200,200,0.02)"
                ]
            }
        }
    },
    "timeAxis": {
        "axisLine": {
            "show": true,
            "lineStyle": {
                "color": "#666666"
            }
        },
        "axisTick": {
            "show": false,
            "lineStyle": {
                "color": "#333"
            }
        },
        "axisLabel": {
            "show": true,
            "textStyle": {
                "color": "#aaaaaa"
            }
        },
        "splitLine": {
            "show": false,
            "lineStyle": {
                "color": [
                    "#e6e6e6"
                ]
            }
        },
        "splitArea": {
            "show": false,
            "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": "#999999"
        }
    },
    "tooltip": {
        "axisPointer": {
            "lineStyle": {
                "color": "#cccccc",
                "width": 1
            },
            "crossStyle": {
                "color": "#cccccc",
                "width": 1
            }
        }
    },
    "timeline": {
        "lineStyle": {
            "color": "#87f7cf",
            "width": 1
        },
        "itemStyle": {
            "normal": {
                "color": "#87f7cf",
                "borderWidth": 1
            },
            "emphasis": {
                "color": "#f7f494"
            }
        },
        "controlStyle": {
            "normal": {
                "color": "#87f7cf",
                "borderColor": "#87f7cf",
                "borderWidth": 0.5
            },
            "emphasis": {
                "color": "#87f7cf",
                "borderColor": "#87f7cf",
                "borderWidth": 0.5
            }
        },
        "checkpointStyle": {
            "color": "#fc97af",
            "borderColor": "rgba(252,151,175,0.3)"
        },
        "label": {
            "normal": {
                "textStyle": {
                    "color": "#87f7cf"
                }
            },
            "emphasis": {
                "textStyle": {
                    "color": "#87f7cf"
                }
            }
        }
    },
    "visualMap": {
        "color": [
            "#fc97af",
            "#87f7cf"
        ]
    },
    "dataZoom": {
        "backgroundColor": "rgba(255,255,255,0)",
        "dataBackgroundColor": "rgba(114,204,255,1)",
        "fillerColor": "rgba(114,204,255,0.2)",
        "handleColor": "#72ccff",
        "handleSize": "100%",
        "textStyle": {
            "color": "#333333"
        }
    },
    "markPoint": {
        "label": {
            "normal": {
                "textStyle": {
                    "color": "#293441"
                }
            },
            "emphasis": {
                "textStyle": {
                    "color": "#293441"
                }
            }
        }
    }
}
//使用export default导出上面声明的chalk
export default chalk

然后在页面ECharts.vue中导入主题编辑器，总共分为三步

<template>
    <div id="content">
        <section>
            <div id="main" style="width:600px;height:400px;"></div>
        </section>
    </div>
</template>

<script>
import ECharts from 'echarts'
import chalk from '../const/chalk' //第一步，引入刚刚编写的chalk.js
export default {
    name: "ECharts",
    data() {
        return {
            myChart: null,
        }
    },
    mounted() {
        this.drawChart();
        window.addEventListener("resize", () => {
            this.myChart.resize();
        })
    },
    methods: {
        drawChart() {
            ECharts.registerTheme('chalk',chalk);//第二步，注册主题，用于初始化实例的时候指定
            this.myChart = ECharts.init(document.getElementById('main'),'chalk');//第三步，给init传入第二个参数，使用主题编辑中的颜色主题

            // 指定图表的配置项和数据
            let option = {
                legend: {},
                tooltip: {},
                dataset: {
                    source: [
                        ['视频广告',235],
                        ['联盟广告',274],
                        ['邮件营销',310],
                        ['直接访问',335],
                        ['搜索引擎',400],
                    ]
                },
                series: [
                    {
                        name:'访问来源',
                        type: 'pie',
                        roseType: 'angle',
                    },
                ]
            }
            this.myChart.setOption(option);
        }
    }
}
</script>

最后我们来看看，使用主题样式情况下的页面效果
在这里插入图片描述

qq_43157849
关注
专栏目录
【vue+echarts】多饼图显示、提示、颜色修改
栀妹儿的炼丹炉
12-03 2825
如何在vue中画echarts，见我的这篇：在 webpack 中使用 ECharts 这次是来修改饼图的，用到的临时编辑器：echarts自带编辑器 这个可以超快修改，泰方便啦！ 先看修改前： 可以看到这里不能定义不同饼上的不同展示 再看修改后： 好了来看看代码吧~ optionPie : { legend: { bottom: '30', left: '120', data: ['尖', '峰', '平', '谷'] },
vue+Echarts 折线图markPoint凸显某条数据的实现过程
weixin_45542021的博客
06-29 1372
在vue项目中使用echarts完成一个简单的折线图，使用markPoint凸显当前选中的数据，并自定义部分样式。
Echarts主题编辑器的使用
Reality_Dream7的博客
11-18 881
Echarts主题编辑器的使用
echarts换主题颜色（在vue中使用）
涂涂
11-04 7088
官网：https://www.echartsjs.com/zh/index.html 1.导入（前提是已经安装了echarts） import echarts from "echarts"; import 'echarts/theme/shine.js' 2.使用 echarts.init( document.getElementById("huanfu"), ...
JavaScript中的对象，入职3个月的前端程序员面临转正，四轮面试后多久出结果
2201_75604580的博客
04-14 567
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！
vue项目中Echarts图表完整引入、按需加载以及修改主题色
任磊
11-06 7136
一、完整引入Echarts 下载安装echarts包 npm install echarts -S or yarn add echarts 定义图表显示的容器，并进行渲染 <template> <div id="myChart" ref="myChart"></div> </template> <style> #myChart { width: 95%;
简单记录下 利用 vue-codemirror 实现 echarts 代码编辑
baidu_36872367的博客
06-29 444
#依赖引入 yarn add axios yarn add vue-codemirror yarn add echarts 页面模块 <codemirror ref="mycode" v-model="jsonData" :options="cmOptions" class="code"></codemirror> components: { codemirror }, import axios from "axios"; import { codemirror } from "
Echarts 的主题使用
weixin_45677987的博客
08-08 948
Echarts 的主题的使用 1: 显示相关 2: 动画的使用 3: 交互API ----------------------------------------- 显示相关: 1: 主题颜色 2: 调色盘 3: 样式 4: 自适应 ---------------------------------------- 内置主题: Echarts 中默认内置两套主题: light, dark 在初始化对象方法 init 中可以指明: var chart = echart.ini.
vue炫酷驾驶舱+echarts
12-13
VSCode（Visual Studio Code）是微软开发的一款免费且强大的源代码编辑器，支持多种语言，包括Vue.js。开发者选择VSCode作为开发环境，利用其丰富的插件系统和内置的Vue.js支持，可以提升开发效率和代码质量。 关于...
vue学习之echarts篇
xwq997997的博客
11-26 618
进行中，自己记录一下。 项目来源b站 一、准备工作 1、1安装less 安装less（这里我报错了百度说是我依赖太高，卸载了重新安了个低版本的） npm install less less-loader --save npm uninstall less-loader npm install less-loader@4.1.0 --save 1、2安装flexible 参考 npm i -S lib-flexible import 'lib-flexible/flexible.js' 在node
基于Vue全家桶+ECharts+Koa2+WebSocket搭建的可视化电商平台实时监控系统
最新发布
05-07
【作品名称】：基于Vue全家桶+ECharts+Koa2+WebSocket搭建的可视化电商平台实时监控系统 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
ECharts学习--主题设置
有一种陪伴叫做jay的博客
12-02 1312
（1）内置主题 echarts中默认主题有两个:light、dark 在初始化对象方法中，init可以指明： （1）dark var mCharts = echarts.init(document.querySelector('div'),'dark') （2）；light var mCharts = echarts.init(document.querySelector('div'),'light') （二）自定义主题 （1）在主题编辑器中编辑主题 网址：https://.
echarts主题使用
weixin_43390711的博客
10-09 395
一、内置主题 dark、light 二、自定义主题 1、在主题编辑器中编辑主题 2、下载主题，是一个js文件 3、引入主题js文件 4、echarts.init(dom,主题)
Vue中ECharts配置和使用自定义主题（超简单，包教会）
weixin_48299611的博客
12-11 6581
配置样式 这里介绍两种方式，小伙伴们看个人情况选择 1.采用最简单的方式 配置的样式参考Echarts官网 点我直达Echarts官网， // theme.json { "default": { // 此处调色盘给定了一组颜色，对于未指定颜色的图形、系列等会自动从其中选择颜色 "color": ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83'], "geo": { "item
ECharts的基本使用（二）：主题、自适应实现【第三日学习笔记】
fzy2003的博客
03-27 1226
显示相关 一、主题 1.默认主题 ECharts 中默认内置了两套主题: light dark 在初始化对象方法 init 中可以指明 var mCharts = echarts.init(document.querySelector("div"), 'light') var mCharts = echarts.init(document.querySelector("div"), 'dark') 2.自定义主题 步骤： 1.在主题编辑器中编辑主题 主题编辑器的地址为: https://echarts.a
ECharts高级 显示相关
黑马程序员官方博客
12-19 172
需要课后资料的友友们，可以直接告诉我喔~// 调用echarts。在下述代码中的 0 0 0 1 意味着从上往下进行渐变。这些样式一般都可以设置颜色或者背景或者字体等样式。全局调色盘是在 option。而高亮样式是针对于元素的高亮状态设定的样式。支持线性渐变和径向渐变两种颜色渐变的方式。如果全局的调色盘和局部的调色盘都设置了。，相当于在图形包围盒中的百分比，如果。线性渐变的类型为 linear ,你可以定义一个主题的很多方面的内容。，则该四个值是绝对的像素位置。其实有很多元素都是有两种状态的。
echarts图表应用，做出特殊样式，加渐变，圆角，可自定义主题及各种颜色
qq_61876792的博客
03-28 3326
1，echarts简介 JavaScript的图表库 百度捐给apache基金会 比较符合中国人习惯 HeightCharts , D3为同行 2，废话不说，直接上案例 要使用echarts的五个步骤： 看一下页面效果 我们还可以在同一个容器或创建的实例中放入多个图表,: 看一下页面效果： ...
echarts饼图自定义设置颜色的三种方式
热门推荐
maoge_666的博客
09-30 2万+
echarts饼图自定义设置颜色的三种方式
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值