Echars图表
主要是以图表形式展示数据,功能强大,上手简单。
使用JS开发的。
开源的。
兼容性强。
特性
- 有丰富的可视化类型:折线图,散点图,饼图,k线图…
- 多种数据格式无需转化直接使用
- 千万数据集合
- 移动端优化(可以通过手指实现缩放)
- 采用多种方式进行渲染(canvas,SVG,…)
- 动态数据
- 绚丽特效
使用
- 独立版本
- 使用CDN版本(网络差的时候,效果不会显示)
- NPM方法(npm install echarts --save)(引用require(“echarts"))
eg:
效果如图显示
代码如下显示:
<!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>
</head>
<body>
<!-- 为Echarts准备一个具备宽高的dom -->
<div id="main" style="width: 600px; height: 400px;"></div>
<!-- 引入Echarts -->
<script src="./echarts.min.js"></script>
<script>
// 基于准备好的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,10,20,15,20,5]
}]
};
//使用刚刚指定的配置项和数据显示图表
myChart.setOption(option)
</script>
</body>
</html>
配置语法
1.创建页面,引入echarts文件
<!-- 引入Echarts -->
<script src="./echarts.min.js"></script>
2.为Echarts准备一个固定宽高的DOM容器
<!-- 为Echarts准备一个具备宽高的dom -->
<div id="main" style="width: 600px; height: 400px;"></div>
3.设置配置信息—Echarts库/json格式来配置
var mycharts = echarts.init(document.getElementById(‘main’)).setOption(option);
这里 option 表示使用 json 数据格式的配置来绘制图表
(1)标题:为图表配置标题
title: {
text: '第一个 ECharts 实例’第 5 页 共 7 页
}
(2)提示信息:
tooltip: {},
(3)图例组件:
展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。
(4)X 轴:
xAxis: {
data: [“衬衫”,“羊毛衫”,“雪纺衫”,“裤子”,“高跟鞋”,“袜子”]
}
(5)Y 轴:
yAxis: {}
(6)系列列表:每个系列通过 type 决定自己的图表类型:
每个系列通过 type 决定自己的图表类型:
type: ‘bar’:柱状/条形图
type: ‘line’:折线/面积图
type: ‘pie’:饼图第 6 页 共 7 页
type: ‘scatter’:散点(气泡)图
type: ‘effectScatter’:带有涟漪特效动画的散点(气泡)
type: ‘radar’:雷达图
type: ‘tree’:树型图
type: ‘treemap’:树型图
type: ‘sunburst’:旭日图
type: ‘boxplot’:箱形图
type: ‘candlestick’:K 线图
type: ‘heatmap’:热力图
type: ‘map’:地图
type: ‘parallel’:平行坐标系的系列
type: ‘lines’:线图
type: ‘graph’:关系图
type: ‘sankey’:桑基图
type: ‘funnel’:漏斗图
type: ‘gauge’:仪表盘
type: ‘pictorialBar’:象形柱图
type: ‘themeRiver’:主题河流
type: ‘custom’:自定义系列