Vue ECharts设置主题实现方法介绍

目录
  • 前言
  • 内置主题
  • 自定义主题

前言

本篇来学习下ECharts中如何设置图表主题

内置主题

ECharts 中默认内置了两套主题: light dark

var chart = echarts.init(dom, 'light')
var chart = echarts.init(dom, 'dark')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts高级--主题</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // init方法有两个参数, 第一个参数代表是一个dom节点, 第二个参数, 代表你需要使用哪一套主题
    // 默认内置了两套主题 , light  dark
    var myCharts = echarts.init(document.getElementById('app'), 'dark')
    var option = {
        xAxis: {
            type: 'category',   // 类目轴
            data: ['测试', '研发', '产品']
        },
        yAxis: {
            type: 'value' // 数值轴
        },
        title: {
            text: '岗位',  // 标题文本
            link: 'https://blog.csdn.net/IT_heima', // 标题超链接
            target: 'blank',    // 打开新窗口，  self: 当前窗口
            textStyle: {    // 文字样式
                color: 'pink', // 颜色
                fontWeight: 'bold' // 字体粗细
            }
        },
        series: [
            {
                name: '岗位',
                type: 'bar',  // 图表类型  bar:柱状图   line:折线图   pie:饼图
                data: [10, 90, 20],
                barWidth: '30%',
                label: {
                    show: true,
                    rotate: 20
                }
            }
        ]
    }
    myCharts.setOption(option)
</script>
</body>
</html>

效果

自定义主题

主题编辑器地址：https://echarts.apache.org/zh/theme-builder.html

下载主题(保存为js文件)

引入主题 js 文件(以主题名称命名的js文件)

在 init 方法中使用主题

一般是下载时自定义的主题名称(可在下载的主题js文件中找到名称)

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts高级--主题</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <script src="lib/CustomTheme.js"></script>
</head>
<body>
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // init方法有两个参数, 第一个参数代表是一个dom节点, 第二个参数, 代表你需要使用哪一套主题
    var myCharts = echarts.init(document.getElementById('app'), 'CustomTheme')
    var option = {
        xAxis: {
            type: 'category',   // 类目轴
            data: ['测试', '研发', '产品']
        },
        yAxis: {
            type: 'value' // 数值轴
        },
        title: {
            text: '岗位',  // 标题文本
            link: 'https://blog.csdn.net/IT_heima', // 标题超链接
            target: 'blank',    // 打开新窗口，  self: 当前窗口
            textStyle: {    // 文字样式
                color: 'pink', // 颜色
                fontWeight: 'bold' // 字体粗细
            }
        },
        series: [
            {
                name: '岗位',
                type: 'bar',  // 图表类型  bar:柱状图   line:折线图   pie:饼图
                data: [10, 90, 20],
                barWidth: '30%',
                label: {
                    show: true,
                    rotate: 20
                }
            }
        ]
    }
    myCharts.setOption(option)
</script>
</body>
</html>

效果：与预览效果一致，类目轴颜色修改为浅绿色

