echarts实现柱状图分页展示

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="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'));// 指定图表的配置项和数据var option = {timeline:{data:[1,2,3,4],label : {formatter : function(s) { return "第"+s+"页"; }},autoPlay : false,playInterval : 1000,tooltip:{formatter : function(s) {return "第"+s.value+"页"; }}},options:[{title : {'text':'全国宏观经济指标'},tooltip : {'trigger':'axis'},legend : {//x:'right','data':['GDP','房地产']},calculable : true,grid : {'y2':80},xAxis : [{'type':'category',//'axisLabel':{'interval':0},'data':[ '北京','天津','河北','山西','内蒙古','辽宁','吉林','黑龙江']}],yAxis : [{'type':'value','name':'GDP（亿元）','max':3000}],series : [{'name':'GDP','type':'bar','data': [100,200,300,400,500,600,700,800]},{'name':'房地产','type':'bar','data': [500,400,300,400,200,600,300,800]} ]},{series : [{'data':  [200,300,400,500,600,700,800]},{'data': [500,400,300,400,200,600,300]}],xAxis:[{'data':['云南','西藏','陕西','甘肃','青海','宁夏','新疆']}]},{series : [{'data':  [1200,1300,400,500,600,700,800]},{'data': [500,400,1300,400,1200,600,300]}],xAxis:[{'data':[ '上海','江苏','浙江','安徽','福建','江西','山东']}]},{series : [{'data':  [1200,1300,400,500,600,700,800,900]},{'data': [500,400,1300,400,1200,600,300,900]}],xAxis:[{'data':['湖北','湖南','广东','广西','海南','重庆','四川','贵州']}]}]};// 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);</script>
</body>
</html>

转载于:https://www.cnblogs.com/lxcmyf/p/7927907.html

echarts实现柱状图分页展示相关推荐

Echarts 柱状图横向展示和竖向展示
第021个点击查看专栏目录本示例是显示柱状图,分别是横向展示和纵向展示.关键是X轴和Y轴的参数互换. 文章目录横向示例效果横向示例源代码(共81行) 纵向示例效果纵向示例源代码(共81行) ...
Echarts定制化组件展示网站（包括3d饼环图，3d柱状图，三维柱状图，水滴图）
Echarts官方的定制化组件展示网站makeapie.com已经关闭了,上面有许多定制的组件作品. 比如3d饼环图,3d柱状图,三维柱状图,水滴图等等. 找到了可替代的chartsdev.c ...
Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记
Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记展示效果如下(主要记录一下如何在柱状体实体里面展示自定义的数据和在顶部展示自定义数据) 柱状图实体展示数据 series: [{ na ...
echarts柱状图值为0时不显示以及柱状图百分比展示
echarts柱状图值为0时不显示以及柱状图百分比展示 1.效果展示 2.代码 <template><div id="container"><div ...
把数据做得更好看2——如何用Echarts更详细地展示数据特征（以柱状图为例）
前言:本文是在把数据做得更好看1--Echarts基础柱状图绘制&渲染&PPT联动(Python数据可视化)的基础上的拓展和进阶,对pyecharts不熟悉的童鞋可以参考上面的链接. ...
echarts实现柱状图不同颜色柱状图横向纵向展示
柱状图不同颜色实现 series: [{name: '',type: 'bar', // color:'#50cfe4',//data: [987342,524214,504344,325424,24 ...
关于flask入门教程-ajax+echarts实现大屏展示
陆陆续续写了一个系列的flask入门教程了,最后以一个半成品大屏做个了结,也算是一段时间的成果吧,毕竟不是专业码农,只是爱好而已,还有很多其他的事情等待探索. 大屏用到的技术主要包括标准的HTML.C ...
vue使用Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts ...
echarts rich设置动态图片/动态数据；echarts 人均收入柱状图 window系统显示不出国旗；echarts动态rich
一.echarts 人均收入柱状图window系统显示不出国旗问题分析 1.如下图所示:该柱状图在window下面只显示emoji 字符,能不能转化完全看系统支不支持 2.图中的国家标识是以emoji ...

echarts实现柱状图分页展示

echarts实现柱状图分页展示相关推荐

最新文章

热门文章