<view style="width: 100%;height: 150px;">
<ec-canvas ec="{{ ecLine }}" id="charts" canvas-id="charts" style="width: 100%;height:150px;"></ec-canvas>
</view>
{
"navigationBarTitleText": "冷链食品防疫",
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark",
"component": true,
"usingComponents": {
"ec-canvas": "../../components/ec-canvas/ec-canvas"
}
}
import * as echarts from '../../components/ec-canvas/echarts';
var chartLine
function getOption(seriesData, title1, title2) {
var colorList = ['#7BB5FF', '#9698FF', '#FFBB73'];
var option = {
title: [{
text: title1,
left: '50%',
top: '40%',
textAlign: 'center',
textStyle: {
color: '#000000',
fontSize: '18',
fontWeight: '800',
color: '#8d8793',
}
},
{
text: title2,
left: '50%',
top: '58%',
textAlign: 'center',
textStyle: {
color: '#999999',
fontSize: '10',
fontWeight: '400',
color: '#8d8793',
}
},
],
tooltip: {
trigger: 'item',
borderColor: 'rgba(255,255,255,.3)',
backgroundColor: 'rgba(13,5,30,.6)',
borderWidth: 1,
padding: 5,
},
grid: {
containLabel: true,
top: 0,
bottom: 0,
left: 0,
right: 0,
},
series: [{
type: 'pie',
z: 4,
center: ['50%', '50%'],
radius: ['65%', '92%'],
clockwise: true,
avoidLabelOverlap: true,
hoverOffset: 15,
hoverAnimation: false, // 取消掉环形图鼠标移上去时自动放大
itemStyle: {
normal: {
color: function(params) {
return colorList[params.dataIndex]
}
}
},
label: {
show: true,
position: 'outside',
// formatter: '{a|{b}：{c}}\n{hr|}',
formatter: function (params) {
if (params) {
let str = params.data.name + '\n {br|}' + params.data.value ;
return str;
}
else {
return "";
}
},
rich: {
hr: {
borderRadius: 3,
width: 3,
height: 3,
padding: [3, 3, 0, -12]
},
a: {
padding: [-30, 15, -20, 15]
}
}
},
labelLine: {
normal: {
length: 8,
lineStyle: {
width: 1
}
}
},
data: seriesData
}]
};
return option;
}
var App = getApp();
Page({
data: {
ecLine: {
onInit: function(canvas, width, height) {
//初始化echarts元素，绑定到全局变量，方便更改数据
chartLine = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chartLine);
//可以先不setOption，等数据加载好后赋值，
//不过那样没setOption前，echats元素是一片空白，体验不好，所有我先set。
var seriesData = []
var title1 = ""
var title2 = ""
var option = getOption(seriesData, title1, title2);
chartLine.setOption(option);
}
},
},
onLoad: function(options) {
},
onShow: function() {
},
//点击流向地
lxdClick() {
var that = this
var title1 = that.data.title1
var title2 = that.data.title2
var list1 = that.data.list1
that.setData({
btnActive: 1
})
chartLine.setOption({
title: [{
text: title1,
},
{
text: title2,
}
],
series: [{
data: list1
}]
});
},
//点击货物类别
hlwzClick() {
var that = this
var title1 = that.data.title1
var title2 = that.data.title2
var list2 = that.data.list2
that.setData({
btnActive: 2
})
chartLine.setOption({
title: [{
text: title1,
},
{
text: title2,
}
],
series: [{
data: list2
}]
});
},
})
