206 lines
8.6 KiB
JavaScript
206 lines
8.6 KiB
JavaScript
import * as echarts from '../../ec-canvas/echarts';
|
||
import geoJson from './china.js';
|
||
let App = getApp();
|
||
// 设置数据,可以增加更多的数据参数
|
||
function setOption(chart,scatterData,mapData) {
|
||
const option = {
|
||
layoutCenter: ['50%', '52%'],
|
||
layoutSize: '100%',
|
||
series: [
|
||
{
|
||
type: 'map',
|
||
map: 'china',
|
||
aspectScale: 0.75,
|
||
roam:'scale',
|
||
scaleLimit:{
|
||
min:1,
|
||
max:1.5
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: 'rgba(216,216,215,0.5)',
|
||
borderColor: '#fff',
|
||
borderWidth: 1,
|
||
},
|
||
emphasis: {
|
||
areaColor: null ,
|
||
},
|
||
},
|
||
label:{
|
||
show:true,
|
||
fontSize:8,
|
||
color:'#333'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false,
|
||
color: '#333',
|
||
},
|
||
},
|
||
data: mapData,
|
||
},
|
||
],
|
||
};
|
||
chart.setOption(option);
|
||
}
|
||
Page({
|
||
data: {
|
||
ec: {
|
||
lazyLoad: true,
|
||
},
|
||
scatterData:[],
|
||
mapData:[]
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面初次渲染完成
|
||
*/
|
||
onReady: function () {
|
||
// 获取组件
|
||
this.ecComponent = this.selectComponent('#mychart-dom-area');
|
||
this.initChart();
|
||
},
|
||
// 初始化图表
|
||
initChart() {
|
||
|
||
this.ecComponent.init((canvas, width, height, dpr) => {
|
||
// 获取组件的 canvas、width、height 后的回调函数
|
||
// 在这里初始化图表
|
||
const chart = echarts.init(canvas, null, {
|
||
width: width,
|
||
height: height,
|
||
devicePixelRatio: dpr, // new
|
||
});
|
||
// 注册中国地图数据包
|
||
echarts.registerMap('china', geoJson);
|
||
|
||
// 设置数据
|
||
setOption(chart,this.data.scatterData,this.data.mapData);
|
||
|
||
// 将图表实例绑定到 this 上,可以在其他成员函数(如 dispose)中访问
|
||
this.chart = chart;
|
||
|
||
// 绑定点击事件
|
||
let that = this;
|
||
chart.on('click', function (params) {
|
||
that.handleChartClick(params);
|
||
});
|
||
|
||
// 注意这里一定要返回 chart 实例,否则会影响事件处理等
|
||
return chart;
|
||
});
|
||
},
|
||
|
||
|
||
handleChartClick(params) {
|
||
// 可以通过参数去数据列表中获取完整数据 params.dataIndex
|
||
console.log(params);
|
||
},
|
||
|
||
onLoad: function() {
|
||
// 设置页面标题
|
||
App.setTitle();
|
||
// 设置navbar标题、颜色
|
||
App.setNavigationBar();
|
||
this.getData();
|
||
},
|
||
onShow: function(){
|
||
|
||
},
|
||
getData:function(e){
|
||
let _this = this;
|
||
App._post_form('footchina/getIndexData', {
|
||
user_id: wx.getStorageSync('user_id'),
|
||
}, function(result) {
|
||
var rdata = result.data.data;
|
||
// var province=rdata.province;
|
||
// var provinceAreaColor=rdata.provinceAreaColor;
|
||
var province=[];
|
||
var provinceAreaColor=[];
|
||
province.push({name:'安徽',value:[114.54,29.41]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'安徽',value:[114.54,29.41]});
|
||
province.push({name:'福建',value:[115.50,23.30]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'福建',value:[115.50,23.30]});
|
||
province.push({name:'江苏',value:[116.18,30.45]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'江苏',value:[116.18,30.45]});
|
||
province.push({name:'江西',value:[113.34,24.29]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'江西',value:[113.34,24.29]});
|
||
province.push({name:'山东',value:[114.19,34.22]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'山东',value:[113.34,24.29]});
|
||
province.push({name:'上海',value:[121.472644,31.231706]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'上海',value:[121.472644,31.231706]});
|
||
province.push({name:'台湾',value:[121.520076,25.030724]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'台湾',value:[121.520076,25.030724]});
|
||
province.push({name:'浙江',value:[120.153576,30.287459]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'浙江',value:[120.153576,30.287459]});
|
||
province.push({name:'湖北',value:[112.2363,30.8572]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'湖北',value:[112.2363,30.8572]});
|
||
province.push({name:'湖南',value:[111.5332,27.3779]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'湖南',value:[111.5332,27.3779]});
|
||
province.push({name:'河南',value:[113.0668,33.8818]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'河南',value:[113.0668,33.8818]});
|
||
province.push({name:'辽宁',value:[123.429096,41.796767]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'辽宁',value:[123.429096,41.796767]});
|
||
province.push({name:'黑龙江',value:[126.642464,45.756967]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'黑龙江',value:[126.642464,45.756967]});
|
||
province.push({name:'吉林',value:[125.3245,43.886841]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'吉林',value:[125.3245,43.886841]});
|
||
province.push({name:'北京',value:[116.405285,39.904989]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'北京',value:[116.405285,39.904989]});
|
||
province.push({name:'天津',value:[117.190182,39.125596]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'天津',value:[117.190182,39.125596]});
|
||
province.push({name:'河北',value:[114.502461,38.045474]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'河北',value:[114.502461,38.045474]});
|
||
province.push({name:'山西',value:[112.549248,37.857014]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'山西',value:[112.549248,37.857014]});
|
||
province.push({name:'陕西',value:[108.948024,34.263161]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'陕西',value:[108.948024,34.263161]});
|
||
province.push({name:'内蒙古',value:[111.670801,40.818311]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'内蒙古',value:[111.670801,40.818311]});
|
||
|
||
province.push({name:'宁夏',value:[106.278179,38.46637]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'宁夏',value:[106.278179,38.46637]});
|
||
province.push({name:'广东',value:[113.280637,23.125178]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'广东',value:[113.280637,23.125178]});
|
||
province.push({name:'广西',value:[108.320004,22.82402]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'广西',value:[108.320004,22.82402]});
|
||
province.push({name:'香港',value:[114.173355,22.320048]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'香港',value:[114.173355,22.320048]});
|
||
province.push({name:'澳门',value:[113.54909,22.198951]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'澳门',value:[113.54909,22.198951]});
|
||
province.push({name:'海南',value:[110.33119,20.031971]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'海南',value:[110.33119,20.031971]});
|
||
province.push({name:'甘肃',value:[103.823557,36.058039]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'甘肃',value:[103.823557,36.058039]});
|
||
province.push({name:'青海',value:[101.778916,36.623178]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'青海',value:[101.778916,36.623178]});
|
||
province.push({name:'新疆',value:[87.617733,43.792818]});
|
||
provinceAreaColor.push({itemStyle:{areaColor: "#FAD5A2",opacity: 1},name:'新疆',value:[87.617733,43.792818]});
|
||
_this.setData({
|
||
// scatterData:rdata.province,
|
||
scatterData:province,
|
||
mapData:provinceAreaColor,
|
||
});
|
||
_this.initChart();
|
||
});
|
||
},
|
||
onShareAppMessage: function() {
|
||
return {
|
||
title: "科大工会健步走小程序",
|
||
desc: "",
|
||
path: "/pages/index/index"
|
||
};
|
||
},
|
||
goActivity:function(){
|
||
wx.navigateTo({
|
||
url: "/packageB/index/index"
|
||
});
|
||
},
|
||
goActivityRule:function(){
|
||
wx.navigateTo({
|
||
url: "/packageB/rule/index"
|
||
});
|
||
}
|
||
|
||
});
|