前段时间给客户做的项目,需要用到百度图表工具ECharts。于是弄下来研究一番,发现效果还不错,将之前用的highchart替换成了Echarts。
记录一下下:
首先第一步引入Js:
<!--Step:1 Import a module loader, such as esl.js or require.js--> <!--Step:1 引入一个模块加载器,如esl.js或者require.js--> <script src="js/esl.js"></script>
第二步创建Div标签容器:
<!--Step:2 为ECharts准备一个具备大小(宽高)的Dom--> <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
第三步为模块加载器配置echarts的路径,并根据API生成图表。
<script type="text/javascript"> // Step:3 conifg ECharts's path, link to echarts.js from current page. // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径 require.config({ paths:{ echarts:'./js/echarts', 'echarts/chart/bar' : './js/echarts-map', 'echarts/chart/line': './js/echarts-map', 'echarts/chart/map' : './js/echarts-map' } }); // Step:4 require echarts and use it in the callback. // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径 require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line', 'echarts/chart/map' ], function(ec) { //--- 折柱 --- var myChart = ec.init(document.getElementById('main')); myChart.setOption({ tooltip : { trigger: 'axis' }, legend: { data:['蒸发量','降水量'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] } ], yAxis : [ { type : 'value', splitArea : {show : true} } ], series : [ { name:'蒸发量', type:'bar', data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] }, { name:'降水量', type:'line', data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] } ] }); } ); </script>
第四步效果预览:
相关推荐
18个Echarts数据可视化图表案例,每个案例都有代码注释,简单易懂。 还有三套echarts可视化大屏模板,案例下载后在编辑器内打开html,可以根据需求修改样式和数据,学习echarts绘图,也可以制作新的数据可视化大屏。
移动端选项卡切换展示echarts数据图表代码,包括有扇形图、柱形图、折线图3种图表统计展示。
Echarts数据可视化图表案例:包括柱图,饼图,折线图,地图等数据展示图表;案例下载后直接使用webstrom或idea打开,在编辑器内打开html
jQuery+echarts数据图表时间间隔和数据个数选择代码,自定义设置图表样式进行查看。
SpringBoot+MongoDB+Echarts图表数据可视化 SpringBoot+MongoDB+Echarts图表数据可视化
echarts数据图表时间个数选择代码是一款jQuery基于echarts.js制作选择时间间隔和选择数据个数,自定义设置图表样式代码。
最新的echarts等图表可用的甘肃省市区县的geojson数据包,含下辖所有市和区县数据,也有行政代码。
相关说明地址: vue 中添加 echarts ,然后在 vue 中简单使用一些 echarts中常用的图表,包括一些动态的图表、3D的图表等 ,如果有不足之处,欢迎指出,或者你有更好的方法,欢迎留言。
1.echarts考勤图表
echarts图表导出到excel中的解决方法,做个备忘录,以防忘记
echarts数据可视化 作业案例,js,html,css 帮助同学们更好的理解echarts 数据可视化 各个图表都做了案例
使用SpringBoot+layui +Echarts开发数据统计图表(柱形图,饼图,折现图)案例中统计的数据是港口生产作业收入分析统计走势。
根据Excel表格数据生成ECharts图表,随便一个浏览器就可以运行。 功能: 可以选择一个固定数据格式的excel文件,根据excel文件的数据,以平铺或堆叠的形式,生成对应的线图或柱状图或饼图。可保存图片到本地。 用到...
此小demo是一个有关按钮控制数据源(点击不同的按钮显示不同的数据),最后利用echarts将数据展示在前端
echarts环状图表数据统计插件,非常好看,自己项目中常用到的数据统计展示。环状图表数据统计插件,环状图表数据统计插件
百度echarts框架常用的一些图表,整合了一下,有些图表是自己设定属性,之后在调用的
JQ JS javascript echarts 多图表 多曲线 多柱状图 多饼图 多仪表盘 加载 多图表加载
用SSM框架实现的echarts展示图表的小demo,使用的开发工具是eclipse,数据库是mysql。文件中包含项目源码,对应的数据库,以及项目运行后实现的图表截图(含url)。项目本人亲测,可完美展示图表,若有疑问,可Email...
echarts-java 通过phantomjs java后台生成echats图表,echartspoi相关jar包及phantomjs都在压缩包内
北京市geojson数据包,含下辖所有市和区县数据,2021年1月更新,echarts等图表可用,如需全部或最新,可联系。