Echarts是什么?
- ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。
- ECharts 遵循 Apache-2.0 开源协议,免费商用。
- ECharts 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)及兼容多种设备,可随时随地任性展示。
Echarts的使用方法:
第一步:创建 HTML 页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
第二步: 为 ECharts 准备一个具备高宽的 DOM 容器
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
第三步: 设置配置信息
- ECharts 库使用 json 格式来配置。
echarts.init(document.getElementById(‘main’)).setOption(option);
- 标题
title: {text: ‘第一个 ECharts 实例’}
- 提示信息
tooltip: {}
- 图例组件
legend: {
data: [{
name: ‘系列1’,
// 强制设置图形为圆。
icon: ‘circle’,
// 设置文本为红色
textStyle: {
color: ‘red’
}
}]
}
- X 轴,Y 轴
xAxis: {
data: [“衬衫”,“羊毛衫”,“雪纺衫”,“裤子”,“高跟鞋”,“袜子”]
}
yAxis: {}
- 系列列表
series: [{
name: ‘销量’, // 系列名称
type: ‘bar’, // 系列图表类型
data: [5, 20, 36, 10, 10, 20] // 系列中的数据内容
}]
每个系列通过 type 决定自己的图表类型
type: 'bar':柱状/条形图
type: 'line':折线/面积图
type: 'pie':饼图
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':自定义系列
我的第一个Echarts
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<!-- 为echarts准备一个具备宽高的Dom -->
<div id="main" style="width: 1000px;height:800px;"></div>
</body>
<script>
//基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//折线图
//指定图标的配置项和数据
var option = {
//为图标配置标题
title: {
text: '第一个 ECharts 实例'
},
//标题字体大小修改
textStyle: {
fontSize: 40
},
//配置提示信息
tooltip: {},
//图例组件
legend: {
data:['销量']
},
//X轴 配置要在X轴显示的项
xAxis: {
//type: "category",
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
//X轴字体大小修改
axisLabel: {
textStyle: {
color: '#000',
fontSize:'25',
//itemSize:''
}
},
},
//Y轴 配置要在Y轴显示的项
yAxis: {},
//系列列表
series: [{
name: '销量',//系列名称
type: 'line',//系列图表类型
data: [5, 20, 36, 10, 10, 20]//系列中的数据内容
}],
/*
type: 'bar':柱状/条形图
type: 'line':折线/面积图
type: 'pie':饼图
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':自定义系列
*/
};
//使用刚指定的配置和数据显示图表
myChart.setOption(option)
</script>
</html>
成果如下图所示:
Echarts饼图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script src="https://www.runoob.com/static/js/wonderland.js"></script>
<style type="text/css">
</style>
</head>
<body>
<!-- 为echarts准备一个具备宽高的Dom -->
<div id="circle" style="width: 1000px;height:800px;"></div>
</body>
<script>
//基于准备好的dom,初始化echarts实例
var myCharttwo = echarts.init(document.getElementById('circle'));
//饼图
myCharttwo.setOption({
series : [
{
name: '访问来源',
type: 'pie', // 设置图表类型为饼图
radius: '55%', // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。
data:[ // 数据数组,name 为数据项名称,value 为数据项值
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
]
}
]
})
/*
type: 'bar':柱状/条形图
type: 'line':折线/面积图
type: 'pie':饼图
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':自定义系列
*/
};
//使用刚指定的配置和数据显示图表
myChart.setOption(option)
</script>
</html>
ECharts 数据集(dataset):
ECharts 使用 dataset 管理数据。
dataset 组件用于单独的数据集声明,从而数据可以单独管理,被多个组件复用,并且可以基于数据指定数据到视觉的映射。
一个简单例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script src="https://www.runoob.com/static/js/wonderland.js"></script>
</head>
<body>
<!-- 为echarts准备一个具备宽高的Dom -->
<div id="main" style="width: 1000px;height:800px;"></div>
</body>
<script>
/*
ECharts数据集
ECharts使用dataset管理数据
dataset组件用于单独的数据集声明,从而数据可以单独管理,被多个组件复用,并且可以基于数据指定数据到视觉的映射
*/
var myChart = echarts.init(document.getElementById('main'));
var option={
legend:{},
tooltip:{},
dataset:{
//提供一份数据
source:[
['product', '2015', '2016', '2017'],
['西安', 43.3, 85.8, 93.7],
['北京', 83.1, 73.4, 55.1],
['兰州', 86.4, 65.2, 82.5],
['上海', 72.4, 53.9, 39.1]
]
},
// 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。
xAxis:{
type:'category',
axisLabel: {
textStyle: {
color: '#000',
fontSize:'25',
//itemSize:''
}
},
},
//声明一个Y轴,数值轴
yAxis:{},
// 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
安利两个网址: