ECharts简介
ECharts 是使用 JavaScript 实现的一个开源可视化库.
Echarts的引入
通过官网下载echarts的js文件
通过npm或者cnpm下载,下载后这样使用:
var echarts = request('echarts');ECharts 的基本使用
步骤一: 下载并引入 ECharts.js 文件------->图表依赖于这个 js 文件
步骤二: 准备一个具备大小的 DOM 容器---->生成的图表会放在这个容器中
步骤三: 初始化 ECharts 实例对象-------->实例化 echarts 对象
步骤四: 指定配置项和数据(options)------->根据具体需求更改配置选项
步骤五: 将配置项设置给 ECharts 实例对象–>让 echarts 对象根据修改好的配置生效
ECharts 图表生成实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="echarts.min.js"></script>
<style>
.box{
width: 400px;
height: 400px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var myChart = echarts.init(document.querySelector(".box"))
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: 20,
fontWeight: 'bold'
}
},
labelLine: {
show: true
},
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>相关配置
title:标题组件
tooltip:提示框组件
legend:图例组件
toolbox:工具栏
grid:直角坐标系内绘图网格
xAxis:直角坐标系 grid 中的 x 轴
yAxis:直角坐标系 gird 中的 y 轴
series:系列列表,每个系列通过 type 决定自己的图表类型(什么类型的图标)
color:调色盘颜色列表
查看配置项手册
根据不同的属性进行修改,达到想要的效果
注意:
data数据元素数保持一致,否则多余部分不会显示