ECharts高级-显示相关

最新推荐文章于 2023-04-22 16:17:53 发布

SunACong

最新推荐文章于 2023-04-22 16:17:53 发布

阅读量417

点赞数 1

分类专栏： ECharts 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_44808710/article/details/124907100

版权

ECharts 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

显示相关

主题
调色盘
样式
- 直接样式
- 高亮样式
自适应

主题

引入主题的步骤
1. 如果引入的是系统内置的主题 light dark直接在init方法第二个参数的位置填入
2. 引入其他主题需要先引入对应的js文件，然后init方法第二个参数放置
图表代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主题使用</title>
    <script src="js/lib/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	<!--引入主题的js文件 -->
    <script src="js/theme/shine.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
		//内置主题
        // 内置两个主题light 和 dark 是init的第二个参数
		//引用上面js文件里面的注册主题名字和文件名称无关
        var myChart = echarts.init(document.querySelector('div'),'vintage');
     
        var option = {
            legend: {
                data:['销量']
            },
            xAxis: {
				type:'category',
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: { 
				type:'value',
			},
            series: [
				{
					name: '销量',
					type: 'bar',
					data: [5, 20, 36, 10, 10, 20],
				}
			]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

引入的js文件

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
}(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    };
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    var colorPalette = ['#d87c7c','#919e8b', '#d7ab82',  '#6e7074','#61a0a8','#efa18d', '#787464', '#cc7e63', '#724e58', '#4b565b'];
    echarts.registerTheme('vintage', {
        color: colorPalette,
        backgroundColor: '#fef8ef',
        graph: {
            color: colorPalette
        }
    });
}));

在这里插入图片描述

调色盘

主题调色盘

上面主题引入的js文件中的主题调色盘

全局调色盘

 var option = {
		//全局调色盘 会覆盖主题调色盘
		color:['red','green','blue','skyblue','purple'],
    }

局部调色盘

 var option = {
		series:[
			{	
				//局部调色盘 会覆盖全局调色盘
				color:['pink','yellow','black','orange','red'],
			}
		]
    }

颜色渐变

线性渐变

series: [
	{
		name: '销量',
		type: 'bar',
		data: [5, 20, 36, 10, 10, 20],
		itemStyle:{
			color:{
				type:'linear', //线性渐变
				x:0,
				y:0,
				x2:0,
				y2:1,
				colorStops:[
					{
						offset:0,color:'red' //百分之0处是红色
					},
					{
						offset:1,color:'blue' //百分之0处是红色
					}
				]
			} 
		}
	}
]

在这里插入图片描述

径向渐变

series: [
	{
		name: '销量',
		type: 'bar',
		data: [5, 20, 36, 10, 10, 20],
		itemStyle:{
			color:{
				type:'linear', //线性渐变
				x:0,
				y:0,
				x2:0,
				y2:1,
				colorStops:[
					{
						offset:0,color:'red' //百分之0处是红色
					},
					{
						offset:1,color:'blue' //百分之0处是红色
					}
				]
			} 
		}
	}
]

在这里插入图片描述

样式

直接样式

itemStyle
textStyle
lineStyle
areaStyle
label

<!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>样式</title>
  <script src="js/lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:600px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
	var peiData = [
		{
			name:'淘宝',
			value:11231,
			//控制淘宝这一区域的颜色
			itemStyle:{
				color:'skyblue'
			},
			//设置label的样式
			label:{
				color:'blue'
			}
		},
		{
			name:'京东',
			value:22637
		},
		{
			name:'唯品会',
			value:6123
		},
		{
			name:'1号店',
			value:8989
		},
		{
			name:'聚美优品',
			value:6700
		}
	]
    var option = {
		title:{
			text:'饼图测试',
			//针对标题样式
			textStyle:{
				color:'blue'
			}
		},
		series:[
			{	
				type:'pie',
				data: peiData,
				label:{
					show:true,
					formatter:function(arg){
						console.log(arg);
						return arg.name+'平台'+arg.value+'元\n' +arg.percent+'%' 
					}
				},
				radius:'50%',
				selectedMode:'multiple',
				selectedOffset:30
			}
		]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

在这里插入图片描述

高亮样式

优先级会高，会覆盖主题中，调色盘的效果

<!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>样式</title>
  <script src="js/lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:600px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
	var peiData = [
		{
			name:'淘宝',
			value:11231,
			//控制淘宝这一区域的颜色
			itemStyle:{
				color:'skyblue'
			},
			//设置label的样式
			label:{
				color:'blue'
			},
			//高亮样式 被emphasis包裹住
			emphasis:{
				itemStyle:{
					color:'pink'
				},
				//设置label的样式
				label:{
					color:'blue'
				},
			}
		},
		{
			name:'京东',
			value:22637
		},
		{
			name:'唯品会',
			value:6123
		},
		{
			name:'1号店',
			value:8989
		},
		{
			name:'聚美优品',
			value:6700
		}
	]
    var option = {
		title:{
			text:'饼图测试',
			//针对标题样式
			textStyle:{
				color:'blue'
			}
		},
		series:[
			{	
				type:'pie',
				data: peiData,
				label:{
					show:true,
					formatter:function(arg){
						console.log(arg);
						return arg.name+'平台'+arg.value+'元\n' +arg.percent+'%' 
					}
				},
				radius:'50%',
				selectedMode:'multiple',
				selectedOffset:30
			}
		]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

在这里插入图片描述

自适应

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>颜色渐变</title>
    <script src="js/lib/echarts.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id="main" style="height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.querySelector('div'));
     
        var option = {
            legend: {
                data:['销量']
            },
            xAxis: {
				type:'category',
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: { 
				type:'value',
			},
            series: [
				{
					name: '销量',
					type: 'bar',
					data: [5, 20, 36, 10, 10, 20],
					itemStyle:{
						color:{
							type:'linear', //线性渐变
							x:0,
							y:0,
							x2:0,
							y2:1,
							colorStops:[
								{
									offset:0,color:'red' //百分之0处是红色
								},
								{
									offset:1,color:'blue' //百分之0处是红色
								}
								
							]
						},
					}
				}
			]
        };
        myChart.setOption(option);
		//监听window窗口大小变化
/* 		window.onresize = function(){
			console.log('window.onize');
			//调用echarts的resiez方法
			myChart.resize();
		} */
		window.onresize = myChart.resize;
    </script>
</body>
</html>

在这里插入图片描述

SunACong

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ECharts高级-显示相关

显示相关主题调色盘主题调色盘全局调色盘局部调色盘颜色渐变线性渐变径向渐变样式直接样式高亮样式自适应主题引入主题的步骤如果引入的是系统内置的主题 light dark直接在init方法第二个参数的位置填入引入其他主题需要先引入对应的js文件，然后init方法第二个参数放置图表代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>主题使用<
复制链接

扫一扫

专栏目录