标签：false name 第一天 show value Echarts cnblog option
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属性的注意点
2.2 color设置颜色
标签：false,
name,
第一天,
show,
value,
Echarts,
cnblog,
option
From： https://www.cnblogs.com/lingxin1123/p/17091026.html