Echars講解分析

安裝與引入

經過 npm 安裝 EChartsjavascript

經過命令npm install echarts --save安裝獲得ECharts 和 zrender,存放在 node_modules 目錄,直接在項目中運行代碼 require('echarts')獲得 Echarts。css

var echarts = require('echarts');

// 基於準備好的dom,初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 繪製圖表
myChart.setOption({
    title: { text: 'ECharts 入門示例' },
    tooltip: {},
    xAxis: {
        data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

也能夠按需引入java

Echarts元素

全局背景

// 全圖默認背景
// backgroundColor: 'rgba(0,0,0,0)',

// 默認色板
color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
        '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
        '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
        '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],

title

title: {
    x: 'left',                 // 水平安放位置,默認爲左對齊,可選爲:
                               // 'center' ¦ 'left' ¦ 'right'
                               // ¦ {number}(x座標,單位px)
    y: 'top',                  // 垂直安放位置,默認爲全圖頂端,可選爲:
                               // 'top' ¦ 'bottom' ¦ 'center'
                               // ¦ {number}(y座標,單位px)
    //textAlign: null          // 水平對齊方式,默認根據x設置自動調整
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc',       // 標題邊框顏色
    borderWidth: 0,            // 標題邊框線寬,單位px,默認爲0(無邊框)
    padding: 5,                // 標題內邊距,單位px,默認各方向內邊距爲5,
                               // 接受數組分別設定上右下左邊距,同css
    itemGap: 10,               // 主副標題縱向間隔,單位px,默認爲10,
    textStyle: {
        fontSize: 18,
        fontWeight: 'bolder',
        color: '#333'          // 主標題文字顏色
    },
    subtextStyle: {
        color: '#aaa'          // 副標題文字顏色
    }
}

legend

legend: {
    orient: 'horizontal',      // 佈局方式,默認爲水平佈局,可選爲:
                               // 'horizontal' ¦ 'vertical'
    x: 'center',               // 水平安放位置,默認爲全圖居中,可選爲:
                               // 'center' ¦ 'left' ¦ 'right'
                               // ¦ {number}(x座標,單位px)
    y: 'top',                  // 垂直安放位置,默認爲全圖頂端,可選爲:
                               // 'top' ¦ 'bottom' ¦ 'center'
                               // ¦ {number}(y座標,單位px)
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc',       // 圖例邊框顏色
    borderWidth: 0,            // 圖例邊框線寬,單位px,默認爲0(無邊框)
    padding: 5,                // 圖例內邊距,單位px,默認各方向內邊距爲5,
                               // 接受數組分別設定上右下左邊距,同css
    itemGap: 10,               // 各個item之間的間隔,單位px,默認爲10,
                               // 橫向佈局時爲水平間隔,縱向佈局時爲縱向間隔
    itemWidth: 20,             // 圖例圖形寬度
    itemHeight: 14,            // 圖例圖形高度
    textStyle: {
        color: '#333'          // 圖例文字顏色
    }
}

grid

grid: {
    x: 80,
    y: 60,
    x2: 80,
    y2: 60,
    // width: {totalWidth} - x - x2,
    // height: {totalHeight} - y - y2,
    backgroundColor: 'rgba(0,0,0,0)',
    borderWidth: 1,
    borderColor: '#ccc'
}

dataRange(值域)

dataRange: {
    orient: 'vertical',        // 佈局方式,默認爲垂直佈局,可選爲:
                               // 'horizontal' ¦ 'vertical'
    x: 'left',                 // 水平安放位置,默認爲全圖左對齊,可選爲:
                               // 'center' ¦ 'left' ¦ 'right'
                               // ¦ {number}(x座標,單位px)
    y: 'bottom',               // 垂直安放位置,默認爲全圖底部,可選爲:
                               // 'top' ¦ 'bottom' ¦ 'center'
                               // ¦ {number}(y座標,單位px)
    backgroundColor: 'rgba(0,0,0,0)',
    borderColor: '#ccc',       // 值域邊框顏色
    borderWidth: 0,            // 值域邊框線寬,單位px,默認爲0(無邊框)
    padding: 5,                // 值域內邊距,單位px,默認各方向內邊距爲5,
                               // 接受數組分別設定上右下左邊距,同css
    itemGap: 10,               // 各個item之間的間隔,單位px,默認爲10,
                               // 橫向佈局時爲水平間隔,縱向佈局時爲縱向間隔
    itemWidth: 20,             // 值域圖形寬度,線性漸變水平佈局寬度爲該值 * 10
    itemHeight: 14,            // 值域圖形高度,線性漸變垂直佈局高度爲該值 * 10
    splitNumber: 5,            // 分割段數,默認爲5,爲0時爲線性漸變
    color:['#1e90ff','#f0ffff'],//顏色 
    //text:['高','低'],         // 文本,默認爲數值文本
    textStyle: {
        color: '#333'          // 值域文字顏色
    }
}

toolbox(工具欄)

toolbox: {
    orient: 'horizontal',      // 佈局方式,默認爲水平佈局,可選爲:
                               // 'horizontal' ¦ 'vertical'
    x: 'right',                // 水平安放位置,默認爲全圖右對齊,可選爲:
                               // 'center' ¦ 'left' ¦ 'right'
                               // ¦ {number}(x座標,單位px)
    y: 'top',                  // 垂直安放位置,默認爲全圖頂端,可選爲:
                               // 'top' ¦ 'bottom' ¦ 'center'
                               // ¦ {number}(y座標,單位px)
    color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
    backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景顏色
    borderColor: '#ccc',       // 工具箱邊框顏色
    borderWidth: 0,            // 工具箱邊框線寬,單位px,默認爲0(無邊框)
    padding: 5,                // 工具箱內邊距,單位px,默認各方向內邊距爲5,
                               // 接受數組分別設定上右下左邊距,同css
    itemGap: 10,               // 各個item之間的間隔,單位px,默認爲10,
                               // 橫向佈局時爲水平間隔,縱向佈局時爲縱向間隔
    itemSize: 16,              // 工具箱圖形寬度
    featureImageIcon : {},     // 自定義圖片icon
    featureTitle : {
        mark : '輔助線開關',
        markUndo : '刪除輔助線',
        markClear : '清空輔助線',
        dataZoom : '區域縮放',
        dataZoomReset : '區域縮放後退',
        dataView : '數據視圖',
        lineChart : '折線圖切換',
        barChart : '柱形圖切換',
        restore : '還原',
        saveAsImage : '保存爲圖片'
    }
}

tooltip(提示框)

tooltip: {
    trigger: 'item',           // 觸發類型,默認數據觸發,見下圖,可選爲:'item' ¦ 'axis'
    showDelay: 20,             // 顯示延遲,添加顯示延遲能夠避免頻繁切換,單位ms
    hideDelay: 100,            // 隱藏延遲,單位ms
    transitionDuration : 0.4,  // 動畫變換時間,單位s
    backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景顏色,默認爲透明度爲0.7的黑色
    borderColor: '#333',       // 提示邊框顏色
    borderRadius: 4,           // 提示邊框圓角,單位px,默認爲4
    borderWidth: 0,            // 提示邊框線寬,單位px,默認爲0(無邊框)
    padding: 5,                // 提示內邊距,單位px,默認各方向內邊距爲5,
                               // 接受數組分別設定上右下左邊距,同css
    axisPointer : {            // 座標軸指示器,座標軸觸發有效
        type : 'line',         // 默認爲直線,可選爲:'line' | 'shadow'
        lineStyle : {          // 直線指示器樣式設置
            color: '#48b',
            width: 2,
            type: 'solid'
        },
        shadowStyle : {                       // 陰影指示器樣式設置
            width: 'auto',                   // 陰影大小
            color: 'rgba(150,150,150,0.3)'  // 陰影顏色
        }
    },
    textStyle: {
        color: '#fff'
    }
}

xAxis

xAxis : [
    {
        type : 'category',
        axisLine: {
            symbol: ['none', 'arrow'], //設置x軸或y軸箭頭
            lineStyle: {
                color: '#B5B5B5',
                width: 2, //這裏是爲了突出顯示加上的
            }
        },
        //刻度是向內仍是向外
        axisTick:{
            inside:true,
            length:1,
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'solid',
                color:'#FCFCFC',//網格顏色
            }
        },
        axisLabel:{ //調整x軸的lable
            //interval:0,  //按x軸的長度顯示的刻度的個數    例如:原本顯示20個刻度,由於x軸端只顯示了10個,
            rotate:0,  //實現x軸的刻度的標識實現旋轉,
            textStyle:{
                fontSize:10,// 讓字體變大
                color:"#B5B5B5"
            }
        },
        name: "(日期)",
        nameTextStyle: {
            color: "#B5B5B5",
            verticalAlign: "bottom",
            fontSize:'10',
            padding:[35,50,10,-2] //設置x軸的標題的位置
        },
        boundaryGap : false,
        data:['2016-01','2016-07','2016-08','2016-09']
       // data : ['週一','週二','週三','週四','週五','週六','週日']
    }
]

yAxis

yAxis : [
    {
        type : 'VALUE',
        splitNumber:2,//因此將 splitNumber設成3
        axisLine: {
            symbol: ['none', 'arrow'],
            lineStyle: {
                color: '#B5B5B5',
                width: 2, //這裏是爲了突出顯示加上的
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'solid',//
                color:'#FCFCFC'///網格顏色
            }
        },
        //刻度是向內仍是向外
        axisTick:{
            inside:true,
            length:1,
        },
        axisLabel:{ //調整x軸的lable
            textStyle:{
                fontSize:10,// 讓字體變大
                color:"#B5B5B5"
            }
        },
        name: "(人數)",
        nameLocation:"end",  //實現標題顯示的位置
        nameTextStyle:{
            color: "#B5B5B5",
            fontSize:10,
            //                   verticalAlign: 'top',
            //                  align:"left",
            padding:[50,0,-6,0]
        },
        //axisLine : {onZero: false},
      /*  boundaryGap : false,
        axisLabel : {
            formatter: '{value} '
        },
        data:['AA-','AA','AA+']*/

    }
]

相似溫溼度的兩個y軸能夠採用如下代碼node

yAxis: [    //Y軸(這裏我設置了兩個Y軸,左右各一個)
    {
        //第一個(左邊)Y軸,yAxisIndex爲0
        type: 'value',
        name: '溫度',
        max: 120,
        min: 0,
        axisLabel: {
            formatter: '{value} ℃'    //控制輸出格式
        },
        splitLine: {
            show: false
        }
    },
    {
        //第二個(右邊)Y軸,yAxisIndex爲1
        type: 'value',
        name: '溼度',
        max: 100,
        min: 0,
        scale: true,
        axisLabel: {
            formatter: '{value} %'
        },
        splitLine: {
            show: false
        }
    }

]

在series屬性中插入如下的代碼yAxisIndex: '1'便可準確表示。npm

timeLine(時間軸)

第一種json

timeline:{
    axisType :'category',
    orient:'vertical',
    autoPlay :true,
    playInterval :15000,
    right: '5',
    left:'320',
    top:'0',
    bottom:'0',
    label:{
        interval:0,
         formatter: function (item) {
                var str = item.split("-")[1];
                return parseInt(str)+'月';
            }
    },
    data:monthArr,
    currentIndex : index,
    controlStyle:{
        showPlayBtn :false
    }
}

第二種數組

timeline: {
    show: true,
    axisType: 'category',
    autoPlay: true,
    currentIndex: 5,
    playInterval: 5000,
    symbolSize: 12,
    checkpointStyle: {
        symbol: 'circle',
        symbolSize: 18,
        color: '#00d3e7',
        borderWidth: 2,
        borderColor: "#00d3e7"
    }

dataZoom組件

dataZoom:[ //區域縮放 
{ 
  id: 'dataZoomX', 
  show:true, //是否顯示 組件。若是設置爲 false,不會顯示,可是數據過濾的功能還存在。 
  backgroundColor:"rgba(47,69,84,0)", //組件的背景顏色 
  type: 'slider', //slider表示有滑動塊的,inside表示內置的 
  dataBackground:{ //數據陰影的樣式。 
    lineStyle:mylineStyle, //陰影的線條樣式 
    areaStyle:myareaStyle, //陰影的填充樣式 
  }, 
  fillerColor:"rgba(167,183,204,0.4)", //選中範圍的填充顏色。 
  borderColor:"#ddd", //邊框顏色。 
  filterMode: 'filter', //'filter':當前數據窗口外的數據,被 過濾掉。即 會 影響其餘軸的數據範圍。每一個數據項,只要有一個維度在數據窗口外,整個數據項就會被過濾掉。 
          //'weakFilter':當前數據窗口外的數據,被 過濾掉。即 會 影響其餘軸的數據範圍。每一個數據項,只有當所有維度都在數據窗口同側外部,整個數據項纔會被過濾掉。 
          //'empty':當前數據窗口外的數據,被 設置爲空。即 不會 影響其餘軸的數據範圍。 
          //'none': 不過濾數據,只改變數軸範圍。 
  xAxisIndex:0, //設置 dataZoom-inside 組件控制的 x軸,能夠用數組表示多個軸 
  yAxisIndex:[0,2], //設置 dataZoom-inside 組件控制的 y軸,能夠用數組表示多個軸 
  radiusAxisIndex:3, //設置 dataZoom-inside 組件控制的 radius 軸,能夠用數組表示多個軸 
  angleAxisIndex:[0,2], //設置 dataZoom-inside 組件控制的 angle 軸,能夠用數組表示多個軸 
  start: 30, //數據窗口範圍的起始百分比,表示30% 
  end: 70, //數據窗口範圍的結束百分比,表示70% 
  startValue:10, //數據窗口範圍的起始數值 
  endValue:100, //數據窗口範圍的結束數值。 
  orient:"horizontal", //佈局方式是橫仍是豎。不只是佈局方式,對於直角座標系而言,也決定了,缺省狀況控制橫向數軸仍是縱向數軸。'horizontal':水平。'vertical':豎直。 
  zoomLock:false, //是否鎖定選擇區域(或叫作數據窗口)的大小。若是設置爲 true 
  則鎖定選擇區域的大小,也就是說,只能平移,不能縮放。 
  throttle:100, //設置觸發視圖刷新的頻率。單位爲毫秒(ms)。 
  zoomOnMouseWheel:true, //如何觸發縮放。可選值爲:true:表示不按任何功能鍵,鼠標滾輪能觸發縮放。false:表示鼠標滾輪不能觸發縮放。'shift':表示按住 shift 和鼠標滾輪能觸發縮放。'ctrl':表示按住 ctrl 和鼠標滾輪能觸發縮放。'alt':表示按住 alt 和鼠標滾輪能觸發縮放。 
  moveOnMouseMove:true, //如何觸發數據窗口平移。true:表示不按任何功能鍵,鼠標移動能觸發數據窗口平移。false:表示鼠標滾輪不能觸發縮放。'shift':表示按住 shift 和鼠標移動能觸發數據窗口平移。'ctrl':表示按住 ctrl 和鼠標移動能觸發數據窗口平移。'alt':表示按住 alt 和鼠標移動能觸發數據窗口平移。 
  left:"center", //組件離容器左側的距離,'left', 'center', 'right','20%' 
  top:"top", //組件離容器上側的距離,'top', 'middle', 'bottom','20%' 
  right:"auto", //組件離容器右側的距離,'20%' 
  bottom:"auto", //組件離容器下側的距離,'20%' 

}, 
{ 
  id: 'dataZoomY', 
  type: 'inside', 
  filterMode: 'empty', 
  disabled:false, //是否中止組件的功能。 
  xAxisIndex:0, //設置 dataZoom-inside 組件控制的 x軸,能夠用數組表示多個軸 
  yAxisIndex:[0,2], //設置 dataZoom-inside 組件控制的 y軸,能夠用數組表示多個軸 
  radiusAxisIndex:3, //設置 dataZoom-inside 組件控制的 radius 軸,能夠用數組表示多個軸 
  angleAxisIndex:[0,2], //設置 dataZoom-inside 組件控制的 angle 軸,能夠用數組表示多個軸 
  start: 30, //數據窗口範圍的起始百分比,表示30% 
  end: 70, //數據窗口範圍的結束百分比,表示70% 
  startValue:10, //數據窗口範圍的起始數值 
  endValue:100, //數據窗口範圍的結束數值。 
  orient:"horizontal", //佈局方式是橫仍是豎。不只是佈局方式,對於直角座標系而言,也決定了,缺省狀況控制橫向數軸仍是縱向數軸。'horizontal':水平。'vertical':豎直。 
  zoomLock:false, //是否鎖定選擇區域(或叫作數據窗口)的大小。若是設置爲 true 則鎖定選擇區域的大小,也就是說,只能平移,不能縮放。 
  throttle:100, //設置觸發視圖刷新的頻率。單位爲毫秒(ms)。 
  zoomOnMouseWheel:true, //如何觸發縮放。可選值爲:true:表示不按任何功能鍵,鼠標滾輪能觸發縮放。false:表示鼠標滾輪不能觸發縮放。'shift':表示按住 shift 和鼠標滾輪能觸發縮放。'ctrl':表示按住 ctrl 和鼠標滾輪能觸發縮放。'alt':表示按住 alt 和鼠標滾輪能觸發縮放。 
  moveOnMouseMove:true, //如何觸發數據窗口平移。true:表示不按任何功能鍵,鼠標移動能觸發數據窗口平移。false:表示鼠標滾輪不能觸發縮放。'shift':表示按住 shift 和鼠標移動能觸發數據窗口平移。'ctrl':表示按住 ctrl 和鼠標移動能觸發數據窗口平移。'alt':表示按住 alt 和鼠標移動能觸發數據窗口平移。 
} 
]

series

series: [
    {
        name: '溫度(℃)',
        type: 'line',    //折線圖表示(生成溫度曲線)
        symbol: 'emptycircle',    //設置折線圖中表示每一個座標點的符號;emptycircle:空心圓;emptyrect:空心矩形;circle:實心圓;emptydiamond:菱形
        stack: 總量,  //寫同樣會有累加的效果
        areaStyle: {},
        markPoint: {
           data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
           ]
        }//面積的陰影
        data: [110, 20, 56, 36, 96, 58, 25],     //數據值經過Ajax動態獲取
    },
    {
        name: '溼度(%)',
        yAxisIndex: '1',    //定位到第二個座標軸
        type: 'line',
        symbol: 'emptyrect',
        data: [45, 63, 10, 62, 35, 88, 66]
    },]

Echarts 設置

異步數據加載

第一種echarts

var myChart = echarts.init(document.getElementById('main'));

$.get('data.json').done(function (data) {
    myChart.setOption({
        title: {
            text: '異步數據加載示例'
        },
        tooltip: {},
        legend: {
            data:['銷量']
        },
        xAxis: {
            data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
        },
        yAxis: {},
        series: [{
            name: '銷量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
});

第二種dom

var myChart = echarts.init(document.getElementById('main'));
// 顯示標題,圖例和空的座標軸
myChart.setOption({
    title: {
        text: '異步數據加載示例'
    },
    tooltip: {},
    legend: {
        data:['銷量']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: []
    }]
});

// 異步加載數據
$.get('data.json').done(function (data) {
    // 填入數據
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根據名字對應到相應的系列
            name: '銷量',
            data: data.data
        }]
    });
});

loading動畫

myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
});

此文章部分搬運,部分原創,但因爲屢次修稿,搬運的地址遺失,若有侵權,麻煩聯繫個人郵箱。異步

相關文章
相關標籤/搜索