ECharts常用配置
官网地址
完整列子
<!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>ECharts的常见使用</title>
<style>
/* 2、为ECharts准备一个具备大小(宽高)的Dom */
.box {
width: 600px;
height: 600px;
background-color: azure;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box"></div>
<!-- 1、下载并引用 -->
<script src="../ECharts/js/echarts.min.js"></script>
<script>
// 3、初始化echarts实例
var myChart = echarts.init(document.querySelector('.box'));
//4、指定图表的配置项和数据
var option = {
// 设置标题
title: {
text: '标题'
},
// 提示框组件:具体取值可参看:文档/配置项手册/tooltip
tooltip: {
trigger: 'axis'
},
//图例组件
legend: {
//当series有了name值时,legend里面的data可以不写
// data: ['图例组件1', '图例组件2', '图例组件3', '图例组件4', '图例组件5']
},
//网格配置
//grid可以控制线形图 柱状图的大小
grid: {
left: '5%',
right: '5%',
bottom: '10%',
//是否显示刻度标签 如果是true就显示
containLabel: true
},
//工具箱组件 可以另存为图片等功能
toolbox: {
feature: {
saveAsImage: {}
}
},
//设置X轴的相关配置
xAxis: {
type: 'category',
//是否让线条和坐标轴有缝隙
boundaryGap: false,
data: ['x1', 'x2', 'x3', 'x4', 'x5', 'x6', 'x7']
},
//设置Y轴的相关配置
yAxis: {
type: 'value',
},
// 设置线条颜色,注意后面是个数组
color: ['red', 'pink', 'green', 'blue', 'orange'],
//系列图表配置 决定哪种类型的图表
series: [
{
name: '图例组件1',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '图例组件2',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '图例组件3',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '图例组件4',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '图例组件5',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
//5. 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>