提交 ce66096b 编写于 作者: ylwdev's avatar ylwdev 💻

Merge branch 'master' into 'master'

Fixed recreate echart instance and Update options

See merge request csdn/csdn-datav!9
...@@ -63,43 +63,38 @@ export default { ...@@ -63,43 +63,38 @@ export default {
}, },
}, },
methods: { methods: {
convertData(data) { convertData() {
var res = [] var res = []
if (this.optionList.length > 0) { if (this.optionList.length > 0) {
const [lng1, lat1] = this.cityObj.gps;
res = this.optionList.map(it => { res = this.optionList.map(it => {
return [ const [lng2, lat2] = it.value;
{ return {
coord: this.cityObj.gps, name: it.city,
}, value: it.uv,
{ coords: [[lng1, lat1], [lng2, lat2]]
coord: it.value, }
name: it.city,
value: it.uv,
}
]
}) })
} }
return res return res
}, },
setEchartOption() { setEchartOption() {
this.myEchart = echarts.init(document.getElementById("china_map")); if (!this.myEchart) {
echarts.registerMap('chinas', chinaJson); echarts.registerMap('chinas', chinaJson);
this.myEchart = echarts.init(document.getElementById("china_map"));
}
var series = [ var series = [
{ {
type: 'scatter', //样试 type: 'scatter', //样试
coordinateSystem: 'geo', //该系列使用的坐标系 coordinateSystem: 'geo', //该系列使用的坐标系
data: this.cityData, data: this.cityData,
label: {
formatter: "{b}",
position: "",
show: true,
},
//标记的大小,可以设置数组或者函数返回值的形式 //标记的大小,可以设置数组或者函数返回值的形式
symbolSize: function (val) { symbolSize: function () {
return 0; return 0;
}, },
hoverAnimation: false, //鼠标移入放大圆 emphasis: {
scale: false,
},
tooltip: { tooltip: {
show: false show: false
}, },
...@@ -107,15 +102,12 @@ export default { ...@@ -107,15 +102,12 @@ export default {
value: 10 value: 10
}, },
showEffectOn: "render", showEffectOn: "render",
hoverAnimation: false, // 动画
label: { label: {
formatter: "{b}", formatter: "{b}",
position: "", position: "",
show: true, show: true,
textStyle: { //图例文字的样式 color: '#fff',
color: '#fff', fontSize: 12
fontSize: 12
},
}, },
zlevel: 1 zlevel: 1
}, },
...@@ -133,25 +125,23 @@ export default { ...@@ -133,25 +125,23 @@ export default {
color: '#FFB932', // 图标颜色 color: '#FFB932', // 图标颜色
}, },
lineStyle: { lineStyle: {
normal: { show: true,
show: true, width: 1, //尾迹线条宽度
width: 1, //尾迹线条宽度 opacity: .8, //尾迹线条透明度
opacity: .8, //尾迹线条透明度 curveness: 0.2, //尾迹线条曲直度
curveness: 0.2, //尾迹线条曲直度 color: new echarts.graphic.LinearGradient(0,1,1,0,
color: new echarts.graphic.LinearGradient(0,1,1,0, [
[ {
{ offset: 1,
offset: 1, color: "#FFB932",
color: "#FFB932", },
}, {
{ offset: 0,
offset: 0, color: "#26FFF3",
color: "#26FFF3", },
}, ],
], ),
), // color: '#26FFF3', // 飞线颜色
// color: '#26FFF3', // 飞线颜色
},
}, },
data: this.convertData(), data: this.convertData(),
}, },
...@@ -167,8 +157,8 @@ export default { ...@@ -167,8 +157,8 @@ export default {
scale: 6, //波纹圆环最大限制,值越大波纹越大 scale: 6, //波纹圆环最大限制,值越大波纹越大
color: '#0CB5AD', color: '#0CB5AD',
}, },
label: { emphasis: {
normal: { label: {
show: false, show: false,
position: 'right', //显示位置 position: 'right', //显示位置
offset: [5, 0], //偏移设置 offset: [5, 0], //偏移设置
...@@ -178,9 +168,6 @@ export default { ...@@ -178,9 +168,6 @@ export default {
}, },
fontSize: 13, fontSize: 13,
}, },
emphasis: {
show: false,
},
}, },
symbol: 'circle', symbol: 'circle',
symbolSize: function (val) { symbolSize: function (val) {
...@@ -203,10 +190,8 @@ export default { ...@@ -203,10 +190,8 @@ export default {
}, },
itemStyle: { itemStyle: {
normal: { show: false,
show: false, color: '#0CB5AD',
color: '#0CB5AD',
},
}, },
data: this.optionList, data: this.optionList,
}, },
...@@ -222,17 +207,11 @@ export default { ...@@ -222,17 +207,11 @@ export default {
color: '#FFB932',//圆环颜色 color: '#FFB932',//圆环颜色
}, },
label: { label: {
normal: { color: '#fff',
show: true, fontSize: 12,
position: 'bottom', show: true,
//offset:[5, 0], position: 'bottom',
color: '#FFB932', //offset:[5, 0],
formatter: '{b}',
textStyle: {
color: '#fff',
fontSize: 12,
},
},
// emphasis: { // emphasis: {
// show: false, // show: false,
// color: '#FFB932', // color: '#FFB932',
...@@ -260,11 +239,9 @@ export default { ...@@ -260,11 +239,9 @@ export default {
center: this.type === 'wap' ?this.cityObj.gps||[116.40529, 39.904987]:[120.40529, 35.904987], center: this.type === 'wap' ?this.cityObj.gps||[116.40529, 39.904987]:[120.40529, 35.904987],
silent: 'move', // 拖拽以及缩放 silent: 'move', // 拖拽以及缩放
itemStyle: { itemStyle: {
normal: { areaColor: '#1E2F56', // 地图颜色
areaColor: '#1E2F56', // 地图颜色 borderColor: '#33547E', // 地图边界颜色
borderColor: '#33547E', // 地图边界颜色 borderWidth: .5
borderWidth: .5
}
}, },
}, },
scaleLimit:{ //所属组件的z分层,z值小的图形会被z值大的图形覆盖 scaleLimit:{ //所属组件的z分层,z值小的图形会被z值大的图形覆盖
......
...@@ -114,8 +114,10 @@ export default { ...@@ -114,8 +114,10 @@ export default {
return res; return res;
}, },
setEchartOption() { setEchartOption() {
this.myEchart = echarts.init(document.getElementById("china_map")); if (!this.myEchart) {
echarts.registerMap('chinas', chinaJson); echarts.registerMap('chinas', chinaJson);
this.myEchart = echarts.init(document.getElementById("china_map"));
}
var that = this var that = this
var option = { var option = {
geo: { geo: {
...@@ -125,11 +127,9 @@ export default { ...@@ -125,11 +127,9 @@ export default {
center: this.type === 'wap'?[104.40529, 24.904987]:[120.40529, 35.904987], // 地图中心点 center: this.type === 'wap'?[104.40529, 24.904987]:[120.40529, 35.904987], // 地图中心点
silent: 'move', // 拖拽以及缩放 silent: 'move', // 拖拽以及缩放
itemStyle: { itemStyle: {
normal: { areaColor: '#1E2F56', // 地图颜色
areaColor: '#1E2F56', // 地图颜色 borderColor: '#33547E', // 地图边界颜色
borderColor: '#33547E', // 地图边界颜色 borderWidth: .5
borderWidth: .5
}
}, },
scaleLimit:{ //所属组件的z分层,z值小的图形会被z值大的图形覆盖 scaleLimit:{ //所属组件的z分层,z值小的图形会被z值大的图形覆盖
min:0.8, //最小的缩放值 min:0.8, //最小的缩放值
...@@ -210,15 +210,15 @@ export default { ...@@ -210,15 +210,15 @@ export default {
value: 10 value: 10
}, },
showEffectOn: 'render', showEffectOn: 'render',
hoverAnimation: true, emphasis: {
scale: true,
},
label: { label: {
formatter: '{b}', formatter: '{b}',
position: 'left', position: 'left',
show: true, show: true,
textStyle: { //图例文字的样式 color: '#fff',
color: '#fff', fontSize: 13
fontSize: 13
},
}, },
itemStyle: { itemStyle: {
color: '#549AD7', color: '#549AD7',
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册