Apache Echarts高级|图表显示优化

最新推荐文章于 2024-05-22 10:05:28 发布

diviner_s

最新推荐文章于 2024-05-22 10:05:28 发布

阅读量3k

点赞数 2

分类专栏：数据可视化_Echarts 文章标签：数据可视化 echarts js html

本文链接：https://blog.csdn.net/diviner_s/article/details/116096469

版权

本文介绍了Apache Echarts的高级特性，包括显示优化如主题、调色盘、样式和大小自适应；动画的使用如加载动画、增量动画及动画配置；以及交互API的应用，如全局和实例对象的交互功能。

摘要由CSDN通过智能技术生成

文章目录

Apeach Echarts高级

Apeach Echarts高级

每个图表均配有对应的源代码以及知识点~~~~
详情可点开对应的图表学习！
各类常用图表总结在此！配合使用更方便~
https://blog.csdn.net/diviner_s/article/details/116072584
官方对应文件工具，有更详细的工具使用方法：
https://echarts.apache.org/zh/option.html

一、显示相关

1.主题

默认主题
ECharts中默认内置了两套主题：light,dark
在初始化对象方法init中可以指明
```
var mChart = echarts.init(dom,'light')
var mChart = echarts.init(dom,'dark')
```
自定义主题
1.在主题编译器中编辑主题
主题编译器的地址为：https://www.echartsjs.com/theme-builder/

2.下载主题，是一个js文件
在线编辑完成主题之后，可以点击下载主题按钮，下载主题的js文件

3.引入主题js文件
```
<script src = "js/echarts.min.js"></script>
<script src = "js/itcast.js"></script>
```
其中，itcast.js就是下载下来的主题文件

4.在init方法中使用主题
```
var mCharts = echarts.init(document.querySelector("div"),'itcast')
```
init方法中的第二个参数itcast就是主题的名称，对于此图‘itcast’就是对应的名称。

2.调色盘

它是一组颜色，图形、系列会自动从其中选择颜色。

主题调色盘

全局调色盘
全局调色盘是在option下增加一个color的数组

var option = {
     
	// 全局调色盘
	color: ['red', 'green', 'blue'],
	......
}
mCharts.setOption(option)

局部调色盘
局部调色盘就是在series下增加一个color的数组

var option = {
     
	// 全局调色盘
	color: ['red', 'green', 'blue'],
	series: [
		{
     
			type: 'pie',
			data: pieData,
			// 局部调色盘
			color: ['pink', 'yellow', 'black']
		}
	]
}
mCharts.setOption(option)

需要注意一点的是，如果全局的调色盘和局部的调色盘都设置了，局部调色盘会产生效果，这里面遵从的就近原则。

渐变颜色的实现
在ECharts中，支持线性渐变和径向渐变两种颜色的渐变方式

线性渐变
线性渐变的类型为 linear , 他需要配置线性的方向, 通过 x, y, x2, y2 即可进行配置x , y , x2 , y2 , 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 global 为 true ，则该四个值是绝对的像素位置
在下述代码中的 0 0 0 1 意味着从上往下进行渐变

<!DOCTYPE html><html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
  var mCharts = echarts.init(document.querySelector("div"))
  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,
        itemStyle: {
       
          color: {
       
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: