主题的使用:默认自带的

echarts工具里面自带了两种主题: light 和 dark;

使用
在初始化echarts实例对象的时候定义即可

var mCharts = echarts.init(document.querySelector("div"),'dark')

在这里插入图片描述

var mCharts = echarts.init(document.querySelector("div"),'light')

在这里插入图片描述

完整代码

<!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>Document</title>
  <script src="lib/echarts.min.js"></script>   
</head>

<body>
  <div style="width: 600px;height:400px"></div> 
  <script>
    //1. ECharts最基本的代码结构
    var mCharts = echarts.init(document.querySelector("div"),'light')// 初始化echarts实例对象
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
      xAxis:{
        type:'category',   //类目轴
        data: xDataArr,
      
      },
      tooltip:{
          trigger:'axis',
        },
      yAxis:{
        type: 'value', // 数值轴,  数据通过series 进行配置
      },
      series:[
        {
          name: '语文',
          type: 'bar',

          markPoint:{
            data:[
              {
                type: 'max',neme: '最大值'
              },
              {
                type: 'min',name: '最小值'
              }
            ]
          },
          label:{
            show: true,
            position: 'top'
          },
          data: yDataArr,
          
        
          
        }
      ]
          }
    //将配置项设置给echarts实例对象
    mCharts.setOption(option)
  </script>
</body>

</html>

自定义主题

前往echarts官网去下载主题
在这里插入图片描述
在这里插入图片描述
自定义完之后点击下载主题.JS即可
在这里插入图片描述
主题的引入:

创建文件夹,把下载好的主题拖入即可

<script src="theme/purple-passion.js"></script>

跟引入echarts的配置文件的时候相似;

<script src="lib/echarts.min.js"></script>

初始化的时候把后面的主题改为刚才下载的主题名称即可

var mCharts = echarts.init(document.querySelector("div"),'purple-passion')// 初始化echarts实例对象

在这里插入图片描述

# echarts # javascript # 前端
Logo
DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

宇树 Go2 + NaVILA 全栈导航系统详解 (新手入门版)

本文详细介绍了宇树Go2机器人搭配NaVILA全栈导航系统的技术架构与实现方案。系统采用分层设计，包含仿真环境(Go2描述与Gazebo模拟)、底层控制(quadropted_controller)、导航定位(Nav2+Cartographer)和核心VLA(视觉语言动作)模块。重点对比了官方NaVILA方案(依赖高性能GPU)与优化后的轻量化方案(基于llama.cpp的Client-Serve

avatar DAMO开发者矩阵

【路径规划】基于Fast-RRT二维空间移动机器人改进的运动规划器附Matlab复现含文献

移动机器人路径规划旨在解决从起始状态到目标状态在给定空间内创建无碰撞路径的问题，这是无人作业的关键支撑技术。为解决渐近最优快速扩展随机树星形算法（RRT *算法）存在的收敛速度慢、规划效率低及路径成本高等问题，本文提出了一种基于混合采样策略和回溯选择父节点的改进运动规划器（Fast- RRT *算法）。首先，在采样阶段结合目标偏置策略与约束采样以降低采样盲目性；其次，在选择新节点父节点时，通过追溯

avatar DAMO开发者矩阵

【路径规划】基于Fast-RRT二维空间移动机器人改进的运动规划器附Matlab复现含文献

移动机器人路径规划旨在解决从起始状态到目标状态在给定空间内创建无碰撞路径的问题，这是无人作业的关键支撑技术。为解决渐近最优快速扩展随机树星形算法（RRT *算法）存在的收敛速度慢、规划效率低及路径成本高等问题，本文提出了一种基于混合采样策略和回溯选择父节点的改进运动规划器（Fast- RRT *算法）。首先，在采样阶段结合目标偏置策略与约束采样以降低采样盲目性；其次，在选择新节点父节点时，通过追溯

avatar DAMO开发者矩阵