头图：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>
实例如图
官网的教程贼香
今天的文章一文带你学会ECharts的使用分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/15715.html
