使用echarts柱狀圖實現(xiàn)select下拉刷新數(shù)據(jù)
更新時間:2022年10月22日 08:41:04 作者:瘋狂的代碼奴
這篇文章主要介紹了使用echarts柱狀圖實現(xiàn)select下拉刷新數(shù)據(jù),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
echarts柱狀圖實現(xiàn)select下拉刷新數(shù)據(jù)
廢話少說,直接上代碼
<div>月度 <select id="year_data"> <option value="1" class="active">3月</option> <option value="2">4月</option> </select> </div> <div id="chart_box" style="width: 1250px;height:550px;margin:0 auto;"></div> <script src="js/bsyd.js"></script> <script> $(function () {//使用on進行事件綁定事件。 mychart1('year1'); $("select").on('click',function(){ if($("select").val()==1){ mychart1('year1'); } else if($("select").val()==2){ // mychart1.clear(); mychart1('year2'); } }) ; $("#time_sec").on('click',function(){ //alert('請求時間段的數(shù)據(jù)'); myChart1.clear(); //清空原來的圖表 mychart1('time_sec'); //重新加載圖表,之前必須要清空原來的,否則沒有動畫效果 }); }); </script> </body> </html>
所需js
// 基于準備好的dom,初始化echarts實例 var myChart1 = echarts.init(document.getElementById('chart_box')); function mychart1(time){ if(time=='year1'){ var renShu = [ 80.00, 79.10, 81.45, 90.20, 89.30, 91.20, 88.30, 91.30, 90.65, 91.20, 90.30, 89.20, 87.30, 91.30, 90.65]; }else if(time=='year2'){ var renShu = [ 50.00, 90.00, 61.45, 78, 59.30, 95.00, 88.30, 61.30, 43.00, 51.20, 92.00, 69.20, 78.00, 91.30, 94.00]; }else{ //請求時間段數(shù)據(jù) //模擬時間段數(shù)據(jù) alert(time); var renShu = [80.00, 79.10, 81.45, 90.20, 89.30, 91.20, 88.30, 91.30, 90.65, 91.20, 90.30, 89.20, 87.30, 91.30, 90.65]; }; //配置及數(shù)據(jù) optionyear = { title: { text : "標室月度使用率", padding: [10, 100, 10, 500] , // 標題位置 subtext : "" }, tooltip: { formatter: '{c}%', trigger: 'axis', //提示觸發(fā)類型 'item':數(shù)據(jù)項圖形觸發(fā),主要在散點圖,餅圖等無類目軸的圖表中使用。 //'axis':坐標軸觸發(fā),主要在柱狀圖,折線圖等會使用類目軸的圖表中使用。 //'none':什么都不觸發(fā)。 show:true, //是否顯示提示框組件 默認為true axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, legend: { data:[''] }, xAxis: [ { type: 'category', data: ["201","202","203","601","602","603","604","605","606","701","702","703","704","705","706"], axisPointer: { type: 'shadow' } } ], yAxis: [ { type: 'value', name: '', min:0, max:92.00, splitNumber:10, axisLabel: { formatter: '{value}%', } }, ], series: [ { name:'', type:'bar', //bar表示柱狀圖 barWidth:20, data:renShu,//數(shù)據(jù) itemStyle: { //更多柱狀圖樣式搜索API:series-bar.itemStyle normal: { color: '#1E90FF',//改變柱狀的顏色 label: { show: true, //開啟顯示 position: 'top', //在上方顯示 formatter: '{c}%' , //百分比顯示 textStyle: { //數(shù)值樣式 color: 'black', //柱上數(shù)據(jù)顏色 fontSize: 16 } } } }, }, ] }; // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。 myChart1.setOption(optionyear); }
表格的下拉框中包含echarts圖表的demo
右圖為左圖點擊后的效果,下拉框中包含一個echarts圖表
echarts.min.js和vue.js是分別從官網(wǎng)下載的文件,下載很方便,在此不做贅述。
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title></title> <script src="echarts.min.js"></script> <script src="vue.js" type="text/javascript" charset="UTF-8"></script> <style> *{padding:0;margin:0;} .img{width:600px;height:320px;background:#000;} .img1{background:red;} #box{ width:805px; margin:100px auto; overflow:hidden; box-shadow:0 0 10px 1px rgba(0,0,0,0.35); } #box ul li{ float:left; list-style:none; width:100%; height: 50px; position:relative; -webkit-transition:all .7s; -moz-transition:all .7s; -ms-transition:all .7s; -o-transition:all .7s; border-left:1px solid #ccc; } .title{ color:#fff; font-size:20px; width:100%; background:rgba(0,0,0,0.5); position:absolute; top:0; left:0; line-height:50px; } .container{ width:600px; height:270px; position:absolute; top:50px; left:0; } #box .fill{height:600px;} .iconclick { display: inline-block; } </style> </head> <body> <div id="box"> <ul> <li v-for="i in count" class="liget lige"> <a href=""><div class="img1 img"></div></a> <div class="title"> <p class="iconclick">title{{i}}</p> <span class="iconclick" @click="iconclick(i)">點此展開</span> <div class="container"></div> </div> </li> </ul> </div> <script type="text/javascript"> // var a=0; var app=new Vue({ el:"#box", data:{ count:5 }, methods:{ iconclick(i){ if (document.getElementsByClassName('lige')[i-1].className=='fill lige') { document.getElementsByClassName('lige')[i-1].className='liget lige'; }else{ document.getElementsByClassName('lige')[i-1].className='fill lige'; } } } }); var divs = document.querySelectorAll(".container"); for (var i=0;i<divs.length;i++){ myCharts = echarts.init(divs[i]); //基于準備好的DOM,初始化echarts實例 //var myCharts = echarts.init(document.getElementById("container")); //console.log(myCharts); var option = { title:{ text:"ECharts 數(shù)據(jù)統(tǒng)計" }, series:[{ name:"訪問量", type:"pie", radius:"60%", data:[ {value:'500',name:'Android'}, {value:'200',name:'IOS'}, {value:'360',name:'PC'}, {value:'100',name:'Others'} ] }] }; //使用定制的配置項和數(shù)據(jù)顯示圖表 myCharts.setOption(option); } </script> </body> </html>
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue Components 數(shù)字鍵盤的實現(xiàn)
這篇文章主要介紹了Vue Components 數(shù)字鍵盤的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-09-09vue+axios?methods方法return取不到值問題及解決
這篇文章主要介紹了vue+axios?methods方法return取不到值問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10Vue2學習筆記之請求數(shù)據(jù)交互vue-resource
本篇文章主要介紹了Vue2學習筆記之數(shù)據(jù)交互vue-resource ,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02使用vue2實現(xiàn)帶地區(qū)編號和名稱的省市縣三級聯(lián)動效果
我們知道省市區(qū)縣都有名稱和對應的數(shù)字唯一編號,使用編號可以更方便查詢以及程序處理,我們今天來了解一下使用vue2來實現(xiàn)常見的省市區(qū)下拉聯(lián)動選擇效果,需要的朋友可以參考下2018-11-11