使用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
// 基于準(zhǔn)備好的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 : "標(biāo)室月度使用率",
padding: [10, 100, 10, 500] , // 標(biāo)題位置
subtext : ""
},
tooltip: {
formatter: '{c}%',
trigger: 'axis', //提示觸發(fā)類型 'item':數(shù)據(jù)項圖形觸發(fā)，主要在散點圖，餅圖等無類目軸的圖表中使用。
//'axis':坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
//'none':什么都不觸發(fā)。
show:true, //是否顯示提示框組件 默認(rèn)為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]);
//基于準(zhǔn)備好的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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue Components 數(shù)字鍵盤的實現(xiàn)
這篇文章主要介紹了Vue Components 數(shù)字鍵盤的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
在本篇文章里小編給大家整理的是關(guān)于Vue父子傳遞實例講解，需要的朋友們可以跟著學(xué)習(xí)參考下。2020-02-02
vue+axios?methods方法return取不到值問題及解決
這篇文章主要介紹了vue+axios?methods方法return取不到值問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue2學(xué)習(xí)筆記之請求數(shù)據(jù)交互vue-resource
本篇文章主要介紹了Vue2學(xué)習(xí)筆記之?dāng)?shù)據(jù)交互vue-resource ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了vue?background-image?不顯示問題的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了如何解決uni-app編譯后?vendor.js?文件過大的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-02-02
這篇文章主要介紹了全面介紹vue 全家桶和項目實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了Vue3?實現(xiàn)驗證碼倒計時功能，倒計時的運用場景是獲取手機驗證碼倒計時、獲取郵箱驗證碼倒計時等場景，本文結(jié)合示例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了vue.js開發(fā)環(huán)境的搭建教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
使用vue2實現(xiàn)帶地區(qū)編號和名稱的省市縣三級聯(lián)動效果
我們知道省市區(qū)縣都有名稱和對應(yīng)的數(shù)字唯一編號，使用編號可以更方便查詢以及程序處理，我們今天來了解一下使用vue2來實現(xiàn)常見的省市區(qū)下拉聯(lián)動選擇效果,需要的朋友可以參考下2018-11-11