1. Echarts-介绍
常见的数据可视化库:
- D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
- ECharts.js 百度出品的一个开源 Javascript 数据可视化库
- Highcharts.js 国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
- AntV 蚂蚁金服全新一代数据可视化解决方案 等等
- Highcharts 和 Echarts 就像是 Office 和 WPS 的关系
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 [ZRender](https://github.com/ecomfe/zrender),提供直观,交互丰富,可高度个性化定制的数据可视化图官网地址: https://www.echartsjs.com/zh/index.html 表.
2. 使用步骤:
Echarts官网地址: https://www.echartsjs.com/zh/index.html
- 下载并引入echarts 插件文件到html页面中
- 准备一个具备大小的DOM容器(必须有高度和宽度)
- 初始化echarts实例对象 var myChart = echarts.init(document.getElementById('main'))
- 指定配置项和数据(option)
- 将配置项设置给echarts实例对象
举个例子:
<!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>
<style>
.box{
width: 300px;
height: 300px;
background-color: aliceblue;
}
</style>
</head>
<body>
<!-- 第二步: 准备一个具备大小的DOM容器 -->
<div class="box"></div>
<!-- 第一步: 下载并引入echarts.js文件 -->
<script src="js/echarts.min.js"></script>
<script>
// 第三步: 初始化实例对象 echarts.init(dom容器)
var myChart = echarts.init(document.querySelector(".box"))
// 第四步: 指定图标的配置项和数据
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>
需要了解的主要配置:series、xAxis、yAxis、grid、tooltip、title、legend、color
- series:系列列表.每个系列通过 type 决定自己的图表类型 [{}]
- xAxis:直角坐标系 grid 中的 x 轴
- yAxis:直角坐标系 grid 中的 y 轴
- grid:直角坐标系内绘图网格
- title:标题组件
- tooltip:提示框组件
- legend:图例组件
- color:调色盘颜色列表,是数组
- toolbox: 工具栏
注:若 series 里有 name 值,那么 legend 里的 data 可以删除。
3. 柱状图图标
立即执行函数的妙用:为了防止变量污染,减少命名冲突,可以采取立即执行函数的写法,因为里面的变量都是局部变量。
在html中引入echarts.min.js
<div class="panel bar">
<h2>柱形图</h2>
<div class="chart">图标</div>
</div>
<script src="js/echarts.min.js"></script>
<script src="js/index.js"></script>
// 柱状图模块1
(function () {
// 1,实例化对象
var myChart = echarts.init(document.querySelector(".bar .chart"))
// 2.指定配置项与数据、
var option = {
color: ["#2f89cf"],
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器,坐标轴触发有效
type: 'shadow', //默认为line直线
}
},
// 修改图表大小
grid: {
left: '0%',
top: "10px",
right: '0%',
bottom: '4%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ["旅游", "教育", "游戏", "医疗", "电商", "社交", "金融"],
axisTick: {
alignWithLabel: true
},
// 修改刻度标签相关样式
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
// 不显示坐标轴的线
axisLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
// 修改刻度标签相关样式
axisLabel: {
color: "rgba(255,255,255,.6)",
fontSize: "12"
},
// y轴线条改为2px
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
width: 2
}
},
// y轴分割线的样式
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
}
],
series: [
{
name: 'Direct',
type: 'bar',
barWidth: '35%',
data: [200, 300, 300, 900, 1500, 1200, 600],
itemStyle: {
// 修改柱子圆角
barBorderRadius: 5
}
}
]
};
// 3. 把配置项给实例对象
myChart.setOption(option)
// 4. 让图标跟随屏幕自动的去自适应
window.addEventListener("resize",function(){
myChart.resize()
})
})();
4. 折线图
<div class="panel line2">
<h2>折线图</h2>
<div class="chart">图标</div>
</div>
(function () {
var myChart = echarts.init(document.querySelector(".line2 .chart"))
var option = {
tooltip: {
trigger: 'axis',
},
legend: {
top: "0%",
textStyle: {
color: "rgba(255, 255, 255, .5)",
fontSize: 12
},
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: "10",
top: "30",
right: "10",
bottom: "10",
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"],
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12
}
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)"
}
}
}
],
yAxis: [
{
type: 'value',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
},
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12
}
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)"
}
}
}
],
series: [
{
name: 'Email',
type: 'line',
smooth: true,
emphasis: {
focus: 'series'
},
data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40],
lineStyle: { //单独修改当前线条的样式
color: "#0184d5",
width: 2
},
areaStyle: { //填充颜色设置
// color:"pink"
// 渐变色
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
},
{
offset: 1,
color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)"
},
symbol: "circle", //设置拐点
symbolSize: 8, //设置拐点大小
showSymbol: false, //开始不显示拐点,鼠标经过才显示
itemStyle: { //设置拐点颜色
color: "#0184d5",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
},
},
{
name: 'Union Ads',
type: 'line',
areaStyle: {},
smooth: true,
areaStyle: {
lineStyle: {
normal: {
color: "#00d887",
width: 2
}
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(0, 216, 135, 0.4)"
},
{
offset: 0.8,
color: "rgba(0, 216, 135, 0.1)"
}
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)"
}
},
symbol: "circle", // 设置拐点 小圆点
symbolSize: 5, // 拐点大小
itemStyle: { // 设置拐点颜色以及边框
color: "#00d887",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 12
},
showSymbol: false, // 开始不显示拐点, 鼠标经过显示
emphasis: {
focus: 'series'
},
data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20],
},
]
}
myChart.setOption(option)
window.addEventListener("resize", function () {
myChart.resize()
})
})();
5. 饼图
<div class="panel pie2">
<h2>饼形图</h2>
<div class="chart">图标</div>
</div>
(function () {
var myChart = echarts.init(document.querySelector(".pie2 .chart"))
var option = {
color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
// left: 'center',
bottom: '0%',
itemWidth:10,
itemHeight:10,
textStyle:{
color:"rgba(255,255,255,.5)",
fontSize:10
}
},
series: [
{
name: '地区分布',
type: 'pie',
radius: ["10%", "70%"],
center: ['50%', '50%'],
roseType: 'radius',
itemStyle: {
borderRadius: 5
},
data: [
{ value: 20, name: '云南' },
{ value: 26, name: '北京' },
{ value: 24, name: '山东' },
{ value: 25, name: '河北' },
{ value: 20, name: '江苏' },
{ value: 25, name: '浙江' },
{ value: 30, name: '四川' },
{ value: 42, name: '湖北' }
],
label: {
fontSize: 10 //图形文字
},
labelLine: { //连接文字与图像的线条
length: 6, //连接图形的线条
length2: 8 //连接文字的线条
}
}
]
};
myChart.setOption(option)
window.addEventListener("resize", function () {
myChart.resize()
})
})()