echarts.js  官方地址：http://echarts.baidu.com/examples/

使用方法：

1、头部引入

2、基础应用(

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

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

// 指定图表的配置项和数据

var option = {

title: {

text: ‘ECharts 入门示例‘

},

tooltip: {},

legend: {

data:[‘销量‘]

},

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

},

yAxis: {},

series: [{

name: ‘销量‘,

type: ‘bar‘,

data: [5, 20, 36, 10, 10, 20]

}]

};

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

myChart.setOption(option);

3、地图的使用

//引入山西的js文件

具体代码如下：

山西地图

//container 为div的id

var dom = document.getElementById("main");

//得到echarts的实例对象

var myChart = echarts.init(dom);

initEcharts(‘山西‘);

function initEcharts(pName) {

//关键是配置项

var option = {

series: [{

name: ‘网点个数‘,

//series[i]-map:系列列表。每个系列通过 type 决定自己的图表类型,此处是地图类型

type: ‘map‘,

mapType: pName,

//地图区域的多边形 图形样式，有 normal 和 emphasis 两个状态

itemStyle: {

//normal 是图形在默认状态下的样式；

normal: {

show: true,

areaColor: "#CECECE",

borderColor: "#FCFCFC",

borderWidth: "1"

},

//emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。

emphasis: {

show: true,

areaColor: "#C8A5DF",

}

},

//图形上的文本标签，可用于说明图形的一些数据信息

label: {

normal: {

show: true

},

emphasis: {

show: true

}

},

}],

title: {

text: pName,

left: ‘center‘

}

};

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

myChart.setOption(option);

}

//定义全国省份的数组

var provinces = [‘datong‘, ‘shuozhou‘, ‘xinzhou‘, ‘lvliang‘, ‘taiyuan‘, ‘yangquan‘, ‘jinzhong‘, ‘linfen‘, ‘changzhi‘, ‘jincheng‘, ‘yuncheng‘];

var provincesText = [‘大同市‘, ‘朔州市‘, ‘忻州市‘, ‘吕梁市‘, ‘太原市‘, ‘阳泉市‘, ‘晋中市‘, ‘临汾市‘, ‘长治市‘, ‘晋城市‘, ‘运城市‘];

myChart.on(‘click‘, function(param) {

//console.log(param);

//遍历取到provincesText 中的下标 去拿到对应的省js

for (var i = 0; i < provincesText.length; i++) {

if (param.name == provincesText[i]) {

//显示对应省份的方法

showProvince(provincesText[i],provinces[i]);

break;

}

}

});

//展示对应的省

function showProvince(pText,pName) {

loadBdScript(‘$‘ + pName + ‘JS‘, ‘js/province/‘ + pName + ‘.js‘, function() {

//初始化echarts

initEcharts(pText);

});

}

//加载对应的JS

function loadBdScript(scriptId, url, callback) {

var script = document.createElement("script")

script.type = "text/javascript";

if (script.readyState) { //IE

script.onreadystatechange = function() {

if (script.readyState == "loaded" || script.readyState == "complete") {

script.onreadystatechange = null;

callback();

}

};

} else { //Others

script.onload = function() {

callback();

};

}

script.src = url;

script.id = scriptId;

document.getElementsByTagName("head")[0].appendChild(script);

};