echarts 常用组件
组件以对象元素的形式写在option中,以达到配置图标的目的。
标题 title
包含以下属性:
- 主标题 text
- 副标题 subtext
- 位置 left
- 主标题样式 textStyle
- 副标题样式 subtextStyle
- 可见性 show
绘图步骤
- 建立dom容器
- 引入Echarts
- 实例化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>Document</title>
<script src="./echarts/dist/echarts.min.js"></script>
<!-- 汉化包 -->
<script src="./echarts/i18n/langZH.js"></script>
<!-- <style>
#main{
width: 800px;
height: 600px;
}
</style> -->
</head>
<body>
<div id="main"></div>
<script>
//1.获取到div
var main = document.getElementById("main")
//2.初始化图表
//第一种情况:此情况是已经以前给图标容器设置好大小
// var myEcharts = echarts.init(main)
//第二种:在未指定图表容器大小时可以再图表初始化时给容器指定大小
var myEcharts = echarts.init(main,null,{
width:800,
height:600
})
//3.设置数据及格式
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
}]
};
//4.
myEcharts.setOption(option)
//实现响应式容器大小的改变
window.onreset = function(){
myEcharts.resize()
}
</script>
</body>
</html>
练习案例
<!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>
<script src="./echarts/dist/echarts.min.js"></script>
<!-- 汉化包 -->
<script src="./echarts/i18n/langZH.js"></script>
</head>
<body>
<div id="main"></div>
<script>
//1.获取到div
var main = document.getElementById("main")
//2.初始化图表
//第一种情况:此情况是已经以前给图标容器设置好大小
// var myEcharts = echarts.init(main)
//第二种:在未指定图表容器大小时可以再图表初始化时给容器指定大小
var myEcharts = echarts.init(main,null,{
width:800,
height:600
})
//3.设置数据及格式
option = {
title:{
show:true,
text:"产品销量图"
},
legend:{
//强行设置文本为红色
icon:'circle',
//设置文本为红色
textStyle:{
color:'red',
fontSize:20
},
/* orient:"Horizontal",
top:20 */
},
dataset:{
source:[
['月份','降水量','温度'],
['1月',2.7,-3.7],
['2月',4.9,-0.7],
['3月',8.3,5.8],
['4月',21.2,14.2],
['5月',32.2,19.9],
['6月',78.1,24.4],
['7月',185.2,26.2],
['8月',159.7,24.8],
['9月',45.5,20.0],
['10月',21.8,13.1],
['11月',7.4,4.6],
['12月',2.8,-1.5],
]
},
xAxis: {
type: 'category',
name:"月份"
},
yAxis: [{
type: 'value',
name:"降水量"
},{
type: 'value',
name:"温度"
}],
series: [
{
type: 'bar',
yAxisIndex:0
},
{
type: 'line',
yAxisIndex:1
},
]
};
//4.
myEcharts.setOption(option)
//实现响应式容器大小的改变
window.onreset = function(){
myEcharts.resize()
}
</script>
</body>
</html>