echarts3.x 入門

echarts 使用

1.getStart

1.1引入 echart

  <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>

1.2異步調用

加載loading 動畫

myChart.showLoading();

加載數據后隱藏loading

myChart.hideLoading();

1.3動態數據

定時填入數據：

setInterval(function () {
    addData(true);
    myChart.setOption({
        xAxis: {
            data: date
        },
        series: [{
            name:'成交',
            data: data
        }]
    });
}, 500);

1.4 圖表中的交互

圖例組件 legend、標題組件 title、視覺映射組件 visualMap、數據區域縮放組件 dataZoom、時間線組件 timeline

1.5代碼觸發 ECharts 中組件的行為

setInterval(function () {
var dataLen = option.series[0].data.length;
// 取消之前高亮的圖形
myChart2.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: app.currentIndex
});
app.currentIndex = (app.currentIndex + 1) % dataLen;
// 高亮當前圖形
myChart2.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: app.currentIndex
});
// 顯示 tooltip
myChart2.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: app.currentIndex
});
}, 1000);

1.6 使用svg

echart默認使用 canvas ,3.8以后可以使用svg渲染器；

// 使用 Canvas 渲染器（默認）
var chart = echarts.init(containerDom, null, {renderer: 'canvas'});
// 等價於：
var chart = echarts.init(containerDom);
// 使用 SVG 渲染器
var chart = echarts.init(containerDom, null, {renderer: 'svg'});

2.echart 方法

2.1 echarts 全局對象方法

1.init()
2.connect()
3.disconnect()
4.dispose()
5.getInstanceByDom()
6.registerMap();
7.getMap()
8.registerTheme();
9.graphic{ }

2.2 echartsInstance實例方法

2.3 action

2.4 events

n.其他問題

n.1標簽問題問

設置顯示標簽，並組織標簽中的內容。
label:{
normal:{
show: true,
// 定義顯示提示內容
formatter: '{b}:{c}'
}
}

n.2 使用百度作為底圖

首先要引入兩個js：

  <script src="http://api.map.baidu.com/api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu"></script>
  <script src="./js/bmap.min.js"></script>

在option 中多了一個bmap 的配置項。

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
    bmap: {
        center: [120.13066322374, 30.240018034923],
        zoom: 14,
        roam: true,
                mapStyle: {
                      styleJson: [
          {
                    'featureType': 'land',    //調整土地顏色
                    'elementType': 'geometry',
                    'stylers': {
                              'color': '#081734'
                    }
          },
          {
                    'featureType': 'building',  //調整建築物顏色
                    'elementType': 'geometry',
                    'stylers': {
                              'color': '#04406F'
                    }
          },
        {
                    'featureType': 'building',  //調整建築物標簽是否可視
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'highway',    //調整高速道路顏色
                    'elementType': 'geometry',
                    'stylers': {
                    'color': '#015B99'
                    }
          },
          {
                    'featureType': 'highway',    //調整高速名字是否可視
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'arterial',  //調整一些干道顏色
                    'elementType': 'geometry',
                    'stylers': {
                    'color':'#003051'
                    }
          },
          {
                    'featureType': 'arterial',
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'green',
                    'elementType': 'geometry',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'water',
                    'elementType': 'geometry',
                    'stylers': {
                              'color': '#044161'
                    }
          },
          {
                    'featureType': 'subway',    //調整地鐵顏色
                    'elementType': 'geometry.stroke',
                    'stylers': {
                    'color': '#003051'
                    }
          },
          {
                    'featureType': 'subway',
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'railway',
                    'elementType': 'geometry',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'railway',
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'all',    //調整所有的標簽的邊緣顏色
                    'elementType': 'labels.text.stroke',
                    'stylers': {
                              'color': '#313131'
                    }
          },
          {
                    'featureType': 'all',    //調整所有標簽的填充顏色
                    'elementType': 'labels.text.fill',
                    'stylers': {
                              'color': '#FFFFFF'
                    }
          },
          {
                    'featureType': 'manmade',  
                    'elementType': 'geometry',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'manmade',
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'local',
                    'elementType': 'geometry',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'local',
                    'elementType': 'labels',
                    'stylers': {
                    'visibility': 'off'
                    }
          },
          {
                    'featureType': 'subway',
                    'elementType': 'geometry',
                    'stylers': {
                              'lightness': -65
                    }
          },
          {
                    'featureType': 'railway',
                    'elementType': 'all',
                    'stylers': {
                              'lightness': -40
                    }
          },
          {
                    'featureType': 'boundary',
                    'elementType': 'geometry',
                    'stylers': {
                              'color': '#8b8787',
                              'weight': '1',
                              'lightness': -29
                    }
          }]
        }
    },
    series: [{
        type: 'scatter',
        coordinateSystem: 'bmap',
        data: [ [120, 30, 1] ]
    }]


});

var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());

來自為知筆記(Wiz)