今天的任务是实现一个很好看的图表；先脱离数据写，等明天老板写好数据再渲染。
要求效果如图
echarts-demo
看了几天的文档了，今天才有信心实现出来，但是还有些样式不会。
其实看着文档来写，还是挺简单的。记录下步骤
1，引入echarts的js文件，先去官网下载好，用的是min的版本
<script src="./js/echarts.min.js"></script>
2,body里写一个div用来存放图表
<div id="first-box" class="echartbox" ></div>
3,在script里写表格
// 基于准备好的dom，初始化echarts实例
var firstChart = echarts.init(document.getElementById('first-box'),'purple-passion');
// 指定图表的配置项和数据
var option = {
title: {
text: ''
},
tooltip: {},
legend: {
data:['']
},
xAxis: {
data: ["2012","2013","2014","2015","2016","2017",'2018','2019']
},
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20,30,50]
},
]
};
// 使用刚指定的配置项和数据显示图表。
firstChart.setOption(option);
4，在表格底下，加一个控制组件,在option里面加
dataZoom: [
{ // 这个dataZoom组件，默认控制x轴。
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 0, // 左边在 10% 的位置。
end: 70, // 右边在 60% 的位置。
}
],
5，加上样式
在官方文档里面可以自己设置样式并引入的。datazoom的样式不会改，后面再想想。
4d2c758b2c89bfe34a98b5cc2d4b8a1.png
然后在JS文件里，找到对应的样式名称，覆盖在下面这个'purple-passion'字符串里。
var firstChart = echarts.init(document.getElementById('first-box'),'purple-passion');6，具体代码
<!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/echarts.min.js"></script>
<script src="./js/style.js"></script>
<style>
.echartbox{
margin-top:30px;
width:700px;
height: 400px;
}
</style>
</head>
<body>
<div id="first-box" class="echartbox" ></div>
<div id="second-box" class="echartbox"></div>
<div id="third-box" class="echartbox"></div>
<script>
// 基于准备好的dom，初始化echarts实例
var firstChart = echarts.init(document.getElementById('first-box'),'purple-passion');
// 指定图表的配置项和数据
var option = {
title: {
text: ''
},
tooltip: {},
legend: {
data:['']
},
xAxis: {
data: ["2012","2013","2014","2015","2016","2017",'2018','2019']
},
yAxis: {},
dataZoom: [
{ // 这个dataZoom组件，默认控制x轴。
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 0, // 左边在 10% 的位置。
end: 70, // 右边在 60% 的位置。
}
],
series: [{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20,30,50]
},
]
};
// 使用刚指定的配置项和数据显示图表。
firstChart.setOption(option);
//第二个表格
var secondChart = echarts.init(document.getElementById('second-box'),'purple-passion');
// 指定图表的配置项和数据
var option = {
title: {
text: ''
},
tooltip: {},
legend: {
data:['']
},
xAxis: {
data: ["May","June","July","Aug","Set","Nov",'Otp','Dce']
},
yAxis: {},
dataZoom: [
{ // 这个dataZoom组件，默认控制x轴。
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 0, // 左边在 10% 的位置。
end: 70, // 右边在 60% 的位置。
}
],
series: [{
name: '销量',
type: 'line',
data: [15, 40, 36, 20, 10, 20,30,50]
},
]
};
// 使用刚指定的配置项和数据显示图表。
secondChart.setOption(option);
//第三个表格
var thirdChart = echarts.init(document.getElementById('third-box'),'purple-passion');
// 指定图表的配置项和数据
var option = {
title: {
text: ''
},
tooltip: {},
legend: {
data:['']
},
xAxis: {
data: ["1","2","3","4","5","6",'7','8']
},
yAxis: {},
dataZoom: [
{ // 这个dataZoom组件，默认控制x轴。
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 0, // 左边在 10% 的位置。
end: 70, // 右边在 60% 的位置。
}
],
series: [{
name: '销量',
type: 'line',
data: [35, 20, 36, 40, 10, 20,30,50]
},
]
};
// 使用刚指定的配置项和数据显示图表。
thirdChart.setOption(option);
</script>
</body>
</html>
网友评论