Echarts-（十一）Echarts的个性化设置

本文最后更新于：December 3, 2021 pm

Apache ECharts一个基于 JavaScript 的开源可视化图表库。ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

目录

1.主题设置

1.1 内置主题

echarts自带两套主题：light、dark。只需要在初始化echarts实例的时候，在第二个参数位置写上主题名称即可。但这种有一定的局限性。

1
2
// 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'),'dark');

1.2 自定义主题

官方自定义设计主题

在这里，你可以设计自己想要的任何主题。左侧是参数，右侧是预览。在自己设计好了主题后，在左侧最上面可以修改主题名称，然后再点击下载主题，这里以下载JS版本为例。下载之后，再在页面中引入，再和内置主题设置一样的操作。如下：

1
2
<script src="loong.js"></script> //引入主题
var myChart = echarts.init(document.getElementById('main'),'loong'); //使用主题

📢注意：主题的名称本质不是文件名（如果你只是直接下下来用，这样理解也没毛病）。你可以自行打开你下载下来的主题文件，找到echarts.registerTheme，这里的第一个参数才是真正主题的名称。可以自行修改测试。

2.调色盘

它是一组颜色，图像、系列会自动从其中选择颜色。比如：饼图的不同区域的颜色。一般存在主题调色盘、全局调色盘（option）会覆盖主题里面的调色盘、局部调色盘（series）会覆盖全局调色盘。（调色盘遵循就近原则，即优先级：局部>全局>主题）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//全局调色盘
var option = {	
        color: ['red','yellow','green','blue','skyblue'],
        series: [
          {
            name: '销量',
            type: 'pie',
            data: [5, 20, 36, 10, 10, 33]
          }
        ]
}

//局部调色盘
series: [
          {
            name: '销量',
            type: 'pie',
			color: ['red','yellow','green','blue','skyblue'],
            data: [5, 20, 36, 10, 10, 33]
          }
        ]

2.1 颜色渐变

2.1.1 线性渐变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
itemStyle: {
 color: {
   type: 'linear',
   x: 0,
   y: 0,
   x2: 0,
   y2: 1, //从(0,0)到(0,1)，即从上到下
   colorStops: [{
     offset: 0,
     color: 'red' //0%处的颜色
   },
   {
     offset: 1,
     color: 'blue' //100%处的颜色
   }
   ],
   globalCoord: false //缺省为 false
 }
}

具体示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
series: [
          {
            name: '销量',
            type: 'bar',
			itemStyle: {
			 color: {
			   type: 'linear',
			   x: 0,
			   y: 0,
			   x2: 0,
			   y2: 1, //从(0,0)到(0,1)，即从上到下
			   colorStops: [{
			     offset: 0,
			     color: 'red' //0%处的颜色
			   },
			   {
			     offset: 1,
			     color: 'blue' //100%处的颜色
			   }
			   ],
			   globalCoord: false //缺省为 false
			 }
			},
            data: [5, 20, 36, 10, 10, 33]
          }
        ]

2.1.2 径向渐变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
itemStyle: {
 color: {
   type: 'radial',
   x: 0.5,
   y: 0.5,
   r: 0.5,
   colorStops: [{
     offset: 0,
     color: 'red' //0%处的颜色
   },
   {
     offset: 1,
     color: 'blue' //100%处的颜色
   }
   ]
 }
}

具体示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
series: [
          {
            name: '销量',
            type: 'bar',
			itemStyle: {
			 color: {
			   type: 'radial',
			   x: 0.5,
			   y: 0.5,
			   r: 0.5,
			   colorStops: [{
			     offset: 0,
			     color: 'red' //0%处的颜色
			   },
			   {
			     offset: 1,
			     color: 'blue' //100%处的颜色
			   }
			   ]
			 }
			},
            data: [5, 20, 36, 10, 10, 33]
          }
        ]

3.样式

3.1 直接样式

itemStyle（用于区域）、textStyle（用于标题）、lineStyle（用于折线）、areaStyle（用于阴影）、label（用于文字）。

3.2 高亮样式

在emphasis中包裹直接样式，即可达到高亮目的。

4.自适应

在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。监听图表容器的大小并改变图表大小。

比如，图表容器是一个高度为 400px、宽度为页面 100% 的节点，你希望在浏览器宽度改变的时候，始终保持图表宽度是页面的 100%。这种情况下，可以监听页面的 window.onresize 事件获取浏览器大小改变的事件，然后调用 echartsInstance.resize 改变图表的大小。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.min.js"></script>
	<style>
		#main,html,body{
			width: 100%;
		}
		#main{
			height: 400px;
		}
	</style>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
	  window.onresize=function(){ //关键
		  myChart.resize();
	  };
      // 指定图表的配置项和数据
      var option = {		  
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
			itemStyle: {
			 color: {
			   type: 'radial',
			   x: 0.5,
			   y: 0.5,
			   r: 0.5,
			   colorStops: [{
			     offset: 0,
			     color: 'red' //0%处的颜色
			   },
			   {
			     offset: 1,
			     color: 'blue' //100%处的颜色
			   }
			   ]
			 }
			},
            data: [5, 20, 36, 10, 10, 33]
          }
        ]
      };

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