VUE中Echatrs主题的使用（官方主题、自定义主题）

最新推荐文章于 2024-04-16 00:16:19 发布
最新推荐文章于 2024-04-16 00:16:19 发布
阅读量4k 收藏 9
点赞数 12
分类专栏： Vue 文章标签： vue echarts 自定义样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42601136/article/details/119574673
版权

VUE中Echatrs主题的使用（官方主题、自定义主题）

引言：

       本文主要分享了如何使用ECharts官方提供的主题以及如何引入自定义的主题；

文章目录


请添加图片描述

请添加图片描述

1、Echarts环境搭建

1.1、echarts导入

npm install echarts --save

1.2、项目中引入Echarts

在main.js中导入

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts  //定义为全局变量

1.3、其他说明

如果echarts环境的搭建还有问题可以参考文章：VUE+ECharts从数据库中获取数据（柱状图、扇形图）

2、引入官方定义的主题

为了使Echarts图表更加的美观官方提供6种不同风格的主题供我们使用，在我们安装依赖时默认就会将这几种主题带入；

  • 官方路径：https://echarts.apache.org/zh/download-theme.html

请添加图片描述

2.1、导入官方主题

请添加图片描述

2.2、初始化echarts实例时引入主题名称

请添加图片描述

  • 自此便引入官方主题

3、引入自定义主题

当默认主题和官方提供的主题无法满足时，我们还可以自定义主题；

官方路径：https://echarts.apache.org/zh/theme-builder.html

3.1、下载主题

根据所需定义好主题后就可以下载（这里选择了JSON版本）

请添加图片描述

请添加图片描述

3.2、新建.js文件

在项目中新建一个.js文件将刚刚复制的JSON放入该文件（注意名字与主题名字保持一致）

请添加图片描述

  • 文件末尾加上以下代码，代表：指定模块的默认输出
export default essos

3.3、引入essos.js文件

请添加图片描述

3.4、注册主题并初始化实例

请添加图片描述

有关Echarts主题的使用就大功告成了，赶紧去试试吧！！！

