近期的项目需要使用中国地图使用了echarts 和hicharts ，这两个插件尤其给力
个人最倾向于echats ，功能 强大，且文档给力，
那么我们来看看如何使用吧，
现在把两个插件的帮助文档放在这里：
这是使用案例
http://echarts.baidu.com/echarts2/doc/doc.html#Line
非常详细的配置文档
http://echarts.baidu.com/echarts2/doc/option.html#title~series-i(line).data
下面我们来看一下配置：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body{margin:0px;padding:0px;}
</style>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
window.onload=function(){
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('chinamap'));
var option = {
/* backgroundColor:"#000",*/
title : {
text: '轮胎代理商名录',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item'
},
selectedMode : 'multiple',
dataRange: {
min: 0,
max:2500,
x: 'left',
y: 'bottom',
text:['高','低'], // 文本，默认为数值文本
calculable : true
},
toolbox: { //不显示工具条
show: true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
//dataView : {show: true, readOnly: false},
dataView : {
show : true,
title : '数据视图',
readOnly: true,
lang : ['数据视图', '关闭', '刷新'],
optionToContent: function(opt) {
var series = opt.series;
/*var table = '<table style="width:100%;text-align:center"><tbody><tr>'
+ '<td>' + series[0].name + '</td>'
+ '<td>' + series[1].value + '</td>'
+ '</tr>';
for (var i = 0, l = axisData.length; i < l; i++) {
table += '<tr>'
+ '<td>' + series[0].data[i] + '</td>'
+ '<td>' + series[1].data[i] + '</td>'
+ '</tr>';
}
table += '</tbody></table>';*/
var table="xiaosong";
return table;
}
},
restore : {show: true},
saveAsImage : {show: false}
}
},
roamController: {
show: true,
x: 'right',
mapTypeControl: {
'china': true
}
},
series : [
{
name: '数量',
type: 'map',
mapType: 'china',
roam: false,
itemStyle:{
normal:{label:{show:true,textStyle:{color:"#0066ff"}}},
emphasis:{label:{show:true},areaStyle:{color:"#f00"}}
},
data:[
{name: '北京',value: Math.round(Math.random()*1000),selected:true},
{name: '天津',value: Math.round(Math.random()*1000),v:12},
{name: '上海',value: Math.round(Math.random()*1000),v:15},
{name: '重庆',value: Math.round(Math.random()*1000),v:15},
{name: '河北',value: Math.round(Math.random()*1000),v:15},
{name: '河南',value: Math.round(Math.random()*1000),v:15},
{name: '云南',value: Math.round(Math.random()*1000),v:15},
{name: '香港',value: Math.round(Math.random()*1000),v:15},
{name: '澳门',value: Math.round(Math.random()*1000),v:15}
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
myChart.on(echarts.config.EVENT.CLICK, function(e){
console.log(e);
});
}
</script>
</head>
<body>
<div id="chinamap" style="height:500px;width:850px;margin:0px;padding:0px;">
</div>
</body>
</html>
hicharts
文档也是相对详细
https://api.hcharts.cn/highcharts#xAxis.type
jq("#viewzhishu").highcharts({
chart: {
zoomType: 'x'
},
title: {
text: vTitle
},
subtitle: {
text: document.ontouchstart === undefined ?
'鼠标拖动可以进行缩放' : '手势操作进行缩放'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 76, //纵坐标显示的刻度
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%m-%d',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
tooltip: {
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%Y-%m-%d',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
yAxis: {
title: {
text: '数值'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: '数值',
data: eval(vData)
}]
});
});