You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
467 lines
14 KiB
467 lines
14 KiB
1 year ago
|
const app = getApp<IAppOption>()
|
||
|
|
const echarts = require('../ec-canvas/echarts.js')
|
||
|
|
|
||
|
|
// pages/story/a.ts
|
||
|
|
Component({
|
||
|
|
/**
|
||
|
|
* 组件的属性列表
|
||
|
|
*/
|
||
|
|
properties: {},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 组件的初始数据
|
||
|
|
*/
|
||
|
|
data: {
|
||
|
|
ec: {
|
||
|
|
lazyLoad: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
attached() {
|
||
|
|
this.waitEchart(async () => {
|
||
|
|
const chart1: any = await this.initChart1()
|
||
|
|
const chart2: any = await this.initChart2()
|
||
|
|
const chart3: any = await this.initChart3()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 组件的方法列表
|
||
|
|
*/
|
||
|
|
methods: {
|
||
|
|
ecDataTrendComponent1: null as any,
|
||
|
|
ecDataTrendComponent2: null as any,
|
||
|
|
ecDataTrendComponent3: null as any,
|
||
|
|
waitEchart(callback) {
|
||
|
|
const time = setInterval(() => {
|
||
|
|
if (this.selectComponent('#chart1')) {
|
||
|
|
console.log(this.selectComponent('#chart1'))
|
||
|
|
clearInterval(time)
|
||
|
|
callback()
|
||
|
|
}
|
||
|
|
}, 30)
|
||
|
|
},
|
||
|
|
initChart1() {
|
||
|
|
return new Promise((reslove) => {
|
||
|
|
this.ecDataTrendComponent1 = this.selectComponent('#chart1')
|
||
|
|
this.ecDataTrendComponent1.init((canvas, width, height, dpr) => {
|
||
|
|
const chart = echarts.init(canvas, null, {
|
||
|
|
width,
|
||
|
|
height,
|
||
|
|
devicePixelRatio: dpr, // new
|
||
|
|
})
|
||
|
|
canvas.setChart(chart)
|
||
|
|
const x: string[] = ['2024-09', '2024-10']
|
||
|
|
const y1: string[] = ['10', '30']
|
||
|
|
const y2: string[] = ['10', '30']
|
||
|
|
const y3: string[] = ['10', '30']
|
||
|
|
const y4: string[] = ['30', '90']
|
||
|
|
|
||
|
|
const option = {
|
||
|
|
legend: {
|
||
|
|
bottom: 0,
|
||
|
|
itemWidth: 8,
|
||
|
|
itemHeight: 8,
|
||
|
|
icon: 'circle',
|
||
|
|
lineStyle: {
|
||
|
|
width: '0',
|
||
|
|
},
|
||
|
|
textStyle: {
|
||
|
|
color: 'rgba(103, 113, 114, 1)',
|
||
|
|
fontSize: '12',
|
||
|
|
},
|
||
|
|
data: ['一级医生', '核心医生', '质控医生'],
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: '10%',
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '30',
|
||
|
|
containLabel: true,
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
axisTick: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
fontSize: 10,
|
||
|
|
color: 'rgba(40, 48, 49, 1)',
|
||
|
|
},
|
||
|
|
data: x,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: 'value',
|
||
|
|
minInterval: 1,
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
fontSize: 10,
|
||
|
|
color: 'rgba(40, 48, 49, 1)',
|
||
|
|
formatter(value) {
|
||
|
|
return Math.abs(value)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '质控医生',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'a',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 10,
|
||
|
|
overflow: 'truncate',
|
||
|
|
width: 30,
|
||
|
|
formatter(params) {
|
||
|
|
return Math.abs(params.value)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
color: 'rgba(0, 180, 197, 1)',
|
||
|
|
data: y3,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '核心医生',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'a',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 10,
|
||
|
|
overflow: 'truncate',
|
||
|
|
width: 30,
|
||
|
|
formatter(params) {
|
||
|
|
return Math.abs(params.value)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
color: 'rgba(84, 226, 180, 1)',
|
||
|
|
data: y2,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '一级医生',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'a',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
color: 'rgba(0, 180, 197, 1)',
|
||
|
|
fontSize: 10,
|
||
|
|
overflow: 'truncate',
|
||
|
|
width: 30,
|
||
|
|
},
|
||
|
|
color: 'rgba(225, 248, 242, 1)',
|
||
|
|
data: y1,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '总数', // 总数显示，生成一个总数的柱状图，将颜色设为透明，
|
||
|
|
type: 'line', // label将位置设备内部底部，造成一个总数显示在
|
||
|
|
stack: '', // 柱状图上方的假象
|
||
|
|
color: 'rgba(0, 0, 0, 0)',
|
||
|
|
data: y4,
|
||
|
|
symbolSize: 0,
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: true,
|
||
|
|
position: 'top',
|
||
|
|
color: 'rgba(133, 133, 133, 1)',
|
||
|
|
fontSize: 10,
|
||
|
|
formatter: '{c}',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
dataZoom: {
|
||
|
|
type: 'inside', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
|
||
|
|
startValue: x.length - 6,
|
||
|
|
endValue: x.length - 1,
|
||
|
|
filterMode: 'none',
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
chart.setOption(option)
|
||
|
|
reslove(chart)
|
||
|
|
return chart
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
initChart2() {
|
||
|
|
return new Promise((reslove) => {
|
||
|
|
this.ecDataTrendComponent2 = this.selectComponent('#chart2')
|
||
|
|
this.ecDataTrendComponent2.init((canvas, width, height, dpr) => {
|
||
|
|
const chart = echarts.init(canvas, null, {
|
||
|
|
width,
|
||
|
|
height,
|
||
|
|
devicePixelRatio: dpr, // new
|
||
|
|
})
|
||
|
|
canvas.setChart(chart)
|
||
|
|
const x: string[] = ['2024-09', '2024-10']
|
||
|
|
const y1: string[] = ['10', '30']
|
||
|
|
const y2: string[] = ['10', '30']
|
||
|
|
const y3: string[] = ['20', '60']
|
||
|
|
|
||
|
|
const option = {
|
||
|
|
legend: {
|
||
|
|
bottom: 0,
|
||
|
|
itemWidth: 8,
|
||
|
|
itemHeight: 8,
|
||
|
|
icon: 'circle',
|
||
|
|
lineStyle: {
|
||
|
|
width: '0',
|
||
|
|
},
|
||
|
|
textStyle: {
|
||
|
|
color: 'rgba(103, 113, 114, 1)',
|
||
|
|
fontSize: '12',
|
||
|
|
},
|
||
|
|
data: ['一级医生提交', '核心医生提交'],
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: '10%',
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '30',
|
||
|
|
containLabel: true,
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
axisTick: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
fontSize: 10,
|
||
|
|
color: 'rgba(40, 48, 49, 1)',
|
||
|
|
},
|
||
|
|
data: x,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: 'value',
|
||
|
|
minInterval: 1,
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
fontSize: 10,
|
||
|
|
color: 'rgba(40, 48, 49, 1)',
|
||
|
|
formatter(value) {
|
||
|
|
return Math.abs(value)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '核心医生提交',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'a',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 10,
|
||
|
|
overflow: 'truncate',
|
||
|
|
width: 30,
|
||
|
|
formatter(params) {
|
||
|
|
return Math.abs(params.value)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
color: 'rgba(84, 226, 180, 1)',
|
||
|
|
data: y2,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '一级医生提交',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'a',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
color: 'rgba(0, 180, 197, 1)',
|
||
|
|
fontSize: 10,
|
||
|
|
overflow: 'truncate',
|
||
|
|
width: 30,
|
||
|
|
},
|
||
|
|
color: 'rgba(225, 248, 242, 1)',
|
||
|
|
data: y1,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '总数', // 总数显示，生成一个总数的柱状图，将颜色设为透明，
|
||
|
|
type: 'line', // label将位置设备内部底部，造成一个总数显示在
|
||
|
|
stack: '', // 柱状图上方的假象
|
||
|
|
color: 'rgba(0, 0, 0, 0)',
|
||
|
|
data: y3,
|
||
|
|
symbolSize: 0,
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: true,
|
||
|
|
position: 'top',
|
||
|
|
color: 'rgba(133, 133, 133, 1)',
|
||
|
|
fontSize: 10,
|
||
|
|
formatter: '{c}',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
dataZoom: {
|
||
|
|
type: 'inside', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
|
||
|
|
startValue: x.length - 6,
|
||
|
|
endValue: x.length - 1,
|
||
|
|
filterMode: 'none',
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
chart.setOption(option)
|
||
|
|
reslove(chart)
|
||
|
|
return chart
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
initChart3() {
|
||
|
|
return new Promise((reslove) => {
|
||
|
|
this.ecDataTrendComponent3 = this.selectComponent('#chart3')
|
||
|
|
this.ecDataTrendComponent3.init((canvas, width, height, dpr) => {
|
||
|
|
const chart = echarts.init(canvas, null, {
|
||
|
|
width,
|
||
|
|
height,
|
||
|
|
devicePixelRatio: dpr, // new
|
||
|
|
})
|
||
|
|
canvas.setChart(chart)
|
||
|
|
const x: string[] = ['2024-09', '2024-10']
|
||
|
|
const y1: string[] = ['10', '30']
|
||
|
|
const y2: string[] = ['10', '30']
|
||
|
|
const y3: string[] = ['20', '60']
|
||
|
|
|
||
|
|
const option = {
|
||
|
|
legend: {
|
||
|
|
bottom: 0,
|
||
|
|
itemWidth: 8,
|
||
|
|
itemHeight: 8,
|
||
|
|
icon: 'circle',
|
||
|
|
lineStyle: {
|
||
|
|
width: '0',
|
||
|
|
},
|
||
|
|
textStyle: {
|
||
|
|
color: 'rgba(103, 113, 114, 1)',
|
||
|
|
fontSize: '12',
|
||
|
|
},
|
||
|
|
data: ['一级医生提交', '核心医生提交'],
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top: '10%',
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '30',
|
||
|
|
containLabel: true,
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
axisTick: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
fontSize: 10,
|
||
|
|
color: 'rgba(40, 48, 49, 1)',
|
||
|
|
},
|
||
|
|
data: x,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: 'value',
|
||
|
|
minInterval: 1,
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
fontSize: 10,
|
||
|
|
color: 'rgba(40, 48, 49, 1)',
|
||
|
|
formatter(value) {
|
||
|
|
return Math.abs(value)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '核心医生提交',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'a',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 10,
|
||
|
|
overflow: 'truncate',
|
||
|
|
width: 30,
|
||
|
|
formatter(params) {
|
||
|
|
return Math.abs(params.value)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
color: 'rgba(84, 226, 180, 1)',
|
||
|
|
data: y2,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '一级医生提交',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'a',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
color: 'rgba(0, 180, 197, 1)',
|
||
|
|
fontSize: 10,
|
||
|
|
overflow: 'truncate',
|
||
|
|
width: 30,
|
||
|
|
},
|
||
|
|
color: 'rgba(225, 248, 242, 1)',
|
||
|
|
data: y1,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '总数', // 总数显示，生成一个总数的柱状图，将颜色设为透明，
|
||
|
|
type: 'line', // label将位置设备内部底部，造成一个总数显示在
|
||
|
|
stack: '', // 柱状图上方的假象
|
||
|
|
color: 'rgba(0, 0, 0, 0)',
|
||
|
|
data: y3,
|
||
|
|
symbolSize: 0,
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
show: true,
|
||
|
|
position: 'top',
|
||
|
|
color: 'rgba(133, 133, 133, 1)',
|
||
|
|
fontSize: 10,
|
||
|
|
formatter: '{c}',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
dataZoom: {
|
||
|
|
type: 'inside', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
|
||
|
|
startValue: x.length - 6,
|
||
|
|
endValue: x.length - 1,
|
||
|
|
filterMode: 'none',
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
chart.setOption(option)
|
||
|
|
reslove(chart)
|
||
|
|
return chart
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handleRankDetail() {
|
||
|
|
wx.navigateTo({
|
||
|
|
url: '/module1/pages/doctorRankList/index',
|
||
|
|
})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
})
|