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"
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|