Echarts使用第一天-cnblog

Echarts使用第一天

1.使用

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
        div.box {
            width: 400px;
            height: 400px;
            background-color: pink;
        }
    </style>
    <script src="../lib/echarts.js"></script>
 
</head>
 
<body>
    <div class="box">
 
    </div>
 
    <script>
        // 图表初始化
 
        var Mychart = echarts.init(document.querySelector('div'));
 
        // 设置option
        var option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [{
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [{
                    value: 1048,
                    name: 'Search Engine'
                }, {
                    value: 735,
                    name: 'Direct'
                }, {
                    value: 580,
                    name: 'Email'
                }, {
                    value: 484,
                    name: 'Union Ads'
                }, {
                    value: 300,
                    name: 'Video Ads'
                }]
            }]
        };
 
        Mychart.setOption(option);
    </script>
</body>
 
</html>

效果图

注意点

选择dom容器时，使用标签选择器会出现bug，原因好像是如果容器没有设置class，id，或其他属性，会出问题

2. 一些属性

2.1 grid属性的注意点

QQ截图20220315151224

2.2 color设置颜色

posted @ 2023-02-04 11:27 凌歆阅读(21) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· HTML与CSS学习第16天

· HTML与CSS学习第3天

· echarts

· 2022-07-29 echarts的使用

· echarts一些配置

公告

昵称：凌歆
园龄： 2年1个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

Echarts使用第一天-cnblog

Echarts使用第一天

1.使用

示例

注意点

2. 一些属性

2.1 grid属性的注意点

2.2 color设置颜色

公告

搜索

常用链接

我的标签

随笔分类 (68)

随笔档案 (142)

阅读排行榜

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<style>
	div.box {
	width: 400px;
	height: 400px;
	background-color: pink;
	}
	</style>
	<script src="../lib/echarts.js"></script>

	</head>

	<body>
	<div class="box">

	</div>

	<script>
	// 图表初始化

	var Mychart = echarts.init(document.querySelector('div'));

	// 设置option
	var option = {
	tooltip: {
	trigger: 'item'
	},
	legend: {
	top: '5%',
	left: 'center'
	},
	series: [{
	name: 'Access From',
	type: 'pie',
	radius: ['40%', '70%'],
	avoidLabelOverlap: false,
	itemStyle: {
	borderRadius: 10,
	borderColor: '#fff',
	borderWidth: 2
	},
	label: {
	show: false,
	position: 'center'
	},
	emphasis: {
	label: {
	show: true,
	fontSize: '40',
	fontWeight: 'bold'
	}
	},
	labelLine: {
	show: false
	},
	data: [{
	value: 1048,
	name: 'Search Engine'
	}, {
	value: 735,
	name: 'Direct'
	}, {
	value: 580,
	name: 'Email'
	}, {
	value: 484,
	name: 'Union Ads'
	}, {
	value: 300,
	name: 'Video Ads'
	}]
	}]
	};

	Mychart.setOption(option);
	</script>
	</body>

	</html>