提交 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,
name: it.city,
value: it.uv,
}
]
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"));
echarts.registerMap('chinas', chinaJson);
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,15 +102,12 @@ export default {
value: 10
},
showEffectOn: "render",
hoverAnimation: false, // 动画
label: {
formatter: "{b}",
position: "",
show: true,
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 12
},
color: '#fff',
fontSize: 12
},
zlevel: 1
},
......@@ -133,25 +125,23 @@ export default {
color: '#FFB932', // 图标颜色
},
lineStyle: {
normal: {
show: true,
width: 1, //尾迹线条宽度
opacity: .8, //尾迹线条透明度
curveness: 0.2, //尾迹线条曲直度
color: new echarts.graphic.LinearGradient(0,1,1,0,
[
{
offset: 1,
color: "#FFB932",
},
{
offset: 0,
color: "#26FFF3",
},
],
),
// color: '#26FFF3', // 飞线颜色
},
show: true,
width: 1, //尾迹线条宽度
opacity: .8, //尾迹线条透明度
curveness: 0.2, //尾迹线条曲直度
color: new echarts.graphic.LinearGradient(0,1,1,0,
[
{
offset: 1,
color: "#FFB932",
},
{
offset: 0,
color: "#26FFF3",
},
],
),
// color: '#26FFF3', // 飞线颜色
},
data: this.convertData(),
},
......@@ -167,8 +157,8 @@ export default {
scale: 6, //波纹圆环最大限制,值越大波纹越大
color: '#0CB5AD',
},
label: {
normal: {
emphasis: {
label: {
show: false,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
......@@ -178,9 +168,6 @@ export default {
},
fontSize: 13,
},
emphasis: {
show: false,
},
},
symbol: 'circle',
symbolSize: function (val) {
......@@ -203,10 +190,8 @@ export default {
},
itemStyle: {
normal: {
show: false,
color: '#0CB5AD',
},
show: false,
color: '#0CB5AD',
},
data: this.optionList,
},
......@@ -222,17 +207,11 @@ export default {
color: '#FFB932',//圆环颜色
},
label: {
normal: {
show: true,
position: 'bottom',
//offset:[5, 0],
color: '#FFB932',
formatter: '{b}',
textStyle: {
color: '#fff',
fontSize: 12,
},
},
color: '#fff',
fontSize: 12,
show: true,
position: 'bottom',
//offset:[5, 0],
// 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
}
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"));
echarts.registerMap('chinas', chinaJson);
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
}
areaColor: '#1E2F56', // 地图颜色
borderColor: '#33547E', // 地图边界颜色
borderWidth: .5
},
scaleLimit:{ //所属组件的z分层,z值小的图形会被z值大的图形覆盖
min:0.8, //最小的缩放值
......@@ -210,15 +210,15 @@ export default {
value: 10
},
showEffectOn: 'render',
hoverAnimation: true,
emphasis: {
scale: true,
},
label: {
formatter: '{b}',
position: 'left',
show: true,
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 13
},
color: '#fff',
fontSize: 13
},
itemStyle: {
color: '#549AD7',
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册