头图：www.zcool.com.cn/u/14943699
ECharts
一个基于 JavaScript 的开源可视化图表库（echarts.apache.org/zh/index.ht…
下载echarts资源包
进入到官网点击下载，可以选择在线定制，然后选择自己想要的报表图
开发实例
下载的资源是一个js包，完成后使用HBuilder开始开发实例，将下载好的文件放到HBuilder的项目中
创建html文件、引入js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>报表（echarts）</title>
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.min.js"></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 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
如图
使用其他的图形
饼状图，依然要下载自定义的js包
打开官网的实例，打开需要的报表图，在左侧会显现源码，然后copy放到dom中
将option替换掉
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>报表（echarts）</title>
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.min.js"></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 = {
title: {
text: '南丁格尔玫瑰图',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
top: 'bottom',
data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
restore: {show: true},
saveAsImage: {show: true}
}
},
series: [
{
name: '半径模式',
type: 'pie',
radius: [20, 140],
center: ['25%', '50%'],
roseType: 'radius',
itemStyle: {
borderRadius: 5
},
label: {
show: false
},
emphasis: {
label: {
show: true
}
},
data: [
{value: 40, name: 'rose 1'},
{value: 33, name: 'rose 2'},
{value: 28, name: 'rose 3'},
{value: 22, name: 'rose 4'},
{value: 20, name: 'rose 5'},
{value: 15, name: 'rose 6'},
{value: 12, name: 'rose 7'},
{value: 10, name: 'rose 8'}
]
},
{
name: '面积模式',
type: 'pie',
radius: [20, 140],
center: ['75%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 5
},
data: [
{value: 30, name: 'rose 1'},
{value: 28, name: 'rose 2'},
{value: 26, name: 'rose 3'},
{value: 24, name: 'rose 4'},
{value: 22, name: 'rose 5'},
{value: 20, name: 'rose 6'},
{value: 18, name: 'rose 7'},
{value: 16, name: 'rose 8'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
实例如图
官网的教程贼香