echarts 游客来源

animabear 发布于2019-08-23 18:37 / 2475人阅读

摘要：北京辽宁上海河北浙江广东山西天津吉林陕西丽江丽江设置北京辽宁上海河北浙江广东山西天津吉林陕西初始化

//originLines.js

let locatePoint = [
{

name: "北京",
position: [116.407526, 39.904030]

},
{

name: "辽宁",
position: [123.429440, 41.835441]

},
{

name: "上海",
position: [121.473701, 31.230416]

},
{

name: "河北",
position: [114.468664, 38.037057]

},
{

name: "浙江",
position: [120.152791, 30.267446]

},
{

name: "广东",
position: [113.266530, 23.132191]

},
{

name: "山西",
position: [112.562398, 37.873531]

},
{

name: "天津",
position: [117.200983, 39.084158]

},
{

name: "吉林",
position: [125.325990, 43.896536]

},
{

name: "陕西",
position: [108.954239, 34.265472]

},
{

name: "丽江",
position: [100.233026,26.872108]

},
]

let option = {
color:["#14f7fe"],
geo:{

map:"china"

},
series:[

{
  type:"lines",
  coordinateSystem:"geo",
  effect:{
    period: 6,
    show: true,
    symbolSize: 3,
    trailLength: 0.7,
  },
  lineStyle:{
    normal:{
      color:"#14f2fb",
      curveness: 0.2,
      opacity: 0.6,
      width: 0
    }
  },
  data:[]
},
{
  type:"lines",
  coordinateSystem:"geo",
  effect:{
    period: 6,
    show: true,
    symbolSize: 15,
    trailLength: 0,
    symbol: "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z",
  },
  lineStyle:{
    normal:{
      color:"#14f2fb",
      curveness: 0.2,
      opacity: 0.6,
      width: 1
    }
  },
  data:[]
},
{
  type:"effectScatter",
  coordinateSystem:"geo",
  symbolSize:6,
  label:{
    normal:{
      formatter:"{b}",
      show:true,
      position:"right"
    }
  },
  itemStyle:{
    color:"#14f2fb"
  },
  data:[]
},

]
}

function processData(data) {
let pointSize = 60
let linesData = data.map(item => ({

coords:[
  getPosition(item[0]),
  getPosition(item[1])
],
fromName:item[0],
toName:item[1]

}))
let scatterData = data.map(item => ({

name:item[0],
value:[...getPosition(item[0]),pointSize]

}))
scatterData.push({name:data0,value:...getPosition(data[0),pointSize]})
option.series[0].data = linesData;
option.series[1].data = linesData;
option.series[2].data = scatterData;
}

function getPosition(name) {
return locatePoint.find(item => item.name == name).position
}

function getOption(data) {
let tmpData = data.map(item => [item.name,"丽江"]);
processData(tmpData);
return option;
}

export default getOption

import flyLine from "./echarts/originLines"

//html dom

设置option
vue
data() {

return {
originData:[
    {
      name:"北京",
      value:11703
    },
    {
      name:"辽宁",
      value:11703
    },
    {
      name:"上海",
      value:11703
    },
    {
      name:"河北",
      value:11703
    },
    {
      name:"浙江",
      value:11703
    },
    {
      name:"广东",
      value:11703
    },
    {
      name:"山西",
      value:11703
    },
    {
      name:"天津",
      value:11703
    },
    {
      name:"吉林",
      value:11703
    },
    {
      name:"陕西",
      value:11703
    }
  ],
}

}
//echarts dom 初始化
this.originLines = this.echarts.init(document.getElementById("originLines"),"default");

let option = this.flyLine(this.originData);
this.originLines.setOption(option)

云服务器服务器托管 echart Echarts echarts 图表 echart cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105545.html

echarts 游客来源

摘要：北京辽宁上海河北浙江广东山西天津吉林陕西丽江丽江设置北京辽宁上海河北浙江广东山西天津吉林陕西初始化 showImg(https://segmentfault.com/img/bVbuXLd?w=644&h=429);//originLines.js let locatePoint = [ { name: 北京, position: [116.407526, 39.904030] },...

funnyZhang 2019-08-02 15:31 评论0 收藏0
Apache Superset使用分享

摘要：请原谅我以下所有截图中都是使用的中文，有些地方翻译略显生硬。本来系统是使用的英文，奈何领导要求中文呀。时间字段的表示时间属性必须勾选上一般会时间列默认勾选。可根据来排查问题所在，并且系统为用户提供版的查询工具来操作数据库。Superset简介 Superset是一个受Apache软件基金会支持的处于孵化阶段的企业级数据可视化web项目。具有以下特点：内含丰富的数据图表样式支持多种数据源...

mdluo 2019-05-23 17:34 评论0 收藏0
小程序中echarts+canvas 合成图片保存下载

摘要：再网上参考了一篇文章小程序实现页面转化图片并保存到相册根据这篇文章的内容，修改源码，针对安卓机型写了兼容的配置，如果你的页面只有一个图表，就完全可以成功转换了，如果是多个请修改的源码，方法选择就可以了。最近做的小程序项目在echarts合成图片的时候遇到了一些问题，综合了很多网友的经验，在此分享一下我的经历，如有错误，欢迎指正。 1.在小程序中引入echarts组件请参考 echa...

neu 2019-08-26 10:12 评论0 收藏0
小程序中echarts+canvas 合成图片保存下载

摘要：再网上参考了一篇文章小程序实现页面转化图片并保存到相册根据这篇文章的内容，修改源码，针对安卓机型写了兼容的配置，如果你的页面只有一个图表，就完全可以成功转换了，如果是多个请修改的源码，方法选择就可以了。最近做的小程序项目在echarts合成图片的时候遇到了一些问题，综合了很多网友的经验，在此分享一下我的经历，如有错误，欢迎指正。 1.在小程序中引入echarts组件请参考 echa...

junnplus 2019-08-05 17:39 评论0 收藏0
微信小程序体验(2)：驴妈妈景区门票即买即游

摘要：除此之外，还可以通过微信搜索功能，搜到相关小程序。基于游客的游玩场景和小程序的流量场景，驴妈妈门票预订小程序的二维码将会铺设在景区门口。驴妈妈因为出色的运营能力，被腾讯选为首批小程序内测单位。驴妈妈的技术开发团队在很短的时间内完成了开发任务，并积极参与到张小龙团队的内测问题反馈。驴妈妈认为，移动互联网时代，微信是巨大的流量入口，也是旅游服务的重要平台。微信小程序有两个重要特点，一是小...

NusterCache 2019-08-05 10:38 评论0 收藏0