009_调色盘和高亮样式_rgba调色盘-CSDN博客

本文链接：https://blog.csdn.net/aihiao/article/details/123518652

1. color调色盘

1.1. 调色盘, 可以在option中设置。它给定了一组颜色, 图例、系列会自动从其中选择颜色。可以设置全局的调色盘, 也可以设置系列自己专属的调色盘。

option = {
  // 全局调色盘。
  color: [
    '#c23531',
    '#2f4554',
    '#61a0a8',
    '#d48265',
    '#91c7ae',
    '#749f83',
    '#ca8622',
    '#bda29a',
    '#6e7074',
    '#546570',
    '#c4ccd3'
  ],

  series: [
    {
      type: 'bar',
      // 此系列自己的调色盘。
      color: [
        '#dd6b66',
        '#759aa0',
        '#e69d87',
        '#8dc1a9',
        '#ea7e53',
        '#eedd78',
        '#73a373',
        '#73b9bc',
        '#7289ab',
        '#91ca8c',
        '#f49f42'
      ]
      // ...
    },
    {
      type: 'pie',
      // 此系列自己的调色盘。
      color: [
        '#37A2DA',
        '#32C5E9',
        '#67E0E3',
        '#9FE6B8',
        '#FFDB5C',
        '#ff9f7f',
        '#fb7293',
        '#E062AE',
        '#E690D1',
        '#e7bcf3',
        '#9d96f5',
        '#8378EA',
        '#96BFFF'
      ]
      // ...
    }
  ]
};

1.2. 如果系列没有设置颜色, 则会依次循环从该列表中取颜色作为系列颜色。默认为: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']。

1.3. 支持使用RGB表示颜色, 比如: 'rgb(128, 128, 128)', 如果想要加上alpha通道表示不透明度, 可以使用RGBA, 比如: 'rgba(128, 128, 128, 0.5)', 也可以使用十六进制格式, 比如: '#ccc'。

1.4. 支持渐变色或者纹理填充。

1.5. 代码

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

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '全局调色盘'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['访问来源']
		        },
		        // 全局调色盘
			  	color: [
				    '#FF0000',
				    '#00FF00',
				    '#0000FF',
				    '#000000',
				    '#800000'
			  	],
		        // 系列列表
		        series: [
		          {
		            name: '访问来源', // 系列名称
		            type: 'pie', // 系列图表类型
		            radius: '55%',  // 饼图的半径, 直径为可视区尺寸(容器高宽中较小一项)的55%长度。
		            data: [ // 系列中的数据内容
		            	{ value: 235, name: '视频广告' },
                        { value: 274, name: '联盟广告' },
                        { value: 310, name: '邮件营销' },
                        { value: 335, name: '直接访问' },
                        { value: 400, name: '搜索引擎' }
		            ]
		          }
		        ]
	      	};

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

1.6. 效果图

2. 高亮的样式

2.1. 在鼠标悬浮到图形元素上时, 一般会出现高亮的样式。默认情况下, 高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义, 主要是通过emphasis属性来定制。emphsis中的结构, 和普通样式的结构相同。

2.2. 代码

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

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '高亮的样式'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['访问来源']
		        },
		        // 全局调色盘
			  	color: [
				    'green',
				    '#00FF00',
				    '#0000FF',
				    '#000000',
				    '#800000'
			  	],
		        // 系列列表
		        series: [
		          {
		            name: '访问来源', // 系列名称
		            type: 'pie', // 系列图表类型
		            radius: '55%',  // 饼图的半径, 直径为可视区尺寸(容器高宽中较小一项)的55%长度。
		            data: [ // 系列中的数据内容
		            	{ value: 235, name: '视频广告' },
                        { value: 274, name: '联盟广告' },
                        { value: 310, name: '邮件营销' },
                        { value: 335, name: '直接访问' },
                        { value: 400, name: '搜索引擎' }
		            ],
		            emphasis: { // 高亮样式。
		              itemStyle: {
		            	color: '#FF0000' // 高亮时点的颜色。
		              }
		            }
		          }
		        ]
	      	};

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

2.3. 效果图