關於echart.js的基本數據配置

關於echart.js的基本數據配置

渲染一個echart的步驟

1. 通過echart獲取dom節點生成echart實例,可選擇配置的主題。chart

   var chart echarts.init(element[0], theme);	
   //創建一個 ECharts 實例，返回 echartsInstance，不能在單個容器上初始化多個 ECharts 實例。
   

2. 通過Echarts實例，設置圖表數據，之後的數據改變也是通過該接口來實現的

   //設置圖表實例的配置項以及數據，萬能接口，所有參數和數據的修改都可以通過 setOption 完成，
   //ECharts 會合並新的參數和數據，然後刷新圖表。
   //如果開啓動畫的話，ECharts 找到兩組數據之間的差異然後通過合適的動畫去表現數據的變化。
   // arguments -1
    	chart.setOption(option, notMerge, lazyUpdate);
   // arguments -2
       chart.setOption(option, {
   	    notMerge: ...,
   	    lazyUpdate: ...,
   	    silent: ...
   	});
   // options : 圖表的配置項和數據，具體見配置項手冊。
   // notMerge : 可選，是否不跟之前設置的 option 進行合併，默認爲 false，即合併。 類似 extend
   // 如果數據格式改變 echart 渲染會保留原來的數據 所以改爲true。 數據不進行合併
   

3. Echarts釋放 。 dispose

   	//銷燬實例，銷燬後實例無法再被使用。
   	echartsInstance.dispose();
   

4. 一些echart的其他操作
   • 加載動畫 showLoading

     // 顯示加載動畫效果。可以在加載數據前手動調用該接口顯示加載動畫，在數據加載完成後調用 hideLoading 隱藏加載動畫
     // (type?: string, opts?: Object)
     //type
     //可選，加載動畫類型，目前只有一種'default'
     //opts
     //可選，加載動畫配置項，跟type有關，下面是默認配置項：
     /*	default: {
     		  text: 'loading',
     		  color: '#c23531',
     		  textColor: '#000',
     		  maskColor: 'rgba(255, 255, 255, 0.8)',
     		  zlevel: 0
     	} */
      echartsInstance.showLoading (); //打開加載動畫
      echartsInstance.hideLoading ();//關閉加載動畫
     

   • 容器大小發生變化時需要手動調用 resize

      echartsInstance.resize ();
     

option 簡單配置

• options.xAix
  x軸的數據展示 系列軸1 系列軸2 系列軸3
• options.series
  每根軸中的數據

option =  {
       color: ['#0685ff','#3f7a44', '#f41919', '#72b3ff', '#62c21b'],
       tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        // 座標系位置
        grid: {
        // top: '20px',
            left: '20px',
            right: '20px',
            bottom: '100px',
            containLabel: true
        },
        legend: {
            data: ['軸1','軸2', '軸3', '軸4']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: {
            type: 'category',
            axisLabel:{
                interval: 0,
                rotate : dataConfig.names.length < 4? 0 : 90, 
            },
            // axisTick: {show: true},
            data:dataConfig.names
        },
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '軸1',
                type: 'bar',
                barGap: 0,
                data: dataConfig.countType.personNum
            },
            {
                name: '軸2',
                type: 'bar',
                barGap: 0,
                data: dataConfig.countType.sumNum
            },
            {
                name: '軸3',
                type: 'bar',
                data: dataConfig.countType.sj 
            },
            {
                name: '軸4',
                type: 'bar',
                data: dataConfig.countType.jsjj
            }
        ]
    };