首页 > 代码库 > echarts使用方法
echarts使用方法
一、 一般步骤
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 = http://www.mamicode.com/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]
}
}
]
echarts使用方法