使用EChats制作中国地图,点击省份跳转到相应链接

html中:






js文件





其中map.js


var container = document.getElementById('main');
//初始化容器高度
container.style.height = $('.container').innerWidth()*2/3+"px"
var myChart = echarts.init(container);
var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    
    series: [
        {
            name: '中国',
            type: 'map',
            mapType: 'china',
            //selectedMode : 'multiple',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle:{
            normal:{
label:{
show:true,
textStyle: {
color: "#231816"


}
},
borderColor: '#666',
areaColor: '#bbb',
},
emphasis:
{
areaColor:'#3385ff',
label:
{
show:true,
textStyle: {
  color: "#f6f6f6"
}
}
}
            },
            data:[

                {name:'吉林', provinceurl:" "},
                {name:'辽宁', provinceurl:" "},
                {name:'河北', provinceurl:" "},
                {name:'河南', provinceurl:" "},
                {name:'云南', provinceurl:" "},
                {name:'海南', provinceurl:" "},
                {name:'江苏', provinceurl:" "},
                {name:'重庆', provinceurl:" "},
                {name:'天津', provinceurl:" "},
                {name:'广西', provinceurl:" "},
                {name:'山东', provinceurl:" "},
                {name:'内蒙古', provinceurl:" "},
                {name:'新疆', provinceurl:" "},
                {name:'西藏', provinceurl:" "},
                {name:'甘肃', provinceurl:" "},
                {name:'四川', provinceurl:" "},
                {name:'福建', provinceurl:" "},
                {name:'浙江', provinceurl:" "},
                {name:'青海', provinceurl:" "},
                {name:'安徽', provinceurl:" "},
                {name:'陕西', provinceurl:" "},
                {name:'山西', provinceurl:" "},
                {name:'江西', provinceurl:" "},
                {name:'黑龙江', provinceurl:" "},
                {name:'贵州', provinceurl:" "},
                {name:'上海', provinceurl:" "},
                {name:'广东', provinceurl:" "},
                {name:'湖北', provinceurl:" "},
                {name:'湖南', provinceurl:" "},
                {name:'北京', provinceurl:" "},
                {name:'宁夏', provinceurl:" "},

            ]
        }
    ]
};
myChart.setOption(option);
//window.onresize = myChart.resize;//只有宽度变化才变化
//用于使chart自适应高度和宽度
window.onresize = function () {
    container.style.height = $('.container').innerWidth()*2/3+"px";
    myChart.resize();
};


myChart.on('click', function (params) {
    window.open(params.data.provinceurl);
    //console.log(params.series.itemStyle);
});


最后附上echarts的链接,方便下载调试,其中还包含其他各种图形组件

http://echarts.baidu.com/echarts2/doc/example.html

你可能感兴趣的:(ECharts,javascript)