Echarts知识总结

最新推荐文章于 2024-05-27 09:54:14 发布

^㉨^

最新推荐文章于 2024-05-27 09:54:14 发布

阅读量547

点赞数

分类专栏： Echarts 文章标签： web

Echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Echarts

定义：

一个使用 JavaScript 实现的开源可视化库，
它可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），
其底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

特点与好处

1．丰富的可视化类型
2．多种数据格式无需转换直接使用
3．千万数据的前端展现
4．移动端优化
5．多渲染方案，跨平台使用！
6．深度的交互式数据探索
7．多维数据的支持以及丰富的视觉编码手段
8．动态数据
9．绚丽的特效
10．通过 GL 实现更多更强大绚丽的三维可视化
11．无障碍访问（4.0+）
拓展知识：

http://echarts.baidu.com/feature.html

使用

下载echarts
①　官网下载

http://echarts.baidu.com/download.html

②　github下载

https://github.com/apache/incubator-echarts

③　npm下载
命令：cnpm install echarts --save

④　通过cdn形式在线引入echarts

注意：请尽量下载完整版的文件，否则在某些时候可能会出错

引入
ECharts 4可以像普通的 JavaScript 库一样用 script 标签引入。

eg：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

使用实例

流程
①　构建基本的网页模板，引入 echarts.js
②　为ECharts准备一个具备大小（宽高）的Dom
③　基于准备好的dom，初始化echarts实例,【echarts.init()】
④　指定图表的配置项和数据option【想展现什么样的图表就写什么样的配置】
⑤　使用刚指定的配置项和数据显示图表。setOption(option)

实例

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script></head><body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
</body>
</html>

效果
ECarts实例展示
配置详解

学习方式
1.流程：
先写一个基本实例—》分析常用参数作用----》扫描一遍各种图例–》大致阅读一遍配置参数—》常用类型图表走一遍----》学会搜索api了解参数作用---->有整体印象

2.调用：
明确你要用什么类型的图表------》去官网查找类似效果表----》找到后借助api分析参数作用----》略作修改用到你的项目

注意事项

(1)如何实现echart图表的响应式展现。

**方式一：**使用百分比控制图表的宽度
宽度和高度必须设置
这样，在不同设备上显示都会有个较好的展现效果
不足：
在图表显示后，用户显示的更改了窗体的大小的话，除非我们显式的刷新，否则图表不会自动更改大小。

**方式二：**在resize方法来，进行处理
在宽度设为100%后，我们再在onresize事件里面进行处理即可

window.onresize = function () {
mycharts.resize();
}

当同时渲染多个图表时的自适应同样的做法即可。

方式三：【官方定义的方式】
这种方式类似与媒体查询写法

https://www.echartsjs.com/tutorial.html# 移动端自适应

1．流程
①　把原本的配置对象option设置为基础option : baseOption
②　在baseOption同级下创建media选项，在里面设置不同宽度下的图表展现

规则如下所示：
相关规则模型
③　最后在onresize方法中实现echart对象的echarts

window.onresize = function () {
mycharts.resize();
}

2．使用实例

<!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>
</head>
<body>
<button onclick="getnewData()">获取新数据</button>
<!-- 1. 盛放echarts图表的容器 -->
<div id="main" style="width:100%;height:400px;"></div>
<script src="./echarts.js"></script>
<script>
// 2. 获取这个容器元素
var mainDiv = document.querySelector("#main");
// 3. 将echarts绑定到dom元素上
var mycharts = echarts.init(mainDiv, "light");
// 4. 准备配置对象，指定图表的配置项和数据
option = {
baseOption: {
legend: {
text: "默认legen",
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
name: "默认legen"
}],
},
media: [
{
query: {
minWidth: 900 // 当容器宽度大于 900 时。
},
option: {
legend: {
text: "大于900的legen",
left: 50,
},
series: [{
name: "大于900的legen"
}],
}
},
{
query: {
maxWidth: 500 // 当容器宽度小于 500 时。
},
option: {
legend: {
text: "小于500的legen",
right: 50,
},
series: [{
name: "小于500的legen"
}],
}
},
]
}
mycharts.setOption(option);
window.onresize = function () {
mycharts.resize();
}
</script>
</body>
</html>

3．响应式实现原理
上面的例子中，baseOption、以及 media 每个 option 都是『原子 option』，即普通的含有各组件、系列定义的 option。
而由『原子option』组合成的整个 option，我们称为『复合 option』。
baseOption 是必然被使用的，此外，满足了某个 query 条件时，对应的 option 会被使用 chart.mergeOption() 来 merge 进去。

4．query中的内容
query用于判断不同的设备，每个 query 类似于这样：

 {
minWidth: 200, //表示最小宽度
    maxHeight: 300, //表示最大高度
minAspectRatio: 1.3 //表示最大长宽比
}

现在支持三个属性：width、height、aspectRatio（长宽比）。
每个属性都可以加上 min 或 max 前缀。
比如，minWidth: 200 表示『大于等于200px宽度』。
两个属性一起写表示『并且』，比如：{minWidth: 200, maxHeight: 300} 表示『大于等于200px宽度，并且小于等于300px高度』。

5．media中的 option
media中的 option 既然是『原子 option』，理论上可以写任何 option 的配置项。但是一般我们只写跟布局定位相关的，例如截取上面例子中的一部分 query option：
媒体响应
6．注意事项

(1)多个 query 被满足时的优先级
注意，可以有多个 query 同时被满足，会都被 mergeOption，定义在后的后被 merge（即优先级更高）。

(2)默认 query
如果 media 中有某项不写 query，则表示『默认值』，即所有规则都不满足时，采纳这个option。

(3)容器大小实时变化时的注意事项
在不少情况下，并不需要容器DOM节点任意随着拖拽变化大小，而是只是根据不同终端设置几个典型尺寸。
但是如果容器DOM节点需要能任意随着拖拽变化大小，那么目前使用时需要注意这件事：某个配置项，如果在某一个 query option 中出现，那么在其他 query option 中也必须出现，否则不能够回归到原来的状态。（left/right/top/bottom/width/height 不受这个限制。）

(2)异步加载数据
1.请求数据
2.调用echarts对象的setOption方法重新渲染数据即可。

option.series[0].data = 新数据
mycharts.setOption(option);

3.如果需要连续加载那就连续的调用setOption()方法即可

<!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>
</head>
<body>
<!-- 1. 盛放echarts图表的容器 -->
<div id="main" style="width: 600px;height:400px;"></div>
<script src="./echarts.js"></script>
<script>
// 2. 获取这个容器元素
var mainDiv = document.querySelector("#main");
// 3. 将echarts绑定到dom元素上
var mycharts = echarts.init(mainDiv);
// 4. 准备配置对象，指定图表的配置项和数据
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth:true,
}]
};
// 使用刚指定的配置项和数据显示图表。
mycharts.setOption(option);
//使用定时器模拟不间断的后端数据
setInterval(function () {
option.series[0].data = option.series[0].data.map(function (ele,i) {
var rand=Math.round(Math.random()*50)
if(rand>25) rand=-rand;
return ele + rand;
})
mycharts.setOption(option);
}, 1000)
</script>
</body>
</html>

(3)图表主题
主题：
设置图表的整体风格样式，如果你引入的是完整版主题js文件，那么可以直接写主题dark,light，除此以外，其他的都要下载相应的主题文件。（echart4）