显示相关

一、主题

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.apache.org/zh/download-theme.html
在该地址中, 你可以定义一个主题的很多方面的内容
2.下载主题, 是一个 js 文件
在线编辑完主题之后, 可以点击下载主题按钮, 下载主题的js文件
3.引入主题 js 文件

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

4.在 init 方法中使用主题
init方法中的第二个参数vintage就是主题的名称, 这个名称叫什么我们可以在Outcast.js的代码中得到var mCharts = echarts.init(document.querySelector("div"), 'vintage')
注意：这里写的是主题名称vintage而非主题文件名称Outcast

二、自适应

作用：图表大小与浏览器窗口大小相适应
步骤1: 监听窗口大小变化事件
步骤2: 在事件处理函数中调用 ECharts 实例对象的 resize 即可
在mCharts.setOption(option)下

    // 监听窗口大小变化事件window.onresize = function (){// 调用echarts实例对象的resize方法mCharts.resize()}

三、总体代码实现：

<!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><script src="theme/Outcast.js"></script>
</head><body><div style="height:400px;border:1px solid darkgrey"></div><script>// 1.在线编辑主题 https://www.echartsjs.com/theme-builder/// 2.下载主题的js文件// 3.在html中导入js文件// 4.在init方法中指明主题的名称var mCharts = echarts.init(document.querySelector("div"), 'vintage')var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]var option = {xAxis: {type: 'category',data: xDataArr},yAxis: {type: 'value'},series: [{type: 'bar',data: yDataArr,markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '平均值'}]},label: {show: true,rotate: 60},barWidth: '30%'}]};mCharts.setOption(option)// 监听窗口大小变化事件window.onresize = function (){// 调用echarts实例对象的resize方法mCharts.resize()}</script>
</body></html>

ECharts的基本使用（二）：主题、自适应实现【第三日学习笔记】相关推荐

NLP︱高级词向量表达（二）——FastText（简述、学习笔记）
FastText是Facebook开发的一款快速文本分类器,提供简单而高效的文本分类和表征学习的方法,不过这个项目其实是有两部分组成的,一部分是这篇文章介绍的 fastText 文本分类(paper: ...
深度学习（三十二）半监督阶梯网络学习笔记
半监督阶梯网络学习笔记原文地址:http://blog.csdn.net/hjimce/article/details/50877704 作者:hjimce 一.相关理论这几年深度学习声名鹊起,一 ...
l2-004 这是二叉搜索树吗?_算法学习笔记(45): 二叉搜索树
二叉搜索树(Binary Search Tree, BST)是一种常用的数据结构,在理想情况下,它可以以的复杂度完成一系列修改和查询,包括: 插入一个数删除一个数查询某数的排名(排名定义为比该数 ...
标定学习笔记（二）-- 张正友论文学习笔记
这篇学习笔记主要用于记录在学习张正友的标定文献时的一些需要进行记录的要点,张正友的文章最初发表于1998年2月,在如今看来依旧具有进一步学习的意义,本文多以翻译与概述前人文献为主,重温其标定过程的核心 ...
深度学习（二十九）Batch Normalization 学习笔记
Batch Normalization 学习笔记原文地址:http://blog.csdn.net/hjimce/article/details/50866313 作者:hjimce 一.背景意义 ...
c++ 二维矩阵转vector_Python线性代数学习笔记——矩阵的基本运算和基本性质，实现矩阵的基本运算...
当学习完矩阵的定义以后,我们来学习矩阵的基本运算,与基本性质矩阵的基本运算:矩阵的加法,每一个对应元素相加,对应结果的矩阵例子:矩阵A和矩阵B表示的是同学上学期和下学期的课程的成绩,两个矩阵相加就 ...
二十七、PHP框架Laravel学习笔记——模型的多对多关联
二．多对多关联多对多关联,比前面两种要复杂一些,需要一张中间表,共三张: (1) .users:用户表: (2) .roles:权限表: (3) .role_user:中间表:默认表名,user_i ...
二十一、PHP框架Laravel学习笔记——模型的访问器和修改器
一．访问器访问器:就是在获取数据列表时,拦截属性并对属性进行修改的过程: 比如,我们在输出性别时,在性别左右加上括号,或给邮件转换为大写: //访问器,前固定 get,后固定 Attribute,G ...
二十、PHP框架Laravel学习笔记——模型的作用域
一．本地作用域很多情况下,我们在数据查找时有一部分条件会被重复且大量使用: 而这个条件,可能只是在这个模型对应的数据表使用,别的表并不使用: 那么这种情况,可以使用本地作用域的方式,将常用的 SQL ...

ECharts的基本使用（二）：主题、自适应实现【第三日学习笔记】