echarts饼图位置调整 地图上增加文字说明，能在地图的指定位置

来源：蜘蛛抓取(WebSpider) 时间：2017-10-21 15:10 标签： echarts设置图例位置
之前写过一个Echarts的文章，没有基础的同学可以先看这＜，对于一个地图和说，我们在初始化之后，你可能被在地图上标识出一些点，当然这根据你的业务去标识，而如果每次更新数据都加载全部的标识点，这对于性能是有影响的，也是没有必要的，所以我就找了一种动态添加和删除点的方法，即addMarkPoint和delMarkPoint，需要注意的是，如果标识后添加或者删除之后，我们必须要刷新地图，这样你做的操作才可以第一时间响应到地图上来．
　　　 //周期调用刷新数据
setInterval(function () {
console.log("going");
//在线，添加点
myChart.addMarkPoint(2, {
data: [{ name: "北京" }]
//离线，添加点
myChart.addMarkPoint(1, {
data: [{ name: "天津" }]
myChart.delMarkPoint(2, "北京");
myChart.refresh();//实时更新到地图
从图中我们看到，添加标识后＂北京＂之后又删除了＂北京＂，所以在地图上只把＂天津＂显示出来了．
对于一个框架的研究我们需要有耐心．
对于一个框架的猜测，我们要敢去想，多去尝试！
阅读(...) 评论()在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
一图 需求这样
现在做到这样 要在 盘县 和钟山区 新加两个区域 如一图
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以通过 echart 中的气泡来实现。。可以通过气泡的 symbol 属性来更换默认的气泡类型（可以使用图片），弄两个气泡，分别使用两个新加区域的图片就行。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
echarts使用的地图格式是geojson，地址是geojson.io。如果你载的echarts地图是未压缩的版本，里面的代码会跟geojson一样。可以先在geojson.io上面把点描好，再将其放入你下载的地图里面，就会产生效果。当然，其中还是有些小问题的。如果是压缩版本的话，打开看会一头雾水，全是@AABB这类的，不像未压缩的那样全是坐标，不好修改。我建议先下载未压缩版本，对其修改，再对修改的部份进行压缩再放到压缩的版本里面，这样效果是最好的。压缩方法网上好像是能找到，其实就是echarts的一个转码文件，修改一下就能用。
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：一、网址：&& &&& &&& &/download.html点击：&& &&& &&& &完整下载文件：&& &&& &echarts.min.js网址：&& &&& &&& &/download-map.html点击：&& &&& &&& &中国地图 - JS下载文件：&& &&& &china.js二、代码示例
&!DOCTYPE html&
&meta charset="UTF-8"&
&meta http-equiv="X-UA-Compatible" content="IE=EDGE"&
&title&ECharts&/title&
&link rel="stylesheet" type="text/css" href="css/main.css"/&
&script src="js/jquery-1.9.1.min.js"&&/script&
&script src="js/echarts.min.js"&&/script&
&script src="js/china.js"&&/script&
&style&#china-map {width:1000px; height: 1000px;margin: auto;}&/style&
&div id="china-map"&&/div&
var myChart = echarts.init(document.getElementById('china-map'));
var option = {
tooltip: {
show: false //不显示提示标签
formatter: '{b}', //提示标签格式
backgroundColor:"#ff7f50",//提示标签背景颜色
textStyle:{color:"#fff"} //提示标签字体颜色
series: [{
type: 'map',
mapType: 'china',
show: true,//显示省份标签
textStyle:{color:"#c71585"}//省份标签字体颜色
emphasis: {//对应的鼠标悬浮效果
show: true,
textStyle:{color:"#800080"}
itemStyle: {
borderWidth: .<span style="background-color: #f5f5f5; color: #,//区域边框宽度
borderColor: '#009fe8',//区域边框颜色
areaColor:"#ffefd5",//区域颜色
emphasis: {
borderWidth: .<span style="background-color: #f5f5f5; color: #,
borderColor: '#4b0082',
areaColor:"#ffdead",
{name:'福建', selected:true}//福建为选中状态
myChart.setOption(option);
myChart.on('mouseover', function (params) {
var dataIndex = params.dataI
console.log(params);
三、效果图
四、修改省份标签位置：打开china.js文件，修改"properties":{"cp":[X坐标,Y坐标],...}
阅读(...) 评论()

我要回帖

更多关于 echarts设置图例位置 的文章

 

随机推荐