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