Willing卡卡
关注
  • 12
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
echarts主题的使用
ttttqqqqq的博客
08-12 1610
导入echarts主题，实现你想要的效果
如何切换Echarts主题
Lucivita的博客
07-12 2280
一、打开Echarts官方文档 点击资源 -> 主题构建工具 进入到主题选择页面 二、选择默认主题 点击默认方案选择合适的主题 例如选择macarons，点击后右侧展示对应主题效果 三、应用主题 1.下载主题 点击下载主题，建议选择JSON版本，点击下面下载便会生成一个JSON文件 2.项目使用 把JSON文件放入项目的某个文件夹中，在需要使用Echarts的文件中导入。 //引入 import macarons from '../.....
Echarts 主题设置
power0405hf的专栏
05-21 1884
在实例化的时候require( [ 'echarts', 'echarts/theme/macarons',//引用主题 'echarts/chart/bar', 'echarts/chart/line' ], function (ec,theme){/
vue3改变echarts主题
weixin_71199388的博客
11-29 642
6.在进行切换主题时，图表不会进行刷新，我们需要进行监听，在接收到的数据发生变化时，进行重新渲染图表。1.如果大家是将多个图表切换主题，并进行组件化，首先在app.js文件中引入主题。2.设置单选按钮，进行主题选择（这里大家可以使用自己的方式进行传值）大家可以去echarts官方文档中去查找更多的主题。节省大家时间，就不做图表的展示了，直接进入主题。3，组件传值，将我们选中的主题进行传递。作为演示，我只选择了一个组件。4，组件中接收传递的值。5.在图表初始化时设置。
VUE中Echatrs主题的使用（官方主题、自定义主题），2024年最新面试心得体会800字范文
最新发布
2301_79099373的博客
04-16 759
题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心。为了使Echarts图表更加的美观官方提供6种不同风格的主题供我们使用，在我们安装依赖时默认就会将这几种主题带入；Vue.prototype.$echarts = echarts //定义为全局变量。(img-CkmKRe97-1713197761251)]2.2、初始化echarts实例时引入主题名称。1.2、项目中引入Echarts。2、引入官方定义的主题。
百度echarts自定义主题使用
weixin_33834075的博客
12-21 472
1、百度echarts官网主题构建，自定义主题 主题在线构建 http://echarts.baidu.com/theme-builder/ 构建完成后下载并保存js文件 2、html导入保存的js文件 <!-- 引入 ECharts 文件 --> <script src="echarts.js"></script> <!-...
Vue的elementUI实现自定义主题方法
08-27
Vue的ElementUI实现自定义主题方法 ElementUI是一个基于Vue.js的前端UI框架，它提供了丰富的UI组件和功能强大的主题化系统。自定义主题是ElementUI的一个重要特性，它允许开发者根据项目的需求和设计风格来定制UI...
vue elementUI 切换主题.zip
11-13
vue elementUI 切换主题 有步骤 https://blog.csdn.net/weixin_43899650/article/details/121302368?spm=1001.2014.3001.5501
vue在线动态切换主题色方案
10-15
总之，Vue在线动态切换主题色方案主要通过`webpack-theme-color-replacer`插件实现，它能帮助我们便捷地在Vue项目中创建可切换的主题。在实际开发中，确保正确配置插件、在Vue配置文件中引入、编写客户端逻辑，并在...
vue中使用antv/x6编写自定义流程
04-14
在vue中使用antv/x6和element组件，实现自定义流程的编写，使用antv/x6实现画布绘制和流程绘制，通过拖动节点到画布的方式进行节点的添加，使用element组件实现鼠标移入节点后的自定义功能，使用antv/x6自带的api和...
Vue系列——在vue项目中使用echarts
热门推荐
Chosen Wu的博客
04-18 13万+
该示例使用 vue-cli 脚手架搭建安装echarts依赖npm install echarts -S或者使用国内的淘宝镜像： 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 使用 cnpm install echarts -S创建图表全局引入 main.js // 引入echarts import echarts
Echarts3 主题设置
灯塔的CSDN博客
07-26 2万+
前言现在此感谢百度Echarts团队提供的这款优秀的开源产品。Echarts是一款原生js写的图表类库，Echarts能为我们打造一款数据可视化平台提供了良好的图表支持。在如今的前端开发中，站点样式主题css 是要和样式组件的css样式分离的，这样我们就可以根据不同的需求改变我们的站点风格，如春节、中秋等节假日我们都要改变我们的站点风格。同理，百度Echarts团队也为我们提供了这样一套机制（类是B
Echarts自定义主题工具使用以及创建自定义主题
chen__cheng的博客
07-01 768
可以使用Echarts在线构建工具创建自定义主题 网址：https://echarts.apache.org/zh/theme-builder.html 这里记录下如何使用该工具，以及这些配置代表的含义。 基本配置： 背景：图表放置的容器的样式（背景颜色） 标题：每个图表的解释部分（文字颜色） 副标题：每个图表的解释部分（文字颜色） 主题：绘制图表的时候，会使用许多的折线或者矩形或者饼形等，为了视觉上区分这些不同的线条所代表的含义，此时就可以使用不同的颜色去区分，而主题就即图表绘制这些线条的时候使用的颜色
echart自定义主题
荆轲刺秦王
10-12 366
(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['exports', 'echarts'], factory); } else...
Vue 2.x折腾记 - (7) 写一个挺不靠谱的Vue-Echarts组件
CRPER
07-25 1万+
上基友社区看了下,发现对echarts的封装都是打包进去的…想想就还是算了.. 图表这货.说实在的,若不是整个系统大量用到,打包进去没必要…CDN是个好东西,我们完全可以写一个异步加载JS然后封装按需调用…至于你能学到什么,见仁见智了…不过有所收获就是我这文章的意义所在了
vue实现echarts可视化【定制主题 + 通用写法】
在写作的路上持续输出。
04-18 1578
vue 实现echarts 可视化，定制主题与通用写法【基础版】一🌌
Echarts主题更换
夏山&大周的博客
11-12 6349
引用主题，在官网下载 &amp;amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;../theme/shine.js&amp;quot;&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt; &amp;amp;lt;script type=&amp;quot;text/javascript&amp;
vue中如何使用自定义组件
07-08
在 Vue 中使用自定义组件包括以下几个步骤： 1. 创建自定义组件：在 Vue 项目中创建一个.vue文件，其中包含组件的模板、样式和逻辑代码。例如，创建一个名为 "MyComponent.vue" 的文件。 2. 在需要使用自定义组件的地方，引入自定义组件。可以使用 import 语句或者直接在 Vue 实例中注册组件。 - 使用 import 语句引入自定义组件： ```javascript import MyComponent from './MyComponent.vue'; ``` - 在 Vue 实例中注册组件： ```javascript Vue.component('my-component', MyComponent); ``` 3. 在 Vue 模板中使用自定义组件。在模板中使用组件的方式是将组件的标签作为普通 HTML 标签使用，并传递相应的属性和数据。 ```html <template> <div> <my-component :prop1="value1" :prop2="value2"></my-component> </div> </template> ``` 注意，这里的 "my-component" 是组件标签名，需要与注册组件时的名称保持一致。 4. 在自定义组件中，可以通过 props 接收传递给组件的数据，并在组件内部进行处理和渲染。 ```html <template> <div> <h1>{{ prop1 }}</h1> <p>{{ prop2 }}</p> </div> </template> <script> export default { props: ['prop1', 'prop2'], // 组件的其他逻辑代码 } </script> ``` 这样，你就可以在 Vue 项目中使用自定义组件了。记得在需要使用组件的地方引入自定义组件，并在模板中使用组件的标签。同时，可以通过 props 向组件传递数据，组件内部可以通过 props 接收并使用这些数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Willing卡卡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值