echarts使用方法

Posted 2020-08-15

一、 一般步骤

1、引入 echarts.js

2、为模块加载器配置echarts和所需图表的路径

require.config({
    paths : {
        echarts : ‘路径 xxx/xxx‘
    }
});

3．动态加载echarts和所需图表 

4.回调函数中可以初始化图表并驱动图表的生成

5.基于准备好的dom，初始化echarts实例   

6.指定图表的配置项和数据。  

7.使用刚指定的配置项和数据显示图表。 

function (ec) {
    var myChart = ec.init(document.getElementById(‘main‘));
    var option = ...
        myChart.setOption(option);
});

二、 图表选项option（包含图表实例任何可配置选项：公共选项，组件选项 ，数据选项）

1、Title

标题，每个图表最多仅有一个标题控件。

2、Legend

图例，表述数据和图形的关联

3、Calculable

是否启用拖拽重计算特性，默认关闭。

4、xAxis

直角坐标系中横轴数组。

5、yAxis

直角坐标系中纵轴数组。

6、series

数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据。

7、dataRange 

值域选择，常用于展现地域数据时选择值域范围

8．……

三、 series 

驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据。其中个别选项仅在部分图表类型中有效。

1、name

2、type图表类型。

‘line‘（折线图） | ‘bar‘（柱状图） | ‘scatter‘（散点图） | ‘k‘（K线图）

‘pie‘（饼图） | ‘radar‘（雷达图） | ‘chord‘（和弦图） | ‘force‘（力导向布局图） | ‘map‘（地图）

3、data

4、mapType 地图类型

5、markLine 数据标线内容。

6、markPoint数据标注内容。

7、geoCoord 经纬度坐标配置。{‘中牟县人民医院‘ : [ 113.9481360000, 34.7270820000 ]}

8、……

四、 地图

内置世界地图、中国及中国34个省市自治区地图数据。可直接使用

mapType : ‘河南‘

五、扩展地图

1、地图数据：XXX.json（如：zhongmou.json）

下载地址：http://ecomfe.github.io/echarts-map-tool/

2、动态获取坐标（通过地址解析坐标）

（‘中牟县人民医院‘ : [ 113.9481360000, 34.7270820000 ]）

var myGeo = new BMap.Geocoder();
myGeo.getPoint(‘中牟县人民医院‘, function (point) {
    if (point != null) {
        alert(JSON.stringify(point)); //经纬度
        alert(point.lng); //经度
        alert(point.lat); //纬度
    }
}, "河南");

3、坐标查询网址：http://www.gpsspg.com/maps.htm

4、添加地图类型mapType

var cityMap = {
    "中牟县" : "zhongmou"
};
var mapType = [];
var mapGeoData = require(‘echarts/util/mapData/params‘);
console.log(mapGeoData)
for (var city in cityMap) {
    mapType.push(city);
    mapGeoData.params[city] = {
        getGeoJson : (function (c) {
            var geoJsonName = cityMap[c];
            return function (callback) {
                $.getJSON(‘geoJson/‘ + geoJsonName
                     + ‘.json‘, callback);
            }
        })(city)
    }
} 

5、使用地图类型mapType，配置地理坐标geoCoord 

series : [{
        name : ‘中牟‘,
        type : ‘map‘,
        roam : true,
        hoverable : false,
        mapType : ‘中牟县‘,
        itemStyle : {
            …
        },
        data : [],
        markLine : {
            …
        },
        geoCoord : {
            ‘中牟县人民医院‘ : [113.9481360000, 34.7270820000]
        }
    }
]