Echarts
ECharts
,一个使用 JavaScript
实现的开源可视化库,可以流畅的运行在 PC
和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11
,Chrome
,Firefox
,Safari
等),底层依赖轻量级的矢量图形库 ZRender
,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
通过使用ECharts
,可以快速实现数据可视化,下面简单演示一下饼图的简单使用
实现效果如下:
echarts的使用大致可以分为以下5个部分:
- 引入
ECharts.js
库(可以通过官网地址下载) - 为
ECharts
实例准备具备大小的DOM - 初始化实例
- 指定绘图的相关配置
- 使用实例
本例中使用webpack对文件进行打包,webpack的简单快速应用可以查看Webpack V4安装使用与常用配置总结
demo
目录如下:
webpack-demo
|- index.html
|- /src
|- index.js
|- /js
|- pie-chart.js
|- /build
index.html
文件代码如下,#pie-chart
为准备的用于绘制饼图的div
, bundle.js
为打包好的js
文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>echarts-test</title>
<!-- <script src="./lib/echarts.js"></script> -->
<style>
div {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="pie-chart"></div>
<script src="./build/bundle.js"></script>
</body>
</html>
绘图的相关配置放在pie-chart.js
中:
// pie-chart.js
// 引入echarts库
var echarts = require('echarts');
// 初始化实例
var myChart = echarts.init(document.getElementById('pie-chart'));
// 指定配置
myChart.setOption({
title: {
// 标题组件
text: 'ECharts 饼图', // 主标题名称
},
textStyle: {
color: '#808080', // 文字颜色
},
series: [
{
name: '访问来源', // 定义名字
type: 'pie', // 定义类型(饼图)
radius: '55%', // [ default: [0, '75%'] ] 饼图半径 第一项为内半径,第二项为外半径
data: [
{ value: 235, name: '视频广告' },
{ value: 274, name: '联盟广告' },
{ value: 310, name: '邮件营销' },
{ value: 335, name: '直接访问' },
{ value: 400, name: '搜索引擎' }
].sort((a,b) => a.value - b.value),
roseType: 'radius', // 南丁格尔图,通过半径区分数据大小
itemStyle: { // 图像样式
// 阴影的大小
shadowBlur: 200,
// 阴影水平方向上的偏移
shadowOffsetX: 0,
// 阴影垂直方向上的偏移
shadowOffsetY: 0,
// 阴影颜色
shadowColor: 'rgba(0, 0, 0, 0.5)',
// 颜色
color: '#c23531',
},
labelLine: {
lineStyle: {
color: '#808080',
}
}
}
],
visualMap: {
// 确定是否显示visualMap组件
show: false,
// 最小映射值
min: '80',
// 最大映射值
max: '600',
// 映射范围
inRange: {
// 通过明暗度映射
colorLightness: [0, 1]
}
},
backgroundColor: '#2c343c', // 背景色
})
module.exports = {
pieChart: myChart
}