Apache ECharts
一个基于 JavaScript 的开源可视化图表库
你可以通过以下几种方式获取 Apache EChartsTM:
- 从 Apache ECharts 官网下载界面 获取官方源码包后构建。
- 在 ECharts 的 GitHub 获取。
- 通过 npm 获取 echarts,npm install echarts --save,详见“在 webpack 中使用 echarts”
- 通过 jsDelivr 等 CDN
引入 ECharts
通过标签方式直接引入构建好的 echarts 文件
<!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.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。
var myChart = echarts.init(document.getElementById('echart'));
myChart.setOption({
legend: {
orient: 'vertical',
right:-5,
data: ['参与选手', '累计票数', '访问次数']
},
series : [{
type: 'pie', // 设置图表类型为饼图
radius: ['70%', '90%'],// 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度。
// color:['#FBAA01','linear-gradient(81deg, #FFAFB6, #F3616E)','linear-gradient(-40deg, #2D71E2 0%, #70A6FF 100%)']
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '16',
fontWeight: 'bold'
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
show:false
}
},
data:[ // 数据数组,name 为数据项名称,value 为数据项值
{
value:30000,
name:'参与选手',
},
{
value:66414,
name:'累计票数',
},
{
value:571444,
name:'访问次数',
},
]
}]
})
最终效果: