开发小程序，需求是点击柱状图中的某一条，要弹出一个模态框，然后里面是点击的这条数据里面的数据，web端很好写，但是，小程序中，会有些问题，以柱状图和饼图为例。
1，弹出框获取不到data里面的数据
界面部分
<!-- 图形部分 -->
<view class="chart zoneChart" hidden="{{firstShow}}">
<!-- <view class="provideTitle">资金量/亿</view> -->
<ec-canvas id="zone" canvas-id="zone" ec="{{ ec }}" class="ec-canvas"></ec-canvas>
</view>
</view>
<!-- 弹框 -->
<modal class="content contentModal" hidden="{{hiddenmodal}}" title="" confirm-text=" " cancel-text="重置" bindcancel="cancel" bindconfirm="confirm" no-cancel='true' no-confirm= 'true'>
<view class="chart modalChart">
<!-- <view class="provideTitle">资金量/亿</view> -->
<ec-canvas id="modalChart" canvas-id="modalChart" ec="{{ ec }}" class="ec-canvas"></ec-canvas>
</view>
</modal>函数
因为小程序里面的变量，都是在data里面定义的，而我点击柱状图的时候，参数需要用到data里面的数据。所以函数就不能写到全局了，要写跟data平级，不能写到最外面的function里面，获取不到data里的数据
initzone() {
var that = this
that.barComponent.init((canvas, width, height) => {
// console.log(app3.xdata)
// console.log(app3.yvalue)
// console.log(this)
// console.log(that.app4)
chart= echarts.init(canvas,null,{
width: width,
height: height
})
var option= {
color: ['#3398DB'],
tooltip: {
position: ['10%','10%']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'value',
name: '元',
nameTextStyle:{
color:'#999',
fontSize:16,
padding:[3, 5, 10, 20]
},
nameGap:-30,
data: that.app4.xdata,
splitLine: false,
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#EBEBEB'
}
},
axisLabel: {
interval:0,
textStyle: {
color: '#666', //更改坐标轴文字颜色
},
rotate:45
}
}
],
yAxis: [
{
type: 'category',
axisLine: {
lineStyle: {
color: '#EBEBEB'
}
},
name:'',
nameTextStyle:{
color:'#999',
fontSize:16,
padding:[3, 4, 10, 30]
},
data: that.app4.xdata,
splitLine: false,
axisLabel: {
interval:0,
textStyle: {
color: '#666', //更改坐标轴文字颜色
}
}
}
],
series: [
{
name: '按区域划分',
type: 'bar',
barWidth: '50%',
data: that.app4.yvalue,
itemStyle: {
normal: {
// 渐变色
color: function(params) {
// build a color map as your need.
var colorList = [
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#92D4F1'
}, {
offset: 1,
color: '#3993BA'
}]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#B3F9C8'
}, {
offset: 1,
color: '#75C78D'
}])
];
return colorList[params.dataIndex]
}
}
}
}
]
}
chart.setOption(option);
chart.on('click', function (params) {
})
return chart;
});
}点击事件
chart.on('click', function (params) {
that.hiddenmodal = !that.hiddenmodal
that.firstShow = !that.firstShow
that.$apply()
that.getParames()
var chartRegionDates = that.regionDates
for (let index = 0; index < chartRegionDates.length; index++) {
if(chartRegionDates[index].name == params.name){
that.currentCode = chartRegionDates[index].code
// console.log(that.currentCode)
break;
}
}
// console.log(that.dateSelectYear)
// 判断，如果没有选择归口，调用归口统计的接口；如果选择了归口，调用项目统计接口
if(that.manageCode=='all'){
// 调归口统计的接口
// 调归口统计的接口发请求
wx.request({
url: 'https://test.gongwt.cn:8888/gyrr-agsubsidy-cz-consumer/ags/supervise/tallyGrantByManageType.json',
method: 'POST',
data: {
regionCode: that.currentCode,
year: that.dateSelectYear,
manageTypes:that.manageParamCode
},
header: {
'Content-Type': 'application/x-www-form-urlencoded' // 默认值
},
success(res) {
console.log(res)
// 初始化发放进度图表
var modalResult = res.data.data.xAxis
that.modalData.yvalue = res.data.data.data
that.modalData.xdata = []
that.modalData.managedataArray=[]
that.modalData.xdata = modalResult
for(var i = 0;i<modalResult.length;i++){
var json = {};
for(var j=0;j<that.modalData.yvalue.length;j++){
if(i==j){
json.value = that.modalData.yvalue[j];
json.name = modalResult[i];
that.modalData.managedataArray.push(json);
}
}
}
that.$apply()
that.pieComponent = that.$wxpage.selectComponent('#modalChart');
that.initModal()
}
})
}
})初始化
that.barComponent = that.$wxpage.selectComponent('#zone');
that.initzone()这样的初始化才好使，研究了好久才弄出来的，孺子可教也，，，哈哈哈
2，echarts图中手机端和开发工具里面的字体不一致（太小）
在series的label里面添加一个rich:{}对象，字号就正常了。
label: {
normal: {
show: true,
fontSize: 12,
rich: {}
},
emphasis: {
show: true
}
}但是有个缺点就是：点击文字，没反应。。。。。。，因为要点击饼图里面的某条数据，可能有一条数据占比是99.6%，而有一条是0.03%，占比差距相当大，可能点不着，所以想点击文字显示相关信息，（ps:已经设置了最小的扇形区域范围，是能点掉数据了，但是视觉上体验不是很好。）。有木有大神遇到过这个问题？？？
2万+