ECharts的基本使用
2020-04-25 本文已影响0人
小疏林er
1、ECharts
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，兼容大部分浏览器，十分适合数据分析、展示。
官网地址：https://www.echartsjs.com/zh/index.html
下载地址：https://www.echartsjs.com/zh/download.html
2、快速上手
（1）、引入echarts.js文件。
echarts.min.js是压缩过的文件，适合发布时使用；echarts.js是未压缩的文件，适合开发时使用。
<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>（2）、准备一个具备宽高的Dom容器来放置生成的图标。
<div id="main" style="width: 600px;height:400px;"></div>（3）、初始化echerts实例
var myChart = echarts.init(document.getElementById('main'));（4）、准备图表的配置项和数据（option）
var option = {
title: {
text: 'ECharts 入门示例' //标题
},
tooltip: {}, //提示框组件
legend: { //图例组件
data:['销量']
},
xAxis: { //x轴
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {}, //y轴
series: [{ //系列列表。每个系列通过 type 决定自己的图表类型
name: '销量',
type: 'bar', //柱状图
data: [5, 20, 36, 10, 10, 20] //数据
}]
};
（5）、通过准备好的配置项和数据显示图表。
myChart.setOption(option);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts.js" type="text/javascript" charset="utf-8"></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: { //x轴
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {}, //y轴
series: [{ //系列列表。每个系列通过 type 决定自己的图表类型
name: '销量',
type: 'bar', //柱状图
data: [5, 20, 36, 10, 10, 20] //数据
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
image.png
3、常用的组件和配置项
官网术语速查手册https://www.echartsjs.com/zh/cheat-sheet.html
如果平时使用ECharts的频率不高的话，大致了解一下都有什么功能、组件即可，用的时候在官网找个案例，复制一下改改就可以了，使用起来十分方便，也很美观。
图标类型.png
组件.png
栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts.js" type="text/javascript" charset="utf-8"></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'));
// 指定图表的配置项和数据
option = {
backgroundColor: '#b3ffd2', //背景色
title: {
text: 'Customized Pie',
left: 'center', //水平居中
top: 20, //据顶端20px
textStyle: {
color: '#7e7e7e' //标题颜色
}
},
//提示框组件
tooltip: {
trigger: 'item', //触发类型：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
formatter: '{a} <br/>{b} : {c} ({d}%)' //提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
},
//视觉映射组件
visualMap: {
show: false , //
min: 80,
max: 600,
inRange: {
colorLightness: [0.5, 1], //图元亮度
color:'#ff4043' //图元颜色
}
},
series: [{
name: '访问来源',
type: 'pie', //饼图
radius: '55%',
center: ['50%', '50%'],
data: [{ //数据，可以通过Ajax直接传过来，有需要也可以写死
value: 335,
name: '直接访问'
},
{
value: 310,
name: '邮件营销'
},
{
value: 274,
name: '联盟广告'
},
{
value: 235,
name: '视频广告'
},
{
value: 400,
name: '搜索引擎'
}
].sort(function(a, b) { //对数组里的数据进行升序排序（饼图中顺时针）
return a.value - b.value;
}),
roseType: 'radius',
label: {
color: 'rgba(25, 10, 25, 76)' //标签颜色
},
labelLine: { //辅助线
lineStyle: {
color: 'rgba(65, 65, 65, 76)'
},
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)' //阴影颜色
},
//出现时动画效果
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function(idx) {
return Math.random() * 200;
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
image.png
