Echarts(二、柱狀圖（各引數詳細描述）)

阿新 • • 發佈：2019-01-04

1.jsp頁面

<body>
 <div class="menutab">
             <ul>
                 <li id="zldb">質量等別監測預警</li>
             </ul>
</div>
               <!--質量等別監測預警-->
              <div class="section hide">
                   <div class="byl-bot">
                        <div 
 class="t">更新後各等別基本農田佔基本農田總面積比例</div>
                        <div class="byl-chart">
                              <div class="totalProportion" id="qualityLevelchart" style="width:100%;height:1000px"></div>
                        </div>
                   </div>

               </div 
>
</body>

2.js檔案

$(document).on("click","#zldb",function(){ 
//這部分表格處理資料暫時無用
     $('#qualityLevel').datagrid({
            url:null,
            pagination:false,
            nowrap:false,
            fitColumns:true,
            fit:false,
            rownumbers:true,
            height:$(window).height()-130 
,
            width:'100%',
            columns:[[
                        {field:'等別',title:'等別',width:70,align:'center'},
                        {field:'GXQMJ',title:'更新前面積',width:70,align:'center'},                      
                        {field:'GXHMJ',title:'更新後面積',width:70,align:'center'},
                        {field:'CYZ',title:'差異值',width:70,align:'center',
                            formatter:function(value,rowData,rowIndex){
                                  var val=rowData.GXHMJ-rowData.GXQMJ;
                                  return val.toFixed(2);
                              } 
                        },
                        {field:'BHQS',title:'變化趨勢',width:70,align:'center',                         
                            formatter:function(value,rowData,rowIndex){
                                  var val=rowData.GXQMJ-rowData.GXHMJ;                                
                                  if(val>=0){
                                      return '<img src="distmap/resources/images/false.png">';
                                  }else{
                                      return '<img src="distmap/resources/images/true.png">';  
                                  }     
                              } 
                            }

                    ]],
            data:ZLDB,

        });      
    //處理資料為之後的chart展示
        var val_14=(ZLDB.rows[14].GXHMJ/99874.46*100).toString();
            val_14= val_14.substring(0,val_14.indexOf(".")+3);
        var val_13=(ZLDB.rows[13].GXHMJ/99874.46*100).toString();
            val_13= val_13.substring(0,val_13.indexOf(".")+3);
        var val_12=(ZLDB.rows[12].GXHMJ/99874.46*100).toString();
            val_12= val_12.substring(0,val_12.indexOf(".")+3);
        var val_11=(ZLDB.rows[11].GXHMJ/99874.46*100).toString();
            val_11= val_11.substring(0,val_11.indexOf(".")+3);
        var val_10=(ZLDB.rows[10].GXHMJ/99874.46*100).toString();
            val_10= val_10.substring(0,val_10.indexOf(".")+3);
        var val_9=(ZLDB.rows[9].GXHMJ/99874.46*100).toString();
            val_9= val_9.substring(0,val_9.indexOf(".")+3);
        var val_8=(ZLDB.rows[8].GXHMJ/99874.46*100).toString();
            val_8= val_8.substring(0,val_8.indexOf(".")+3);
        var val_7=(ZLDB.rows[7].GXHMJ/99874.46*100).toString();
            val_7= val_7.substring(0,val_7.indexOf(".")+3);
        var val_6=(ZLDB.rows[6].GXHMJ/99874.46*100).toString();
            val_6= val_6.substring(0,val_6.indexOf(".")+3);
        var val_5=(ZLDB.rows[5].GXHMJ/99874.46*100).toString();
            val_5= val_5.substring(0,val_5.indexOf(".")+3);
        var val_4=(ZLDB.rows[4].GXHMJ/99874.46*100).toString();
            val_4= val_4.substring(0,val_4.indexOf(".")+3);
        var val_3=(ZLDB.rows[3].GXHMJ/99874.46*100).toString();
            val_3= val_3.substring(0,val_3.indexOf(".")+3);
        var val_2=(ZLDB.rows[2].GXHMJ/99874.46*100).toString();
            val_2= val_2.substring(0,val_2.indexOf(".")+3);
        var val_1=(ZLDB.rows[1].GXHMJ/99874.46*100).toString();
            val_1= val_1.substring(0,val_1.indexOf(".")+3);
        var val_0=(ZLDB.rows[0].GXHMJ/99874.46*100).toString();
            val_0= val_0.substring(0,val_0.indexOf(".")+3);
        function test(){
            alert("這是link");
        }

        var chartDate = [val_14,val_13,val_12,val_11,val_10];
        var chartDate2 = [val_9,val_8,val_7,val_6,val_5];
        var chartDate3 = [val_4,val_3,val_2,val_1,val_0];

        // 初始化圖表標籤
        var myChart = echarts.init(document.getElementById('qualityLevelchart'));
        var options={
                title:{
                    show: true,
                    text: '測試',
                    link: '<a href="javascript:void(0)" onclick="test()"></a> ',
                    target: 'self',
                    textStyle: {
                        padding: 5,                     
                        color:'red',//也可以設定字型，字號等
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                        fontFamily: 'sans-serif',
                        fontSize: 18,
                        z: 2,
                        backgroundColor: 'transparent',//預設透明

                    },
                    subtext: '這是副標題',
                    itemGap: 10,//控制主副標題之間的距離
                    sublink: '',
                    subtarget: 'blank',
                    padding: 5,
                    //left: 'center',
                    //top: 'auto',
                    //right: 'auto',
                    //bottom: 'auto',
                    backgroundColor: 'transparent',//'rgb(128, 60, 128)',//預設透明
                    },
            //定義一個標題
            legend:{
                type:'scroll',//scroll,可以滾動翻頁的圖例，一般在圖例較多時使用，預設plain
                itemGap: 10,//圖例之間的距離
               // data:['更新後各等別基本農田佔基本農田總面積比例'],
                x:'center',//設定X就是在以x軸為參照，y則以y為參照
                orient: 'vertical',//'horizontal',//vertical,圖例列表佈局方向
                align:'auto',//對齊方式
                selectedMode: true,//點選圖例，顯示狀態
                inactiveColor: '#ccc',//'green'//圖例關閉時的顏色
                selected: {
                    // 選中'系列1'
                    '系列1': true,
                    // 不選中'系列2'
                    '系列2': false,            
                },
                //left: 'auto',
               // top: 'auto',
                //right: 'auto',
               // bottom: 'auto',
                width: 'auto',
                height: 'auto',
                textStyle: {
                    color: 'blue',
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                    fontFamily: 'sans-serif',
                    fontSize: 12,
                    backgroundColor: 'transparent',
                    borderColor: 'transparent',
                    borderWidth: 0,
                    borderRadius: 0,
                    padding: 0,
                },
                //backgroundColor: 'pink',//背景色
                data: [{
                    name: '2015更新後各等別基本農田佔基本農田總面積比例',
                  //圖例項的 icon ECharts 提供的標記型別包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                       //也可以通過 'image://url' 設定為圖片，其中 url 為圖片的連結，或者 dataURI。
                       //可以通過 'path://' 將圖示設定為任意的向量路徑。這種方式相比於使用圖片的方式，
                    //不用擔心因為縮放而產生鋸齒或模糊，而且可以設定為任意顏色。路徑圖形會自適應調整為合適的大小。
                    //路徑的格式參見 SVG PathData。可以從 Adobe Illustrator 等工具編輯匯出。
                    // 強制設定圖形為圓。
                  // icon: 'diamond',
                    // 設定文字為紅色
                    textStyle: {
                        color: 'red',
                    },
                },{
                    name: '2016更新後各等別基本農田佔基本農田總面積比例',                    
                        // 設定文字為紅色
                        textStyle: {
                            color: 'pink',
                        },
                    },{
                    name: '2017更新後各等別基本農田佔基本農田總面積比例',                    
                        // 設定文字為紅色
                        textStyle: {
                            color: 'black',
                        },
                    }],
            },
            //區域選中元件
            brush: {
                //'rect'：開啟矩形選框選擇功能。'polygon'：開啟任意形狀選框選擇功能。'lineX'：開啟橫向選擇功能。
                //'lineY'：開啟縱向選擇功能。'keep'：切換『單選』和『多選』模式。後者可支援同時畫多個選框。前者支援單擊清除所有選框。'clear'：清空所有選框。
                toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
                brushStyle: {
                    borderWidth: 2,
                    color: 'rgba(0,0,0,0.2)',
                    borderColor: 'rgba(0,0,0,0.5)',
                },
                xAxisIndex: 0
            },
            //工具欄元件，一個用匯出圖片，資料檢視，動態型別切換，資料區域縮放，重置五個工具。
            toolbox: {
                show:true,
                orient:'horizontal',//佈局方向vertical，'horizontal',
                itemSize: 15,//大小
                itemGap: 10,
                showTitle: false,//是否展示title
                feature: {
                    //儲存圖片
                    saveAsImage: {
                        type: 'png',
                        name: '儲存圖片',
                        backgroundColor: 'auto',
                        excludeComponents: ['toolbox'],
                        show: true,
                        title: '儲存為圖片',
                        //icon: ...,
                        //iconStyle: {...},
                        pixelRatio: 1,
                        },
                        //重置
                        restore: {
                            show: true,
                            title: '還原',
                            //icon: ...,
                            //iconStyle: {...},
                            },
                            //資料檢視
                            dataView: {
                                show: true,
                                title: '資料檢視',
                                //icon: ...,
                              //iconStyle: {...},
                                readOnly: false,
                                lang: ['資料檢視', '關閉', '重新整理'],
                                backgroundColor: '#fff',
                                textareaColor: '#fff',
                                textareaBorderColor: '#333',
                                textColor: '#000',
                                buttonColor: '#c23531',
                                buttonTextColor: '#fff',
                                },
                    //動態型別切換
                    magicType: {
                        type: ['line', 'bar', 'stack', 'tiled']
                    }                  
                }
            },
            //提示框元件
            tooltip: {
                show: true,
                trigger: 'item',
                //axisPointer: {...},
                showContent: true,
                alwaysShowContent: false,
                triggerOn: 'mousemove|click',
                showDelay: 0,
                hideDelay: 100,
                enterable: false,
                confine: false,
                transitionDuration: 0.4,
                //position: ...,
                //formatter: ...,
                backgroundColor: 'green',//'rgba(50,50,50,0.7)',
                borderColor: '#333',
                borderWidth: 0,
                padding: 5,
                //textStyle: {...},
                //extraCssText: ...,
                },
          //座標系設定
          grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            //X軸設定
            yAxis:{
                show: true,
                gridIndex: 0,//x軸所在的座標系,預設第一個座標系
                position:'bottom',//X軸位置bottom,top
                offset: 0,//預設位置的偏移距離，在有多個x軸時
                type: 'value',//'category',value//
                name: '所佔比例',
                inverse: false,//座標軸是否反向
                //boundaryGap: ['20%', '20%'],
                //座標軸名稱設定
                triggerEvent: false,//座標軸是否觸發事件，預設不觸發，
                nameLocation: 'center',//start,center座標名稱
                nameTextStyle: {
                    color: 'blue',
                    fontStyle: 'normal',
                    fontWeight: 'normal',
                    fontFamily: 'sans-serif',
                    fontSize: 12,
                    align:'center',
                    verticalAlign: 'top',//文字垂直對齊方式，預設自動top,middle,bottom。

                },
                nameGap: 15,//座標軸名稱與軸線之間的距離
                nameRotate: 45,//座標軸旋轉角度
                //座標軸設定
                axisLine: {
                    show: true,
                    onZero: true,
                    //onZeroAxisIndex: ...,
                    symbol: ['none','arrow'],//預設不顯示箭頭，即 'none'。兩端都顯示箭頭可以設定為 'arrow'，只在末端顯示箭頭可以設定為 ['none', 'arrow']。
                    symbolSize: [30, 50],
                    //軸線設定
                    lineStyle: {
                    color: 'blue',
                    width: 3,
                    type: 'solid',//'solid',dashed,dotted

                    //shadowBlur: ...,
                    //shadowColor: ...,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    //opacity: ...,
                    },
                    },
                    //座標軸刻度設定
                    axisTick: {
                        show: true,
                        alignWithLabel: false,
                        interval: 'auto',
                        inside: false,//座標軸刻度是從內還是從無外
                        length: 5,//刻度長度
                        lineStyle: {
                        color: 'blue',
                        width: 3,
                        type: 'solid',
                        },
                        },                  
                    //刻度標籤設定
                  axisLabel: {  
                        show: true,  
                        interval: 'auto',  
                       //formatter: '{value}%',
                        interval: 'auto',
                        inside: false,//刻度標籤朝內還是朝外
                        rotate: 45,//旋轉角度-90 90
                        margin: 35,//刻度標籤與軸線之間的距離。
                        formatter:function(value,index){return value+"%"},
                        showMinLabel: null,
                        showMaxLabel: null,
                        color: 'red',
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                        fontFamily: 'sans-serif',
                        fontSize: 12,
                        align: 'bottom',//top,middle,bottom
                       // verticalAlign: ...,
                       // lineHeight: ...,
                        backgroundColor: 'transparent',
                        borderColor: 'transparent',
                        borderWidth: 0,
                        borderRadius: 0,
                        padding: 0,
                        shadowColor: 'transparent',
                        shadowBlur: 0,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                      //  width: ...,
                      //  height: ...,
                        textBorderColor: 'transparent',
                        textBorderWidth: 0,
                        textShadowColor: 'transparent',
                        textShadowBlur: 0,
                        textShadowOffsetX: 0,
                        textShadowOffsetY: 0,
                  }
            },
            xAxis:{
                position:'left',//座標軸顯示位置left,right
                type : 'category',//類目軸category，資料軸value
                name: '等級分類',
                nameLocation: 'end',
                //nameTextStyle: {...},/顏色字型等設定
                nameGap: 15,
             //刻度標籤設定
                  axisLabel: {  
                        show: true,  
                        interval: 'auto',  
                       //formatter: '{value}%',
                        interval: 'auto',
                        inside: false,//刻度標籤朝內還是朝外
                        rotate: -90,//旋轉角度-90 90
                        margin: 15,//刻度標籤與軸線之間的距離。
                       // formatter:function(value,index){return value+"%"},
                        showMinLabel: null,
                        showMaxLabel: null,
                        color: 'green',
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                        fontFamily: 'sans-serif',
                        fontSize: 12,
                        align: 'bottom',//top,middle,bottom               
                  },
                data:['五等','四等','三等','二等',
                  {
                    value: '一等',// 突出十五
                    textStyle: {
                       // fontSize: 20,
                        color: 'red',
                    }
                }    ] 
            },
            //name=legend.data的時候才能顯示圖例
            //資料設定
            series:[{
                "name":'2015更新後各等別基本農田佔基本農田總面積比例',
                "type":'bar',
                "data":chartDate,
               // stack:'測試',//分類標誌，將一致的在一個柱子上
                barWidth:'20',
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                },
                //標誌線
                /*markLine : {
                    lineStyle: {
                        normal: {
                            type: 'dashed'
                        }
                    },
                    data : [
                        [{type : 'min'}, {type : 'max'}]
                    ]
                },*/
                itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',//資料在中間顯示
                        formatter:'{c}%'//百分比顯示
                      }
                    }
                  }
            },{
                "name":'2016更新後各等別基本農田佔基本農田總面積比例',
                "type":'bar',//line,bar,pie,lines,gauge,funnel漏斗圖
                "data":chartDate2,
               // stack:'測試',
                barWidth:'30',
                itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'inside',//資料在中間顯示
                        formatter:'{c}%'//百分比顯示
                      }
                    }
                  }
            },{
                "name":'2017更新後各等別基本農田佔基本農田總面積比例',
                "type":'bar',
                "data":chartDate3,
                barWidth:'25',
                itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        position: 'top',//資料在中間顯示
                        formatter:'{c}%'//百分比顯示
                      }
                    }
                  }
            }],
           color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
           backgroundColor:'#ccc',//設定背景色

        };
        myChart.setOption(options);
        myChart.on('brushselected', renderBrushed);
        myChart.on('brushselected', renderBrushed);
        //滑鼠事件click:,dblclick，mousedown, mouseup,mouseover,mouseout,globalout,
        myChart.on('click', function (params) {
            alert(params.data+'---'+params.name);
        });
        function renderBrushed(params){
          console.log(params);

        }

 });

