1. 程式人生 > >echart讀取資料庫資料畫柱狀圖

echart讀取資料庫資料畫柱狀圖

var xAxisData = [];
var legendData = ['chenrui'];
var dataList = [];
var echartdata,dat;
$.ajax({
async : false,
// cache : false,
type : 'POST',
dataType:'json',
url : 'ksxlfmxController.do?queryKsSum',// 請求的action路徑
error : function() {// 請求失敗處理函式
},
success : function(data) {
echartdata = data.msg;
// console.log(echartdata);
}
});

dat = JSON.parse(echartdata);
console.log(dat);
for(var i=0; i<dat.length;i++){
xAxisData.push(dat[i].ks);
dataList.push(dat[i].result);
}
console.log("xAxisData: "+xAxisData);
console.log("xAxisData length: "+xAxisData.length);
console.log("dataList: "+dataList);
console.log("dataList length: "+dataList.length);
// dataList = [][];
var option = {
    tooltip: {
      //  trigger: 'axis'
    },
    legend: {
    type: 'scroll',
         orient: 'vertical',
         right: 10,
         top: 20,
         bottom: 20,
        data: legendData
    },
toolbox: {
show : true,
//orient: 'vertical',
x: 'left',
y: 'top',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
    dataZoom: [{
        type: 'slider',
        start: 50,
        end: 70
    }, {
        type: 'inside',
        start: 50,
        end: 70
    }],
    xAxis: {
        data: xAxisData
    },
    yAxis: {},
//     series: echarts.util.map(dataList, function (data, index) {
//         return {
//             type: 'bar',
//             animation: false,
//             name: legendData[index],
//     stack:'1',
//             itemStyle: {
//                 normal: {
//                     opacity: 1
//                 }
//             },
//             data: data
//         };
//     })
series:[{
name:'chenrui',
type:'bar',
data:dataList
}
]
};
var myChart = echarts.init(document.getElementById('aaa'));

myChart.setOption(option);

相關推薦

echart讀取資料庫資料

var xAxisData = [];var legendData = ['chenrui'];var dataList = [];var echartdata,dat;$.ajax({async : false, // cache : false,type : 'POST

Java讀取資料庫資料生成

public class BarChart { ChartPanel frame1; public BarChart() { CategoryDataset dataset = getDataSet(); JFreeChart chart = ChartFactory.createBarChar

Matlab

Matlab 畫柱狀圖 errorlist=[std_dfg,std_dfgB,std_tli,std_tliB]; figure('Name','std of reconstruction error' ... ,'position',[100 200 1200 500]...

Echarts 資料展示 (+折線)

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>ECharts</title&

python 使用 matplotlib.pyplot來和餅

匯入包 import matplotlib.pyplot as plt 柱狀圖 最簡柱狀圖 # 顯示高度 def autolabel(rects): for rect in rects: height = rect.get_height() plt.text(r

MATLAB中

論文中需要畫圖進行比較,感覺還是matlab畫起來比較方便,先把自己畫的圖及matlab程式碼放上。 y=[300 311;390 425; 312 321; 250 185; 550 535; 420 432; 410 520;]; b=bar(y); grid on; ch = get(b,

Matlab程式

一、源程式Y = round(rand(5,3)*10);figure;subplot(2,2,1);bar(Y,'grouped');title('Group')subplot(2,2,2);bar(

Android AChartEngine

你可以選擇合適的版本下載,每個版本都有一個jar包、例項原始碼和java doc提供下載。當前最新版本為0.6。        需要注意的是,0.6版本不再支援Android 2.0以下(包含2.0)。也就是說如果你的目標平臺使用了7以下SDK版本,比如Android 1

Python詳解(matplotlib)

matplotlib是python最著名的繪相簿,它提供了一整套和matlab相似的命令API,十分適合互動式地進行製圖。而且也可以方便地將它作為繪圖控制元件,嵌入GUI應用程式中。它的文件相當完備,並且Gallery頁面中有上百幅縮圖,開啟之後都有源程式。因此如果你需要

通過JfreeChart、時序、K線

 import java.awt.Color; import java.awt.Paint; import java.io.*; import java.text.SimpleDateFormat; import org.jfree.data.*; import

Android 如何 -------自定義View

實現了 柱狀圖 根據 SeekBar的滑動 改變的效果: 圖示效果: 自定義View的程式碼: package com.example.coustomviewdemo; import android.R.color; import android.content

echart動態載入資料繪製雙

//編輯組織資料,這裡後臺返回的data格式為{'categ': ['男', '女'], 'data': [[2, 136, 38, 4, 1, 0], [3, 75, 25, 5, 1, 0]], 'name': ['青少年', '青年人', '中年人', '老年前期', '老年人',

Echartseries.data資料動態設定

關於echart的餅狀圖的資料引數主要在option中設定,我們需要根據自己的要求來設定 legend.data ,series.data. 有時需要從資料庫中取得資料然後設定。因此就涉及動態設定引數的問題。 option = { title

echart上顯示百分比、資料

柱狀圖: echart 3.0寫法: series:[{ label: { normal: { show: true, position: 'inside', formatt

Java讀取數據庫數據生成

idl false create 統計 引入 chart console splay 數據 此案例是用swing顯示數據的。須要引入jfreechart相關包。不同版本號可能包不同樣。本人用的是 此案例在ssi框架下會報錯,不用框架就沒問題。 Java後臺邏輯代碼: p

Echart 帶坐標軸帶標的

enter 通過 標題 ret cross oss setoption tip cti 主要過了一遍ECharts的教程,順帶寫了個Demo 數據都是假的 var pasttime={ ‘PC‘:‘./img/pc.png‘,

數據輸入——生成你需要的echart(堆積、扇形、嵌套環形)

wid html 矩形 lan class nes bar target AC 最近論文需要一些比較直觀的圖表, 發現echart做出來的圖還是比較美觀的,這裏介紹如何修改數據生成你需要的echart圖。 1.堆積柱狀圖: http://echarts.baidu.com/

hicharts堆疊堆疊資料標籤顯示百分比

HTML <div id="container" style="min-width: 500px; height: 400px"></div> <script src="./js/highcharts.js"></script> 這個應該都看的

Hicharts使用百分比展示資料

先把程式碼貼上來把,資料可能不合邏輯,但計算的結果都是正確的。 圖表容器: <div id="container"></div> var chart = Highcharts.chart('container', { chart: {

vue專案中使用Echarts 動態更改圖表資料 , Vue 折線等圖表動態重新整理 ,

問題:在vue元件中,用echarts外掛 動態獲取、修改圖表資料 解決:已解決! 第一步:開啟cmd命令視窗 安裝echarts依賴 安裝:npm install echarts -S 第二步:在main.js中全域性引入   //引入echarts的圖表外掛