import echarts from '../../../ec-canvas/echarts'
const app = getApp();
var recipeChart = null; //全局变量 存储动态查询的数据
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
color: ["#36648b", "#2eaa8e", "#ffa500"],
title: {
text: '食物成分分析',
left: 'center',
textStyle: {
fontWeight: 'bold',
},
subtext: '总热量 ' + recipeChart.calorie + ' 千卡'
},
tooltip: {
trigger: 'item',
formatter: "{a}\n{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: ['碳水化合物', '脂肪', '蛋白质'],
textStyle: {
fontSize: '12',
}
},
series: [
{
name: '主要成分',
type: 'pie',
radius: '50%',
center: ['50%', '60%'],
label: {
normal: {
show: true,
position: 'outside',
formatter: '{b}',
fontSize: 13
},
emphasis: {
show: true,
textStyle: {
fontSize: '13'
}
}
},
data: [
{ value: recipeChart.carbohydrate, name: "碳水化合物" },
{ value: recipeChart.fat, name: "脂肪" },
{ value: recipeChart.protein, name: "蛋白质" }
]
}
]
}
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initChart
}
},
getMyData() {
wx.request({
url: urlBase + 'url',
method: 'POST',
data: {
repId: rid
},
success(res) {
// console.log(res.data);
recipeChart = res.data;
}
});
}
6.7 – 再次使用的时候发现无论如何都不渲染 ,跑起来显示都是空白,对比了很久才找到问题。。在此记录一下。
如果发现wxml渲染不了echarts (js写正确的前提下)
- 需要在wxml中添加样式
<view class="margin-top-lg echart-position">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ec}}"></ec-canvas>
</view>
.echart-position {
position:relative;
height: 280px;
overflow:hidden;
}
2.需要在json文件中引入echarts
{
"usingComponents": {
"ec-canvas": "../../../ec-canvas/ec-canvas"
}
}