到此这篇关于Vue ECharts设置主题实现发介绍的文章就介绍到这了,更多相关Vue ECharts设置主题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue ECharts简易实现雷达图

    目录 前言 雷达图特点 雷达图的基本实现 雷达图的常见效果 显示数值 区域面积 绘制类型 完整代码 前言 本篇来学习写雷达图 雷达图特点 可以用来分析多个维度的数据与标准数据的对比情况 雷达图的基本实现 ECharts 最基本的代码结构 定义各个维度的最大值 准备具体产品的数据 在 series 下设置 type:radar <!DOCTYPE html> <html lang="en"> <head> <meta charset="

  • Vue使用Echarts画柱状图详解

    目录 前言 柱状图实现步骤 柱状图常见效果 标记 显示 前言 本篇来学习下柱状图的实现 柱状图实现步骤 ECharts 最基本的代码结构 准备x轴的数据 准备 y 轴的数据 准备 option , 将 series 中的 type 的值设置为: bar <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v

  • Vue Echarts简易实现仪表盘

    目录 前言 仪表盘的特点 仪表盘的基本实现 仪表盘的常见效果 前言 本篇来学习写仪表盘图 仪表盘的特点 可以更直观的表现出某个指标的进度或实际情况 仪表盘的基本实现 ECharts 最基本的代码结构 准备数据, 设置给 series 下的 data 在 series 下设置 type:gauge <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

  • Vue Echarts实现图表轮播图以及图表组件封装和节流函数优化讲解

    目录 一.为什么要优雅的使用echarts 二.最初的表格组件 三.初步的封装 四.性能优化 一.为什么要优雅的使用echarts 为了提高代码的规范性.复用性,vue中最常用的就是将具有某些功能的代码封装到一个插件.如果没有对插件进行封装,在后期使用插件的时候效率会十分低下也不便于后期对程序的维护拓展,在优雅的使用echarts时,首先,我们考虑到多个地方需要用到echarts,就需要封装一个组件出来,由于每一个图中的属性均由配置项option进行控制,所以我们可以将option选项提取出来,

  • Vue使用Echarts实现大屏可视化布局示例详细讲解

    目录 一.效果展示 二.基本的布局 三.背景 四.代码 布局中遇到的一些问题 一.效果展示 先看一下展示的效果,无论是尺寸多宽的屏幕,都会将内容显示完整,做到了正正的响应式.唯一不足的是图表中的样例,会随着图表的缩放而变换位置,窗口尺寸变化过快会反应不过来,好在有节流函数,可以让浏览器计算量没有那么大.本篇博客不会直接拿echarts图表下手,会先介绍一些这个大屏可视化的响应式布局.后面会出一个专门的博客介绍echarts的使用. 二.基本的布局 大致的布局如下,整体分为头部与body,头部有标

  • Vue echarts封装实现流程

    将echarts封装成组件,达到只要调用方法,传入数据和相应的参数就能生成图表的效果,避免在项目中编写大量重复和累赘的echarts的配置代码,实现的思路如下: 接口返回的一般是json数据,所以首先要将json数据进行处理,处理成echarts需要的数据形式 将echarts的配置代码封装在一个方法里,通过自定义的配置名进行调用 下面对我自己封装的组件 EchartsGenerate 逐步解释 首先看template <template> <div> <slot>&l

  • Vue ECharts设置主题实现方法介绍

    目录 前言 内置主题 自定义主题 前言 本篇来学习下ECharts中如何设置图表主题 内置主题 ECharts 中默认内置了两套主题: light dark var chart = echarts.init(dom, 'light') var chart = echarts.init(dom, 'dark') <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu

  • vue使用Echarts设置数据无效问题记录及解决方法

    vue使用Echarts设置数据无效问题记录及解决方法

    目录 场景: 遇到的问题: 最终解决方案: 小结: 场景: 做一个动态的柱状图,模拟socket效果,如图所示: 遇到的问题: 元数据格式是这样的: config: { data: [ { name: '义乌市', value: 169 }, { name: '东阳市', value: 123 }, { name: '武义县', value: 98 }, { name: '兰溪市', value: 75 }, { name: '金东区', value: 66 }, ], colors: ['#e

  • vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）

    本篇文档主要是利用echarts实现可拖动节点的折线图,在echarts中找到了一个demo,传送门:https://echarts.baidu.com/examples/editor.html?c=line-draggable,但是不是用vue写的,并且在改写为vue组件的过程中遇到了很多问题,在百度过程中发现并没有相关的文档,所以决定自己开发,并在demo的基础上开发了一些实用的功能,所以把这个过程记录下来.文档中还有很多不够完善的地方,欢迎讨论哈! 需求:制作一个折线图用于显示当前24小时

  • vue+echarts实现动态折线图的方法与注意

    之前公司有个绘制实时盈利率折线图的需求,实现的还不错,今天来分享下vue+echarts实现动态折线图的方法. 实现代码 <template> <div id="myChart"></div> </template> <script> import echarts from 'echarts' export default { name: 'DynamicLineChart', data () { return { // 实时

  • vue元素样式实现动态改变方法介绍

    vue元素样式实现动态改变方法介绍

    目录 1 前言 2 动态改变样式的方法 2.1 操作元素class列表 2.2 操作元素内联样式 3 小结 1 前言   在vue项目中,很多场景要求我们动态改变元素的样式,比如按钮由不可点击到可以点击样式改变,这种情况下,我们通常根据vue框架提供的动态绑定v-bind来操作元素的class列表贺内联样式来达到动态设置元素样式的效果: 2 动态改变样式的方法 2.1 操作元素class列表 我们通过vue内置的:class (v-bind:class)来动态操作元素的class:如下所示: <

  • vue中设置echarts宽度自适应的代码步骤

    vue中设置echarts宽度自适应的代码步骤

    目录 问题描述 无自适应效果图 有自适应效果图 代码步骤 问题描述 我们使用vue做项目的时候,常常需要做到echarts图表的自适应,一般是根据页面的宽度做对应的适应.本文记录一下设置echarts图表的自适应的步骤.我们先看一下没有做echarts自适应的效果 无自适应效果图 我们发现echarts图的宽度并没有随着页面宽度的变化而变化 有自适应效果图 很显然,这个才是我们想要的效果 代码步骤 echart图表本身提供了一个resize的函数,我们只需要监听页面的resize变化以后,去执行

  • Vue框架中正确引入JS库的方法介绍

    本文主要给大家介绍的是关于在Vue框架中正确引入JS库的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 错误示范 全局变量法 最不靠谱的方式就是将导入的库挂在全部变量window 对象下: // entry.js: window._ = require('lodash'); // MyComponent.vue: export default { created() { console.log(_.isEmpty() ? 'Lodash everywhere!' : 'U

  • vue+echarts实现动态绘制图表及异步加载数据的方法

    前言 背景:vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的. 安装 cnpm install echarts --s   (我这里用了淘宝镜像,不知道同学自行百度) 实例化   在已有的项目中下载好了echarts 之后,可以打开官方文档,但是我觉得官方文档对于实例化介绍的不够清晰,这也是我为什么在这么多的文章中还要写的原因,前辈写的太模糊了,我决定好好给后来人,需要在项目中引用图表的人,一些实用,快捷的东西. 官方文档:http://echart

  • Android Studio设置、改变字体和主题的方法

    Android Studio设置、改变字体和主题的方法

    1.步骤:File >> settings >> Appearance & Behavior >>Appearance >> 来到修改界面 如下图所示:(Theme 主题修改 :Name 字体 :size 字号大小:其他的效果自己设置就可以看到,下图是其中的一种效果) 2.修改代码区域的字体,字号等设置 步骤:File >> settings >> Editor >>Colors & Fonts >&

  • vue: WebStorm设置快速编译运行的方法

    WebSorm是一款优秀的前端开发工具,而Vue项目可以使用Node进行编译运行,平常我们可以通过命令行部署项目进行调试. 本文介绍设置Webstorm进行快速部署Vue项目. 第一步 点击启动快捷按钮旁边的向下小箭头,在列表中选择Edit选项: 第二步 打开启动设置页面后,点击左上角的加号添加新的运行方式: 第三步 在弹出的选择框中,选择node.js启动模式: 第四步 在新打开的设置页面中,在红色圈中的地方设置如图路径的文件: 至此设置成功,直接点启动按钮就可以部署项目. 以上这篇vue:

随机推荐