目录
一,源码与使用
源码下载
https://github.com/wanwang2/qui/blob/master/echarts/libs/echarts.min.js
运用,生成简单的柱形图
获取div
var myChart = echarts.init(document.getElementById('main'));
设置option
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
设置内容
myChart.setOption(option);
栗子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="./libs/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
效果图
二,生成饼图
容器
<!-- 容器 -->
<div style="width: 50%;height: 50%;background: #888">
<div id="main_1" style="width: 33%;height:300px;float:left;"></div>
<div id="main_2" style="width: 33%;height:300px;float:left;"></div>
<div id="main_3" style="width: 33%;height:300px;float:left;"></div>
</div>
配置
var myChart1 = echarts.init(document.getElementById('main_1'));
// 指定图表的配置项和数据
option1 = {
title: {
text: '鱼塘',
bottom: 0
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'horizontal',
y: 'bottom',
data:['一般','较大','重大']
},
series: [
{
name:'严重程度',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'一般'},
{value:310, name:'较大'},
{value:234, name:'重大'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option1);
循环三次,效果图
三,雷达图
配置
function getRadialOption() {
// 指定图表的配置项和数据
var option = {
angleAxis: {
type: 'category',
data: ['安宁', '罗汉', '鱼塘'],
z: 4
},
radiusAxis: {
},
polar: {
},
series: [{
type: 'bar',
data: [1, 1, 1],
coordinateSystem: 'polar',
name: 'A',
stack: 'a'
}, {
type: 'bar',
data: [1, 1, 1],
coordinateSystem: 'polar',
name: 'B',
stack: 'a'
}],
legend: {
show: false,
data: ['A', 'B']
}
};
return option;
}
效果图
四,总结
正确的echarts图表只需要两步
1,引进echarts.js
2,配置数据