Echart数据库可视化架构
1下载使用
在html的head标签中引入文件
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src=".echarts.js"></script>
<title></title>
</head>
</html>
2节点数据绑定与配置
echart中的数据绑定都需要与html中的节点相关
<div id="main" style="width:600px height:400px">
<script>
//主题
var myEcharts=echarts.inti(dom,'dark')
option={
//全局调色的设定
color:[
'#adcffff'
]
title:{
text:'销量表'
},
xAxis:{
data:['衬衫','羊毛衫','大衣','棉袄']
},
yAxis:{},
series:[
{
name:'销量',
type:'bar',
data:[15,20,35,5]
}
]
};
//使用定义的配置渲染图表
</script>
图片中具体配置以及作用
| 名称 | 作用 |
|---|---|
| xAxis | 横轴 |
| yAxis | 纵轴 |
| legend | 图例用作图表的注释 |
| series | 指定图的类型和数值样式，展示有多种数据时用{}括起来 |
图表的类型
| 名称 | 作用 |
|---|---|
| bar | 柱状图 |
| category | 折线图 |
| pei | 饼状图 |
| series | 散点图 |
式例
参考代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="./js/echarts.js"></script>
<title></title>
</head>
<body>
<div id="mid_box1" style="width: 1200px; margin: auto;">
<div id="mybar1" style="width:600px;height: 400px; float: left;">
</div>
<div id="mypei1" style="width:600px;height:400px;float: right;"></div>
</div>
<div id="mid_box2" style="margin: auto; width: 1200px;">
<div id="mybar2" style="width:600px;height: 400px; float: left;">
</div>
<div id="myscatter" style="width:600px;height:400px;float: right;"></div>
</div>
<div id="mid_box3" style="margin: auto; width: 1200px;">
<div id="mybar3" style="width:600px;height: 400px; float: left;">
</div>
<div id="myline" style="width:600px;height:400px;float: right;"></div>
</div>
<script type="text/javascript">
var zhuzhuangtu=echarts.init(document.getElementById('mybar1'));//柱状图
var diezhuangtu=echarts.init(document.getElementById('mybar2'));//叠状图
var bingzhuangtu=echarts.init(document.getElementById('mypei1'));
var sandiantu=echarts.init(document.getElementById('myscatter'));//散点图
var zhuzhuangtu2=echarts.init(document.getElementById('mybar3'));//柱状排序
var zhexiantu=echarts.init(document.getElementById('myline'));//柱状排序
var option1={
title:{
text:'柱状图'
},
tooltip:{},
legend:{
data:['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
//也可以使用命令npm install echarts安装echarts模块
//使用刚指定配置渲染
zhuzhuangtu.setOption(option1);
var option2={
series:[
{
type:'pie',
data:[
{
value:20,
name:'报纸'
},
{
value:40,
name:'杂志'
},
{
value:50,
name:'期刊'
}
]
}
]
};
bingzhuangtu.setOption(option2);
var option3={
title:{
text:'叠桩图'
},
tooltip:{},
legend:{
data:['1月销量',
'2月销量'
]
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '1月销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
stack:'x'
},
{
name: '2月销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
stack:'x'
}
]
};
diezhuangtu.setOption(option3);
var option4={
title:{
text:'散点图'
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '1月销量',
type: 'scatter',
data: [5, 20, 36, 10, 10, 20],
stack:'x'
},
{
name: '2月销量',
type: 'scatter',
data: [5, 20, 36, 10, 10, 20],
stack:'x'
}
]
};
sandiantu.setOption(option4);
var option5={
title:{
text:'纵向柱状图'
},
xAxis: {
max:'dataMax'//用横轴数据作为最大值
},
yAxis: {
type:'category',
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
label:{
show:true,
position:'right'
}
}
],
legend:{
data:['销量']
}
};
zhuzhuangtu2.setOption(option5);
var option6={
title:{
text:'折线图'
},
xAxis: {
type:'category',
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
},
yAxis: {
type:'value'
},
series: [
{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20],
}
],
legend:{
data:['销量']
}
};
zhexiantu.setOption(option6);
</script>
</body>
</html>