微信掃碼登錄 ×
echarts成績柱狀圖顯示代碼

echarts成績柱狀圖顯示代碼

收藏
echarts成績柱狀圖顯示代碼
html5 echarts制作學生成績柱狀圖顯示圖表,懸停柱狀圖表顯示數(shù)值內容等功能。

使用方法:

我的思路


1.數(shù)組內的數(shù)據既然都有索引值,那么我也新建一個數(shù)組,用索引值對應柱狀圖所指定范圍進行push顏色
2.最新的項目很糾結,牽扯了漸變色,所以簡單的單個顏色的方法不好使,所以在options在額外寫了var 互不干擾卻有著聯(lián)系

1、head引入js文件

<script type="text/javascript" src="echarts.common.min.js"></script>

2、body引入HTML代碼


<div id="container" style=" width: 600px;height: 300px;"></div>

var namedate = ['小明', '小紅', '小張', '小潘', '小陸', '小洪', '大張'];
var numdate = [60, 70, 80, 50, 70, 90, 100];

只需修改 namedate和numdate里面的參數(shù)即可使用。

使用聲明

1. 本站所有素材(未指定商用),僅限學習交流。
2. 會員在本站下載的原創(chuàng)商用和VIP素材后,只擁有使用權,著作權歸原作者及17素材網所有。
3. 原創(chuàng)商用和VIP素材,未經合法授權,請勿用于商業(yè)用途,會員不得以任何形式發(fā)布、傳播、復制、轉售該素材,否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途,織夢系統(tǒng)商業(yè)用途請預先授權。

x
×
×

注冊

QQ注冊 立即下載 微信注冊 立即下載

簽到成功!

已連續(xù)簽到1天,連續(xù)簽到3天可獲得50積分

知道了