206 lines
8.6 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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