echarts实现柱状图分页展示
生活随笔
收集整理的這篇文章主要介紹了
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实现柱状图分页展示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端论坛、博客及公众号汇总
- 下一篇： 【明星自动大变脸】最新StarGAN对抗