這裡寫圖片描述

Echarts(二、柱狀圖（各引數詳細描述）)

1.jsp頁面 <body> <div class="menutab"> <ul> <li id="zldb">質量等別監測預警</li&g

Echarts——柱狀圖（各引數詳細描述）

var echarts = require('echarts'); var myChart = echarts.init(document.getElementById('item')); let option = {

用echarts實現一個柱狀圖（前後臺原始碼）

後臺程式碼 -------------------------controller------------------------------------- /** * <p>人員結構-政治面貌</

echarts 外掛開發柱狀圖、折線圖、餅狀圖（具有詳細的註釋）

<div id="popInfoDriverTotal" class="popBox" style="left:50px; top:60px"> <h2 class="gytitle"><em>分析圖表</em><spa

使用Echarts幾分鐘制作出折線圖、餅圖、柱狀圖等

tel 趨勢 nag 情況下 java row data 距離主題 ECharts，縮寫來自Enterprise Charts。 ECharts，不僅是國內關註度最高的開源項目，還是中國第一個也是目前唯一一個入選了Github Explorer Data Visualiz

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

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

echarts生成餅狀圖、柱狀圖、多項柱狀圖的引數介紹

1.餅圖 html程式碼： <div id="SexDistri" style="width: 100%;height: 50%;"></div> 下面的柱狀圖的html程式碼也與此類似。 js程式碼： var SexDistributi

echarts中折線圖、柱狀圖之間的轉換

echarts中折線圖、柱形圖、資料檢視的轉換需要toolbox裡面的內容（也就是加粗的部分） // 基於準備好的dom，初始化echarts例項 var day = echarts.init(docum

用ECharts畫多柱子柱狀圖（可點選）

其實用ECharts畫柱子還是挺簡單的，多去官網看看官方文件，就理解了。 columLabel是多柱子的名字。columName 是橫座標。bgColorList 是柱子的顏色。arr 是每個柱子的值。list 是後臺傳過來的各個柱子的值，但是要經過處理賦值給arr ，賦值的方法也不只這一種

用g.raphael.js高速繪製餅圖、柱狀圖、點狀圖、折線圖（下）

首先，這裡有個g.raphael.js的範例文章，可以直接看，我就不轉載了：好了，接下來我們來試試建立柱狀圖： <script type="text/javascript" src="raphael.js"></script> <scr

Echarts例項1-折線、餅圖、柱狀圖混搭

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

OpenGL（十七）繪製折線圖、柱狀圖、餅圖

一、繪製折線圖 glutBitmapCharacter(GLUT_BITMAP_8_BY_13,label[j])函式可以繪製GLUT點陣圖字元，第一個引數是GLUT中指定的特定字形集，第二個引數是

echarts的折線圖、柱狀圖在移動端橫屏展示

我以前按照網上的方法就會出現一下問題：點選開啟連結問題：旋轉了頁面確實可以橫屏查看了，但是在使用x軸的繫結點選事件時發現，折線圖只是看起來橫屏了，實際的座標資料並沒有隨著頁面旋轉而旋轉。現在我找到了另外一種方法，完美的避免了該問題。思路：程式碼樣例：【這是

eCharts-柱狀圖（橫置）配置說明

// 例項化eChart圖表 function initEchart( idName, option ) { var myEchart = echarts.init( document.getElementById( idName ) ); myEchar

在echarts中，柱狀圖、折線圖來回切換以及儲存為圖片的屬性

在setOption裡直接定義。 toolbox: {show: true,feature: {magicType: {type: ['line', 'bar'],show: false},dataZ

echarts柱狀圖（柱條顏色漸變，多條資料顯示指定資料數）

(上一篇echarts餅圖與本頁例子程式碼可在github（https://github.com/applebring/echarts-）上下載)--本打算與上一篇寫一塊，為防止篇幅過長分開寫，echarts柱狀圖實現柱條漸變以及顯示柱條數量限制最終實現樣式為：先用圖

iOS 折線圖、柱狀圖、扇形圖封裝

導入 nbsp 並且柱狀圖 bsp ima 集成分享圖片 slb 封裝簡單的折線圖、柱狀圖、扇形圖效果圖：　　　git地址：https://github.com/lulushen/SLChart.git 1、集成折線圖、柱狀圖、扇形圖　　在ViewControl

android柱狀圖（自定義view）

public class HistogramView extends View { private Paint mLinePaint; private Paint mGreenPaint; private Paint mTextPaint;

Echarts 資料展示 (柱狀圖+折線)

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

echarts故障統計柱狀圖

echarts連結：http://gallery.echartsjs.com/editor.html?c=xB1Sfo5JbX 程式碼： option = { backgroundColor: 'black', color: ['#FFC90E', '#ED1C24'], t

Echarts(二、柱狀圖（各引數詳細描述）)

相關推薦