代码提交
|
@ -0,0 +1,198 @@
|
|||
<template>
|
||||
<view style="width:100%; height:150rpx">
|
||||
<l-echart ref="chartRef"></l-echart>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
||||
export default {
|
||||
name: "bar",
|
||||
props: {
|
||||
apiData: {
|
||||
type: Object, // 定义 props 类型
|
||||
default: null // 默认值
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听 message 的变化
|
||||
apiData(val) {
|
||||
// console.log('父组件传递的值发生变化:', val);
|
||||
this.init(val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async init(data) {
|
||||
let option = {
|
||||
title: {
|
||||
show: false,
|
||||
text: 'SOC准确度',
|
||||
textStyle: {
|
||||
color: '#FFFFFF'
|
||||
},
|
||||
left: '300px',
|
||||
top: '300'
|
||||
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
formatter: "{b} <br> {c}%"
|
||||
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
icon: "circle",
|
||||
bottom: '43%',
|
||||
left: '20%',
|
||||
itemWidth: 7,
|
||||
itemHeight: 7,
|
||||
itemGap: 40,
|
||||
textStyle: {
|
||||
color: '#89A7AF',
|
||||
},
|
||||
data: [{
|
||||
name: 'SOC准确度'
|
||||
},
|
||||
// {
|
||||
// name: '危化品'
|
||||
// },
|
||||
]
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
position: 'right', // 将Y轴标签设置到最右边
|
||||
offset: -3,
|
||||
type: 'category',
|
||||
data: ['SOC'],
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: 'rgba(136, 169, 205, 1)',
|
||||
}
|
||||
}
|
||||
|
||||
}],
|
||||
series: [{
|
||||
name: 'SOC准确度',
|
||||
type: 'bar',
|
||||
barWidth: 16,
|
||||
label: {
|
||||
normal: {
|
||||
borderWidth: 10,
|
||||
distance: 20,
|
||||
align: 'center',
|
||||
verticalAlign: 'middle',
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c}%',
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#55ffff'
|
||||
},
|
||||
data: [{
|
||||
value: data.socAccuracy,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: 'bar',
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#55ffff' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#55ffff' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false, // 缺省为 false
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}]
|
||||
},
|
||||
// {
|
||||
// name: '危化品',
|
||||
// type: 'bar',
|
||||
// barWidth: 16,
|
||||
// stack: '危货种类占比',
|
||||
// itemStyle: {
|
||||
// color: '#00ff7f'
|
||||
// },
|
||||
// label: {
|
||||
// normal: {
|
||||
// borderWidth: 10,
|
||||
// distance: 20,
|
||||
// align: 'center',
|
||||
// verticalAlign: 'middle',
|
||||
// // borderRadius: 1,
|
||||
// // borderColor: '#00ff7f',
|
||||
// // backgroundColor: '#00ff7f',
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// formatter: '90%',
|
||||
// color: '#fff'
|
||||
// }
|
||||
// },
|
||||
// data: [{
|
||||
// value: 30,
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: {
|
||||
// type: 'bar',
|
||||
// colorStops: [{
|
||||
// offset: 0,
|
||||
// color: '#00ff7f' // 0% 处的颜色
|
||||
// }, {
|
||||
// offset: 1,
|
||||
// color: '#00ff7f' // 100% 处的颜色
|
||||
// }],
|
||||
// globalCoord: false, // 缺省为 false
|
||||
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }]
|
||||
// },
|
||||
]
|
||||
}
|
||||
// chart 图表实例不能存在data里
|
||||
const chart = await this.$refs.chartRef.init(echarts);
|
||||
chart.setOption(option)
|
||||
// 监听窗口大小改变事件,并调用resize方法
|
||||
window.onresize = function() {
|
||||
myChart.resize();
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
</style>
|
|
@ -0,0 +1,188 @@
|
|||
<template>
|
||||
<view style="width:55%; height:60%">
|
||||
<l-echart ref="chartRef"></l-echart>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
||||
export default {
|
||||
name: "circular",
|
||||
props: {
|
||||
apiData: {
|
||||
type: Object, // 定义 props 类型
|
||||
default: null // 默认值
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
watch: {
|
||||
// 监听 message 的变化
|
||||
apiData(val) {
|
||||
// console.log('父组件传递的值发生变化:', val);
|
||||
this.init(val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async init(data) {
|
||||
var option = {
|
||||
xAxis: {
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
// 内圆
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["0", "55%"],
|
||||
center: ["50%", "50%"],
|
||||
z: 4,
|
||||
hoverAnimation: false,
|
||||
data: [{
|
||||
name: "",
|
||||
value: 90,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// borderColor:'#28B4FF',
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||
offset: 0,
|
||||
color: "rgba(0,0,0,0.1)",
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(0,0,0,0.1)",
|
||||
},
|
||||
{
|
||||
offset: 0.65,
|
||||
color: "rgba(0,0,0,0.1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#28B4FF",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
rich: {
|
||||
a: {
|
||||
color: "#994D01",
|
||||
align: "center",
|
||||
fontSize: 30,
|
||||
padding: [0, 0, 56, 0],
|
||||
fontWeight: "bold",
|
||||
},
|
||||
b: {
|
||||
color: "#AF6E2F",
|
||||
align: "center",
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
// formatter: function(params) {
|
||||
// return (
|
||||
// "{a|" + params.value + "}\n\n" + "{b|" +
|
||||
// "全部领取" + "}"
|
||||
// );
|
||||
// },
|
||||
position: "center",
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
}, ],
|
||||
},
|
||||
//进度图
|
||||
{
|
||||
type: "gauge",
|
||||
radius: 70,
|
||||
detail: {
|
||||
formatter: "{value}分",
|
||||
show: true,
|
||||
offsetCenter: [0, 0],
|
||||
fontSize: 25,
|
||||
color:'rgb(49, 190, 255)',
|
||||
},
|
||||
data: [{
|
||||
value: data.score,
|
||||
}],
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 20,
|
||||
color: [
|
||||
[1, 'rgb(12,54,77)']
|
||||
]
|
||||
}
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
width: 20,
|
||||
itemStyle: {
|
||||
color: {
|
||||
// type: 'linear',
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#28B4FF' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#55ffff' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
],
|
||||
};
|
||||
// chart 图表实例不能存在data里
|
||||
const chart = await this.$refs.chartRef.init(echarts);
|
||||
chart.setOption(option)
|
||||
// 监听窗口大小改变事件,并调用resize方法
|
||||
window.onresize = function() {
|
||||
myChart.resize();
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
</style>
|
|
@ -0,0 +1,250 @@
|
|||
<template>
|
||||
<view style="width:100%; height:450rpx">
|
||||
<l-echart ref="chartRef" :id="id"></l-echart>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
||||
export default {
|
||||
name: "lineChart",
|
||||
props: {
|
||||
apiData: {
|
||||
type: Object, // 定义 props 类型
|
||||
default: null // 默认值
|
||||
},
|
||||
lineType: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听 message 的变化
|
||||
apiData(val) {
|
||||
// console.log('父组件传递的值发生变化:', val);
|
||||
this.init(val);
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
async init(data) {
|
||||
let XData
|
||||
let valueData
|
||||
let unitMap = {
|
||||
yName: '',
|
||||
name1: '',
|
||||
name2: ''
|
||||
}
|
||||
if (this.lineType == '电压') {
|
||||
const formattedData = data.voltTime.map(dateStr =>
|
||||
dateStr.replace(/\s/, '\n')
|
||||
);
|
||||
XData = formattedData
|
||||
valueData = {
|
||||
data1: data.voltMesValue,
|
||||
data2: data.voltReqValue,
|
||||
};
|
||||
unitMap.yName = '单位:V'
|
||||
unitMap.name1 = '需求电压'
|
||||
unitMap.name2 = '充电电压'
|
||||
} else if (this.lineType == '电流') {
|
||||
const formattedData = data.currentTime.map(dateStr =>
|
||||
dateStr.replace(/\s/, '\n')
|
||||
);
|
||||
XData = formattedData
|
||||
valueData = {
|
||||
data1: data.currentMesValue,
|
||||
data2: data.currentReqValue,
|
||||
};
|
||||
unitMap.yName = '单位:A'
|
||||
unitMap.name1 = '需求电流'
|
||||
unitMap.name2 = '充电电流'
|
||||
} else if (this.lineType == 'BMS') {
|
||||
const formattedData = data.bmsAccuracyTime.map(dateStr =>
|
||||
dateStr.replace(/\s/, '\n')
|
||||
);
|
||||
XData = formattedData
|
||||
valueData = {
|
||||
data1: data.bmsCurrentAccuracyValue,
|
||||
data2: data.bmsVoltAccuracyValue,
|
||||
};
|
||||
unitMap.yName = '单位:%'
|
||||
unitMap.name1 = 'BMS电流精度'
|
||||
unitMap.name2 = 'BMS电压精度'
|
||||
}
|
||||
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
x: "right",
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: "1%",
|
||||
right: "3%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
// name: "充电时间",
|
||||
// nameLocation: 'end',
|
||||
// nameTextStyle: {
|
||||
// color: 'rgb(127,127,127)', // 名称颜色
|
||||
// fontSize: 9, // 名称字体大小
|
||||
// fontWeight: 'bold' // 名称字体加粗
|
||||
// },
|
||||
type: "category",
|
||||
data: XData,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#88A9CD",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#88A9CD",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: [{
|
||||
name: unitMap.yName,
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#88A9CD",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#88A9CD",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#88A9CD",
|
||||
},
|
||||
},
|
||||
}, ],
|
||||
series: [{
|
||||
name: unitMap.name1,
|
||||
type: "line",
|
||||
data: valueData.data1,
|
||||
symbolSize: 2, //标记的大小
|
||||
symbol: "circle",
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
||||
offset: 0,
|
||||
color: "#28B4FF",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#3CFDFF",
|
||||
},
|
||||
]),
|
||||
shadowColor: "rgba(158,135,255, 0.3)",
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetY: 20,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#28B4FF",
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(108,80,243,0.3)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(108,80,243,0)'
|
||||
}
|
||||
], false),
|
||||
shadowColor: '#28B4FF',
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: unitMap.name2,
|
||||
type: "line",
|
||||
data: valueData.data2,
|
||||
symbolSize: 2, //标记的大小
|
||||
symbol: "circle",
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
||||
offset: 0,
|
||||
color: "#00FFA6",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00A693",
|
||||
},
|
||||
]),
|
||||
shadowColor: "rgba(158,135,255, 0.3)",
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetY: 20,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#00FFA6",
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 255, 166, 0.3)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0, 255, 166, 0)'
|
||||
}
|
||||
], false),
|
||||
shadowColor: '#28B4FF',
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
// chart 图表实例不能存在data里
|
||||
const chart = await this.$refs.chartRef.init(echarts);
|
||||
chart.setOption(option)
|
||||
// 监听窗口大小改变事件,并调用resize方法
|
||||
window.onresize = function() {
|
||||
myChart.resize();
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
</style>
|
|
@ -0,0 +1,261 @@
|
|||
<template>
|
||||
<view style="width:100%; height:450rpx">
|
||||
<l-echart ref="chartRef" :id="id"></l-echart>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
||||
export default {
|
||||
name: "lineOne",
|
||||
props: {
|
||||
apiData: {
|
||||
type: Object, // 定义 props 类型
|
||||
default: null // 默认值
|
||||
},
|
||||
lineType: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听 message 的变化
|
||||
apiData(val) {
|
||||
// console.log('父组件传递的值发生变化:', val);
|
||||
this.init(val);
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
async init(data) {
|
||||
let XData
|
||||
let valueData
|
||||
let unitMap = {
|
||||
yName: '',
|
||||
name1: '',
|
||||
}
|
||||
if (this.lineType == '充电温差') {
|
||||
const formattedData = data.tempDiffTime.map(dateStr =>
|
||||
dateStr.replace(/\s/, '\n')
|
||||
);
|
||||
XData = formattedData
|
||||
valueData = {
|
||||
data1: data.tempDiffValue,
|
||||
};
|
||||
unitMap.yName = '温度:℃'
|
||||
unitMap.name1 = '充电温差'
|
||||
} else if(this.lineType == '最高温度历史'){
|
||||
const formattedData = data.hstTempMaxTime.map(dateStr =>
|
||||
dateStr.replace(/\s/, '\n')
|
||||
);
|
||||
XData = formattedData
|
||||
valueData = {
|
||||
data1: data.hstTempMaxValue,
|
||||
};
|
||||
unitMap.yName = '温度:℃'
|
||||
unitMap.name1 = '最高温度历史'
|
||||
}else if(this.lineType == '温差历史'){
|
||||
const formattedData = data.hstTempDiffTime.map(dateStr =>
|
||||
dateStr.replace(/\s/, '\n')
|
||||
);
|
||||
XData = formattedData
|
||||
valueData = {
|
||||
data1: data.hstTempDiffValue,
|
||||
};
|
||||
unitMap.yName = '温度:℃'
|
||||
unitMap.name1 = '温差历史'
|
||||
}else if(this.lineType == '最高单体电压历史'){
|
||||
const formattedData = data.hstVoltMaxTime.map(dateStr =>
|
||||
dateStr.replace(/\s/, '\n')
|
||||
);
|
||||
XData = formattedData
|
||||
valueData = {
|
||||
data1: data.hstVoltMaxValue,
|
||||
};
|
||||
unitMap.yName = 'V'
|
||||
unitMap.name1 = '最高单体电压历史'
|
||||
}else if(this.lineType == '压差历史'){
|
||||
const formattedData = data.hstVoltDiffTime.map(dateStr =>
|
||||
dateStr.replace(/\s/, '\n')
|
||||
);
|
||||
XData = formattedData
|
||||
valueData = {
|
||||
data1: data.hstVoltDiffValue,
|
||||
};
|
||||
unitMap.yName = 'V'
|
||||
unitMap.name1 = '压差历史'
|
||||
}else if(this.lineType == '温度一致性历史'){
|
||||
const formattedData = data.hstTempConsistencyTime.map(dateStr =>
|
||||
dateStr.replace(/\s/, '\n')
|
||||
);
|
||||
XData = formattedData
|
||||
valueData = {
|
||||
data1: data.hstTempConsistencyValue,
|
||||
};
|
||||
unitMap.yName = '分'
|
||||
unitMap.name1 = '温度一致性历史'
|
||||
}else if(this.lineType == '开路电压一致性历史'){
|
||||
const formattedData = data.hstVoltConsistencyTime.map(dateStr =>
|
||||
dateStr.replace(/\s/, '\n')
|
||||
);
|
||||
XData = formattedData
|
||||
valueData = {
|
||||
data1: data.hstVoltConsistencyValue,
|
||||
};
|
||||
unitMap.yName = '分'
|
||||
unitMap.name1 = '开路电压一致性历史'
|
||||
}else if(this.lineType == '健康度历史'){
|
||||
const formattedData = data.hstSohTime.map(dateStr =>
|
||||
dateStr.replace(/\s/, '\n')
|
||||
);
|
||||
XData = formattedData
|
||||
valueData = {
|
||||
data1: data.hstSohValue,
|
||||
};
|
||||
unitMap.yName = '%'
|
||||
unitMap.name1 = '健康度历史'
|
||||
}
|
||||
else if (this.lineType == '充电功率') {
|
||||
const formattedData = data.powerTime.map(dateStr =>
|
||||
dateStr.replace(/\s/, '\n')
|
||||
);
|
||||
XData = formattedData
|
||||
valueData = {
|
||||
data1: data.powerValue,
|
||||
};
|
||||
unitMap.yName = '单位:kW'
|
||||
unitMap.name1 = '充电功率'
|
||||
}
|
||||
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
x: "right",
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: "1%",
|
||||
right: "3%",
|
||||
bottom: this.lineType == '充电功率' ? "10%" : "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
// name: "充电时间",
|
||||
// nameLocation: 'end',
|
||||
// nameTextStyle: {
|
||||
// color: 'rgb(127,127,127)', // 名称颜色
|
||||
// fontSize: 9, // 名称字体大小
|
||||
// fontWeight: 'bold' // 名称字体加粗
|
||||
// },
|
||||
type: "category",
|
||||
data: XData,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#88A9CD",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#88A9CD",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: [{
|
||||
name: unitMap.yName,
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#88A9CD",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#88A9CD",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#88A9CD",
|
||||
},
|
||||
},
|
||||
}, ],
|
||||
series: [{
|
||||
name: unitMap.name1,
|
||||
type: "line",
|
||||
data: valueData.data1,
|
||||
symbolSize: 2, //标记的大小
|
||||
symbol: "circle",
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
||||
offset: 0,
|
||||
color: "#28B4FF",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#3CFDFF",
|
||||
},
|
||||
]),
|
||||
shadowColor: "rgba(158,135,255, 0.3)",
|
||||
// shadowBlur: 10,
|
||||
// shadowOffsetY: 20,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#28B4FF",
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(108,80,243,0.3)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(108,80,243,0)'
|
||||
}
|
||||
], false),
|
||||
shadowColor: '#28B4FF',
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
}, ],
|
||||
};
|
||||
// chart 图表实例不能存在data里
|
||||
const chart = await this.$refs.chartRef.init(echarts);
|
||||
chart.setOption(option)
|
||||
// 监听窗口大小改变事件,并调用resize方法
|
||||
window.onresize = function() {
|
||||
myChart.resize();
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
</style>
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<view style="width:100%; height:450rpx">
|
||||
<l-echart ref="chartRef"></l-echart>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
||||
export default {
|
||||
name: "radar",
|
||||
props: {
|
||||
apiData: {
|
||||
type: Object, // 定义 props 类型
|
||||
default: null // 默认值
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听 message 的变化
|
||||
apiData(newVal, oldVal) {
|
||||
// console.log('父组件传递的值发生变化:', newVal);
|
||||
this.init(newVal);
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
methods: {
|
||||
async init(data) {
|
||||
var color = "#189cbb";
|
||||
var scale = 1;
|
||||
var weekData = [{
|
||||
text: `电池健康度`,
|
||||
max: 100
|
||||
},
|
||||
{
|
||||
text: `BMS精度`,
|
||||
max: 100
|
||||
},
|
||||
{
|
||||
text: `异常告警`,
|
||||
max: 100
|
||||
},
|
||||
{
|
||||
text: `温度一致性`,
|
||||
max: 100
|
||||
},
|
||||
{
|
||||
text: `电压一致性`,
|
||||
max: 100
|
||||
},
|
||||
{
|
||||
text: `SOC一致性`,
|
||||
max: 100
|
||||
},
|
||||
];
|
||||
var student = [data.score, data.bmsCurrentAccuracy, data.alarmNumber, data.tempMax, data
|
||||
.voltConsistency, data.socAccuracy
|
||||
];
|
||||
let option = {
|
||||
// tooltip: {
|
||||
// trigger: "axis",
|
||||
// position: [20, -25]
|
||||
// },
|
||||
radar: [{
|
||||
indicator: weekData,
|
||||
center: ["50%", "45%"],
|
||||
radius: "54%",
|
||||
name: {
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 1)',
|
||||
fontSize: 17 * scale,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "rgb(40,180,255)",
|
||||
opacity: 0.5,
|
||||
width: 2 * scale,
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
areaStyle: {
|
||||
color: "rgba(60, 253, 255, 0.6)",
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgb(40,180,255)',
|
||||
type: "dashed",
|
||||
},
|
||||
},
|
||||
}, ],
|
||||
series: [{
|
||||
type: "radar",
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
data: [{
|
||||
value: student,
|
||||
name: "电池分项得分",
|
||||
}, ],
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 13,
|
||||
formatter: '{a|{c}}', // 使用 rich 格式化文本
|
||||
position:[0,10],
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 15,
|
||||
fontWeight: 'bold',
|
||||
color: 'rgba(60, 253, 255, 1)',
|
||||
padding: [2, 5], // 内边距
|
||||
borderRadius: 5, // 圆角
|
||||
borderColor: 'rgba(60, 253, 255, 1)', // 边框颜色
|
||||
borderWidth: 1 // 边框宽度
|
||||
}
|
||||
}
|
||||
},
|
||||
symbolSize: 10 * scale,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fff',
|
||||
borderColor: "rgba(40, 180, 255, 0.6)",
|
||||
borderWidth: 2 * scale,
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: "rgba(60, 253, 255, 0.6)",
|
||||
width: 2 * scale,
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: "rgb(40, 180, 255)",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
}, ],
|
||||
}
|
||||
// chart 图表实例不能存在data里
|
||||
const chart = await this.$refs.chartRef.init(echarts);
|
||||
chart.setOption(option)
|
||||
// 监听窗口大小改变事件,并调用resize方法
|
||||
window.onresize = function() {
|
||||
myChart.resize();
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
|
||||
</style>
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" style="background-color: black;">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script>
|
||||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||
CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,23 @@
|
|||
import App from './App'
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
import './uni.promisify.adaptor'
|
||||
import "./static/font.css"
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
import { createSSRApp } from 'vue'
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
|
@ -0,0 +1,77 @@
|
|||
{
|
||||
"name" : "chargingDetection",
|
||||
"appid" : "__UNI__79B4FAD",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "2",
|
||||
"h5" : {
|
||||
"router" : {
|
||||
"base" : "./"
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "充电检测报告"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/batteryHealth/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "车辆安全检测报告"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/balanced/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "均衡检测报告"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "检测报告",
|
||||
"navigationBarBackgroundColor": "#000",
|
||||
"backgroundColor": "#000"
|
||||
},
|
||||
"uniIdRouter": {}
|
||||
}
|
|
@ -0,0 +1,610 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="text-area">
|
||||
<view class="carDetection">
|
||||
<view class="header">
|
||||
</view>
|
||||
<view class="title">
|
||||
<span>车辆信息</span>
|
||||
<span class="smallTitle">CHE LIANG XIN XI</span>
|
||||
</view>
|
||||
<view class="chargeDataList">
|
||||
<view class="item" v-for="(item,index) in chargingKey" :key="index">
|
||||
<span>
|
||||
<text class="name">{{item.name}}</text>
|
||||
<!-- <text class="status" v-if="item.status == 'normal'">正常</text>
|
||||
<text class="status1" v-else></text> -->
|
||||
</span>
|
||||
<span class="value"><span class="unit">{{item.value}}</span></span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<span>均衡信息</span>
|
||||
<span class="smallTitle">JUN HENG XIN XI</span>
|
||||
</view>
|
||||
<view class="visualInspection">
|
||||
<view class="chargeInfo">
|
||||
<view v-for="(item,index) in chargeData" :key="index" class="chartCard">
|
||||
<span>
|
||||
<image src="/static/img/jx.png"></image>
|
||||
{{item.name}}
|
||||
</span>
|
||||
<span v-if="item.name != '充电时长'" class="cdValue">{{item.value}}</span>
|
||||
<!-- <span v-else class="cdValue">{{item.value}}min</span> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<span>均衡对比</span>
|
||||
<span class="smallTitle">JUN HENG DUI BI</span>
|
||||
</view>
|
||||
<view class="visualInspection"
|
||||
style="display: flex;justify-content: space-between;padding:10% 10px 3% 10px">
|
||||
<view class="item" v-for="(item,index) in balancedComparison" :key="index">
|
||||
<span>
|
||||
<text class="name">{{item.name}}</text>
|
||||
<!-- <text class="status" v-if="item.status == 'normal'">正常</text>
|
||||
<text class="status1" v-else></text> -->
|
||||
</span>
|
||||
<span class="value">{{item.detail}}:<span class="unit">{{item.value}}</span></span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import circular from '../../components/circular.vue'
|
||||
import radarVue from '../../components/radar.vue'
|
||||
import barVue from '../../components/bar.vue'
|
||||
import lineVue from '../../components/lineChart.vue'
|
||||
import ip from '../../static/config.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
detectionReportId: '',
|
||||
apiData: {},
|
||||
carStatus: '',
|
||||
chargeData: [{
|
||||
value: '3.37V',
|
||||
name: '最高电压'
|
||||
},
|
||||
{
|
||||
value: '13V',
|
||||
name: '最低电压'
|
||||
},
|
||||
{
|
||||
value: '',
|
||||
name: '最高电压位'
|
||||
},
|
||||
{
|
||||
value: '15℃',
|
||||
name: '最高温度'
|
||||
},
|
||||
{
|
||||
value: '13℃',
|
||||
name: '最低温度'
|
||||
},
|
||||
{
|
||||
value: '',
|
||||
name: '最高温度位'
|
||||
},
|
||||
{
|
||||
value: '',
|
||||
name: '最低温度位'
|
||||
},
|
||||
],
|
||||
chargingKey: [{
|
||||
name: '车牌号',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: '车架号',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: '电池类型',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: '电池容量',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: '检测时间',
|
||||
value: ''
|
||||
}, {
|
||||
name: '检测站点',
|
||||
value: ''
|
||||
},
|
||||
],
|
||||
//均衡对比
|
||||
balancedComparison: [{
|
||||
name: '均衡前后对比',
|
||||
detail: '均衡前压差',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: '均衡前后对比',
|
||||
detail: '均衡后压差',
|
||||
value: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.detectionReportId = options.DetectionReportId
|
||||
//获取接口数据
|
||||
this.getData()
|
||||
},
|
||||
components: {
|
||||
circular,
|
||||
radarVue,
|
||||
barVue,
|
||||
lineVue
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
uni.request({
|
||||
url: window.g.API_IP + '/api/GetDetectionReport?DetectionReportId=' + this.detectionReportId,
|
||||
// url: window.g.API_IP +
|
||||
// '/api/GetDetectionReport?DetectionReportId=21ad44647c8a4b9c871af5bae82d160a', // 接口地址
|
||||
method: 'GET',
|
||||
success: (res) => {
|
||||
// 请求成功时执行的回调函数
|
||||
console.log('Data received:', res.data.data);
|
||||
if (res.data.code == 0) {
|
||||
this.apiData = res.data.data; // 将获取的数据存储到data中
|
||||
//车辆信息
|
||||
this.chargingKey[0].value = this.apiData.plateNo
|
||||
this.chargingKey[1].value = this.apiData.vin
|
||||
this.chargingKey[2].value = this.apiData.batteryType
|
||||
this.chargingKey[3].value = this.apiData.ratedEnergy
|
||||
this.chargingKey[4].value = new Date(this.apiData.evalDate)
|
||||
.toLocaleString();
|
||||
//均衡信息
|
||||
this.chargeData[0].value = this.apiData.voltMax + 'kWh'
|
||||
this.chargeData[1].value = this.apiData.voltMin + 'kWh'
|
||||
this.chargeData[3].value = this.apiData.tempMax + '℃'
|
||||
this.chargeData[4].value = this.apiData.tempMax - this.apiData.tempDiff + '℃'
|
||||
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
// 请求失败时执行的回调函数
|
||||
console.error('Request failed:', err);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
background: rgb(21, 21, 33);
|
||||
|
||||
.carDetection {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background: url(@/static/img/bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
background: url(@/static/img/titleBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 68%;
|
||||
height: 60px;
|
||||
font-size: 5vw;
|
||||
font-weight: 550;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: start;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-left: 10px;
|
||||
|
||||
span:first-child {
|
||||
font-family: 'SourceHanSansCN-Heavy';
|
||||
font-size: 5vw;
|
||||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||||
-webkit-text-stroke: 0px #28b4ff;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.smallTitle {
|
||||
font-size: 1.7vw;
|
||||
color: #8195AA;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.visualInspection {
|
||||
width: 100%;
|
||||
height: 16%;
|
||||
/* margin-top: 8px; */
|
||||
background: url(@/static/img/detailBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
top: -2.1%;
|
||||
padding: 10% 0 3% 0;
|
||||
box-sizing: border-box;
|
||||
color: #96DBFF;
|
||||
font-family: 'SourceHanSansCN-Regular';
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 48%;
|
||||
background: url(@/static/img/cdlistBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 10px 10px 0px 10px;
|
||||
box-sizing: border-box;
|
||||
height: 120px;
|
||||
margin-top: 13px;
|
||||
line-height: 1.5;
|
||||
|
||||
span:first-child {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
font-size: 4vw;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
font-family: 'SourceHanSansCN-Bold';
|
||||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||||
-webkit-text-stroke: 0px #28b4ff;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.status {
|
||||
background: url(@/static/img/zc.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: 15px;
|
||||
width: 30%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
font-family: 'SourceHanSansCN-Bold';
|
||||
background: linear-gradient(270deg, rgba(40, 180, 255, 1) 60%, rgba(60, 253, 255, 1) 100%);
|
||||
-webkit-text-stroke: 0px #28b4ff;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.status1 {
|
||||
background: url(@/static/img/yc.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: 15px;
|
||||
color: #D93E3E;
|
||||
width: 30%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #88A9CD;
|
||||
margin-top: 5px;
|
||||
font-size: 13px;
|
||||
/* white-space: nowrap; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.unit {
|
||||
color: #3CFDFF;
|
||||
font-size: 15px;
|
||||
font-weight: 550;
|
||||
}
|
||||
}
|
||||
|
||||
.value::before {
|
||||
content: "·";
|
||||
/* 这里是你要添加的内容 */
|
||||
color: #88A9CD;
|
||||
/* 点的颜色 */
|
||||
font-size: 3vw;
|
||||
/* 点的尺寸 */
|
||||
margin-right: 5px;
|
||||
/* 点和文字之间的间距 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.visualInspection1 {
|
||||
width: 100%;
|
||||
height: 8%;
|
||||
background: url(@/static/img/detailBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
top: -0.7%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around
|
||||
}
|
||||
|
||||
.cularBg {
|
||||
background: url(@/static/img/chartBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.plateNumber {
|
||||
background: url(@/static/img/numberBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 50%;
|
||||
width: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
.number {
|
||||
font-family: 'SourceHanSansCN-Heavy';
|
||||
font-size: 5vw;
|
||||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||||
-webkit-text-stroke: 0px #28b4ff;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.carStatus {
|
||||
color: #96DBFF;
|
||||
font-family: 'SourceHanSansCN-Regular';
|
||||
}
|
||||
}
|
||||
|
||||
.chargeInfo {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
/* border-bottom: 1px solid rgba(136, 169, 205, 1); */
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.chartCard {
|
||||
width: 31%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 5px;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
height: 26px;
|
||||
width: 22px;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
span:first-child {
|
||||
font-size: 4vw;
|
||||
font-family: 'SourceHanSansCN-Bold';
|
||||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||||
-webkit-text-stroke: 0px #28b4ff;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
color: rgb(173, 184, 212);
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
.cdValue {
|
||||
font-family: 'SourceHanSansCN-Bold';
|
||||
background: linear-gradient(270deg, rgba(40, 180, 255, 1) 60%, rgba(60, 253, 255, 1) 100%);
|
||||
-webkit-text-stroke: 0px #28b4ff;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.batteryInfo {
|
||||
background: rgb(45, 55, 66);
|
||||
margin-top: 5px;
|
||||
|
||||
.list {
|
||||
list-style-type: none;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
color: rgb(173, 184, 212);
|
||||
|
||||
li {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment {
|
||||
background: rgb(45, 55, 66);
|
||||
margin-top: 5px;
|
||||
color: rgb(173, 184, 212);
|
||||
padding: 8px;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
|
||||
.twoTitle {
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
margin: 10px 0
|
||||
}
|
||||
|
||||
.chargeDataList {
|
||||
background: url(@/static/img/cdgjsjBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 10% 3% 6% 3%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
top: -2.1%;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 48%;
|
||||
background: url(@/static/img/cdlistBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 10px 10px 0px 10px;
|
||||
box-sizing: border-box;
|
||||
height: 120px;
|
||||
margin-top: 13px;
|
||||
line-height: 1.5;
|
||||
|
||||
span:first-child {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
font-size: 4vw;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
font-family: 'SourceHanSansCN-Bold';
|
||||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||||
-webkit-text-stroke: 0px #28b4ff;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.status {
|
||||
background: url(@/static/img/zc.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: 15px;
|
||||
width: 30%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
font-family: 'SourceHanSansCN-Bold';
|
||||
background: linear-gradient(270deg, rgba(40, 180, 255, 1) 60%, rgba(60, 253, 255, 1) 100%);
|
||||
-webkit-text-stroke: 0px #28b4ff;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.status1 {
|
||||
background: url(@/static/img/yc.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: 15px;
|
||||
color: #D93E3E;
|
||||
width: 30%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #88A9CD;
|
||||
margin-top: 5px;
|
||||
font-size: 13px;
|
||||
/* white-space: nowrap; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.unit {
|
||||
color: #3CFDFF;
|
||||
font-size: 15px;
|
||||
font-weight: 550;
|
||||
}
|
||||
}
|
||||
|
||||
.value::before {
|
||||
content: "·";
|
||||
/* 这里是你要添加的内容 */
|
||||
color: #88A9CD;
|
||||
/* 点的颜色 */
|
||||
font-size: 3vw;
|
||||
/* 点的尺寸 */
|
||||
margin-right: 5px;
|
||||
/* 点和文字之间的间距 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prompt {
|
||||
font-size: 18rpx;
|
||||
color: rgb(127, 127, 127);
|
||||
}
|
||||
|
||||
.chatResult {
|
||||
background: rgba(58, 153, 212, 0.5);
|
||||
border: 1px solid rgb(58, 153, 212);
|
||||
border-radius: 5px;
|
||||
padding: 5px 15px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.twoTitle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.comStatus {
|
||||
color: #000;
|
||||
background: rgb(0, 220, 255);
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
width: 15%;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.remind {
|
||||
color: rgb(173, 184, 212);
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,980 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<view class="text-area">
|
||||
<view class="carDetection">
|
||||
<view class="header">
|
||||
<image src="/static/img/sdjcbg.png"></image>
|
||||
</view>
|
||||
<view class="title">
|
||||
<span>电池健康度得分</span>
|
||||
<span class="smallTitle">DIAN CHI JIAN KANG DU DE FEN</span>
|
||||
</view>
|
||||
<view class="visualInspection1">
|
||||
<circular :apiData='apiData' class="cularBg"></circular>
|
||||
<view class="plateNumber">
|
||||
<span class="number">{{apiData.plateNo}}</span>
|
||||
<span class="carStatus">{{carStatus}}</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<span>车辆外观检测情况</span>
|
||||
<span class="smallTitle">CHE LIANG WAI GUAN JIAN CE QING KUANG</span>
|
||||
</view>
|
||||
<view class="visualInspection4">
|
||||
<view class="textBg">
|
||||
<p>{{evalConclusion.reason}}</p>
|
||||
<p>{{evalConclusion.status}}</p>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<span>红外检测情况</span>
|
||||
<span class="smallTitle">HONG WAI JINA CE QING KUANG</span>
|
||||
</view>
|
||||
<view class="visualInspection4">
|
||||
<view class="textBg">
|
||||
<p>{{evalConclusion.reason}}</p>
|
||||
<p>{{evalConclusion.status}}</p>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<span>紫外检测情况</span>
|
||||
<span class="smallTitle">ZI WAI JINA CE QING KUANG</span>
|
||||
</view>
|
||||
<view class="visualInspection4">
|
||||
<view class="textBg">
|
||||
<p>{{evalConclusion.reason}}</p>
|
||||
<p>{{evalConclusion.status}}</p>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<span>声纹检测情况</span>
|
||||
<span class="smallTitle">SHENG WEN JIAN CE QING KUANG</span>
|
||||
</view>
|
||||
<view class="visualInspection4">
|
||||
<view class="textBg">
|
||||
<p>{{evalConclusion.reason}}</p>
|
||||
<p>{{evalConclusion.status}}</p>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="title">
|
||||
<span>电池分项得分</span>
|
||||
<span class="smallTitle">DIAN CHI FEN XIANG DE FEN</span>
|
||||
</view>
|
||||
<view class="visualInspection">
|
||||
<radarVue :apiData='apiData'></radarVue>
|
||||
</view>
|
||||
<view class="title">
|
||||
<span>电池充电信息</span>
|
||||
<span class="smallTitle">DIAN CHI CHONG DIAN XIN XI</span>
|
||||
</view>
|
||||
<view class="cdxx">
|
||||
<view class="chargeInfo">
|
||||
<view v-for="(item,index) in chargeData" :key="index" class="chartCard">
|
||||
<span>
|
||||
<image src="/static/img/jx.png"></image>
|
||||
{{item.name}}
|
||||
</span>
|
||||
<span v-if="item.name != '充电时长'" class="cdValue">{{item.value}}kWh</span>
|
||||
<span v-else class="cdValue">{{item.value}}min</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="batteryInfo">
|
||||
<ul class="list">
|
||||
<li class="type">{{apiData.batteryType}}</li>
|
||||
<li>VIN:{{apiData.vin}}</li>
|
||||
<li>
|
||||
<image src="/static/img/charging.png"
|
||||
style="width: 26px;height: 26px;margin-right: 5px;"></image>
|
||||
充电场站:{{apiData.stationName}}
|
||||
</li>
|
||||
<li>
|
||||
<image src="/static/img/station.png"
|
||||
style="width: 26px;height: 26px;margin-right: 5px;"></image>
|
||||
充电桩:{{apiData.pileName}}
|
||||
</li>
|
||||
<li>
|
||||
<image src="/static/img/time.png" style="width: 26px;height: 26px;margin-right: 5px;">
|
||||
</image>
|
||||
充电开始时间:{{apiData.chargingStartTime}}
|
||||
</li>
|
||||
<li>
|
||||
<image src="/static/img/time.png" style="width: 26px;height: 26px;margin-right: 5px;">
|
||||
</image>
|
||||
充电结束时间:{{apiData.chargingEndTime}}
|
||||
</li>
|
||||
</ul>
|
||||
<barVue :apiData='apiData'></barVue>
|
||||
</view>
|
||||
<view class="comment">
|
||||
<view class="pgjl">
|
||||
<text class="twoTitle">评估结论</text>
|
||||
<p>{{evalConclusion.reason}}</p>
|
||||
<p>{{evalConclusion.status}}</p>
|
||||
</view>
|
||||
<view class="ycjy">
|
||||
<text class="twoTitle">用车建议</text>
|
||||
<text class="carSuggestions">为了保障您的安全以及电动车的最佳性能,我们为您提供以下建议:\n
|
||||
<view class="xh">1</view>
|
||||
<span>规律的维护检査:请定期检査电动车的电池、刹车系统、轮胎等关键部位,确保它们处于良好工作状态。<br></span>
|
||||
<view class="xh">2</view>
|
||||
<span>保持充电习惯:为了延长电池寿命,建议您尽量保持规律的充电习惯,避免电池电量过低或过高。通常建议保持电池电量在30%-80%之间。<br></span>
|
||||
<view class="xh">3</view>
|
||||
<span>注意天气变化:春秋季节天气变化无常,雨水可能会对电动车造成一定影响。在预期有雨的日子,请尽量避免在雨中充电,并确保电动车在干燥的地方停放。<br></span>
|
||||
<view class="xh">4</view>
|
||||
<span>避免过度使用:过度使用电动车可能导致电池过热或者电池性能下降。请适当地使用电动车,避免连续长时间的高速驾驶。<br></span>
|
||||
<view class="xh">5</view>
|
||||
<span>注意车辆异常:如果在行驶或充电过程中发现车辆有异常情况,比如电量突然降低或电池不能正常充电等,建议立即停车检查,如有必要,请联系专业维修人员进行维护。</span>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title">
|
||||
<span>充电关键数据</span>
|
||||
<span class="smallTitle">CHONG DIAN GUAN JIAN SHU JU</span>
|
||||
</view>
|
||||
<view class="chargeDataList">
|
||||
<view class="item" v-for="(item,index) in chargingKey" :key="index">
|
||||
<span>
|
||||
<text class="name">{{item.name}}</text>
|
||||
<text class="status" v-if="item.status == 'normal'">正常</text>
|
||||
<text class="status1" v-else></text>
|
||||
</span>
|
||||
<span class="value">{{item.details}}:<span class="unit">{{item.value}}</span></span>
|
||||
<span class="value" v-if="item.details1"
|
||||
:style="{'fontSize':item.name == '极值温度' ?'2.2vw':''}">{{item.details1}}:<span
|
||||
class="unit">{{item.value1}}</span></span>
|
||||
<span class="value" v-if="item.details2"
|
||||
:style="{'fontSize':item.name == '极值温度' ?'2.2vw':''}">{{item.details2}}:<span
|
||||
class="unit">{{item.value2}}</span></span>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 充电电压 -->
|
||||
<view class="title" style="margin-bottom: 0px;">
|
||||
<span>充电电压曲线</span>
|
||||
<span class="smallTitle">CHONG DIAN DIAN YA QU XIAN</span>
|
||||
</view>
|
||||
<!-- <text class="prompt">充电电压表现的是您的爱车在充电过程中实际充电电压与需求电压的关系,实际充电电压不应高于需求电压</text> -->
|
||||
<view class="visualInspection2">
|
||||
<lineVue :apiData='apiData' :lineType="'电压'" :id="'chartRef1'"></lineVue>
|
||||
<view class="chatResult">
|
||||
<view class="twoTitle">
|
||||
<span>评估结果</span>
|
||||
<text class="comStatus">正常</text>
|
||||
<!-- <text class="comStatus" v-if="apiData.voltConsistencyState =='normal'">正常</text>
|
||||
<text v-else>异常</text> -->
|
||||
</view>
|
||||
<text class="remind">{{apiData.voltConclusion}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 充电电流 -->
|
||||
<view class="title" style="margin-bottom: 0px;">
|
||||
<span>充电电流曲线</span>
|
||||
<span class="smallTitle">CHONG DIAN DIAN LIU QU XIAN</span>
|
||||
</view>
|
||||
<!-- <text class="prompt">充电电压表现的是您的爱车在充电过程中实际充电电流与需求电流的关系,实际充电电流不应高于需求电流</text> -->
|
||||
<view class="visualInspection3">
|
||||
<lineVue :apiData='apiData' :lineType="'电流'" :id="'chartRef2'"></lineVue>
|
||||
<view class="chatResult">
|
||||
<view class="twoTitle">
|
||||
<span>评估结果</span>
|
||||
<text class="comStatus">正常</text>
|
||||
</view>
|
||||
<text class="remind">{{apiData.currentConclusion}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- BMS测量精度曲线 -->
|
||||
<view class="title" style="margin-bottom: 0px;">
|
||||
<span>BMS测量精度曲线</span>
|
||||
<span class="smallTitle">BMS CE LIANG JING DU QU XIAN</span>
|
||||
</view>
|
||||
<!-- <text class="prompt">充电电压表现的是您的爱车在充电过程中实际充电电流与需求电流的关系,实际充电电流不应高于需求电流</text> -->
|
||||
<view class="visualInspection2">
|
||||
<lineVue :apiData='apiData' :id="'chartRef3'" :lineType="'BMS'"></lineVue>
|
||||
<view class="chatResult">
|
||||
<view class="twoTitle">
|
||||
<span>评估结果</span>
|
||||
<!-- <text class="comStatus">正常</text> -->
|
||||
<text class="comStatus" v-if="apiData.bmsAccuracyState =='normal'">正常</text>
|
||||
<text v-else>异常</text>
|
||||
</view>
|
||||
<text class="remind">{{apiData.bmsAccuracyConclusion}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 充电温差电线 -->
|
||||
<view class="title" style="margin-bottom: 0px;">
|
||||
<span>充电温差电线</span>
|
||||
<span class="smallTitle">CHONG DIAN WEN CHA DIAN XIAN</span>
|
||||
</view>
|
||||
<!-- <text class="prompt">充电电压表现的是您的爱车在充电过程中实际充电电流与需求电流的关系,实际充电电流不应高于需求电流</text> -->
|
||||
<view class="visualInspection2">
|
||||
<lineOneVue :apiData='apiData' :id="'chartRef4'" :lineType="'充电温差'"></lineOneVue>
|
||||
<view class="chatResult">
|
||||
<view class="twoTitle">
|
||||
<span>评估结果</span>
|
||||
<text class="comStatus" v-if="apiData.tempDiffState =='normal'">正常</text>
|
||||
<text v-else>异常</text>
|
||||
</view>
|
||||
<text class="remind">{{apiData.tempDiffConclusion}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 充电功率 -->
|
||||
<view class="title" style="margin-bottom: 0px;">
|
||||
<span>充电功率</span>
|
||||
<span class="smallTitle">CHONG DIAN GONG LV</span>
|
||||
</view>
|
||||
<!-- <text class="prompt">充电电压表现的是您的爱车在充电过程中实际充电电流与需求电流的关系,实际充电电流不应高于需求电流</text> -->
|
||||
<view class="visualInspection">
|
||||
<lineOneVue :apiData='apiData' :id="'chartRef5'" :lineType="'充电功率'"></lineOneVue>
|
||||
</view>
|
||||
<!-- 充电功率 -->
|
||||
<view class="title" style="margin-bottom: 0px;">
|
||||
<span>请注意</span>
|
||||
<span class="smallTitle">QING ZHU YI</span>
|
||||
</view>
|
||||
<view class="visualInspection4">
|
||||
<span class="qzy">
|
||||
报告仍有最高温度历史曲线、温差历史曲线、最高单体电压历史曲线、 压差历史曲线、开路电压一致性历史曲线、SOC准确度历史曲线、健康 度历史曲线等项需要您的爱车
|
||||
<span>累计充电4次以上</span>方可提供。
|
||||
</span>
|
||||
</view>
|
||||
<text class="btn">
|
||||
预约均衡
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import circular from '../../components/circular.vue'
|
||||
import radarVue from '../../components/radar.vue'
|
||||
import barVue from '../../components/bar.vue'
|
||||
import lineVue from '../../components/lineChart.vue'
|
||||
import lineOneVue from '../../components/lineOne.vue'
|
||||
import ip from '../../static/config.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
detectionReportId: '',
|
||||
apiData: {},
|
||||
carStatus: '',
|
||||
chargeData: [{
|
||||
value: '',
|
||||
name: '充电度数'
|
||||
},
|
||||
{
|
||||
value: '',
|
||||
name: '充电时长'
|
||||
},
|
||||
{
|
||||
value: '',
|
||||
name: '标称总能量'
|
||||
},
|
||||
],
|
||||
evalConclusion: {
|
||||
reason: '',
|
||||
status: ''
|
||||
}, //评语结论
|
||||
chargingKey: [{
|
||||
name: '电池健康度',
|
||||
status: 'normal',
|
||||
details: '电池健康度',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: '告警',
|
||||
status: 'normal',
|
||||
details: '告警信息',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: 'SOC测量精度',
|
||||
status: 'normal',
|
||||
details: 'SOC精度',
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
name: 'BMS测量精度',
|
||||
status: 'normal',
|
||||
details: '电压精度',
|
||||
value: '',
|
||||
details1: '电流精度',
|
||||
value1: ''
|
||||
},
|
||||
{
|
||||
name: '电池一致性',
|
||||
status: 'normal',
|
||||
details: '开路电压一致性',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: '充电平均功率',
|
||||
status: 'normal',
|
||||
details: '充电平均功率',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: '极值电压',
|
||||
status: 'normal',
|
||||
details: '电压差',
|
||||
value: '',
|
||||
details1: '单体最高电压',
|
||||
value1: '',
|
||||
details2: '单体最低电压',
|
||||
value2: ''
|
||||
},
|
||||
{
|
||||
name: '极值温度',
|
||||
status: 'normal',
|
||||
details: '温度差',
|
||||
value: '',
|
||||
details1: '最高温差时单体最高温度',
|
||||
value1: '',
|
||||
details2: '最高温差时单体最低温度',
|
||||
value2: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.detectionReportId = options.DetectionReportId
|
||||
//获取接口数据
|
||||
this.getData()
|
||||
},
|
||||
components: {
|
||||
circular,
|
||||
radarVue,
|
||||
barVue,
|
||||
lineVue,
|
||||
lineOneVue
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
uni.request({
|
||||
url: window.g.API_IP + '/api/GetDetectionReport?DetectionReportId=' + this
|
||||
.detectionReportId, // 接口地址
|
||||
// url: window.g.API_IP +
|
||||
// '/api/GetDetectionReport?DetectionReportId=21ad44647c8a4b9c871af5bae82d160a', // 接口地址
|
||||
method: 'GET',
|
||||
success: (res) => {
|
||||
// 请求成功时执行的回调函数
|
||||
console.log('Data received:', res.data.data);
|
||||
if (res.data.code == 0) {
|
||||
this.apiData = res.data.data; // 将获取的数据存储到data中
|
||||
this.carStatus = this.apiData.evalConclusion[1].split(',')[1]
|
||||
this.chargeData[0].value = this.apiData.chargingEnergy
|
||||
this.chargeData[1].value = this.apiData.chargingDuration
|
||||
this.chargeData[2].value = this.apiData.ratedEnergy
|
||||
//时间
|
||||
this.apiData.chargingStartTime = new Date(this.apiData.chargingStartTime)
|
||||
.toLocaleString();
|
||||
this.apiData.chargingEndTime = new Date(this.apiData.chargingEndTime)
|
||||
.toLocaleString();
|
||||
//结论评语
|
||||
this.evalConclusion.reason = this.apiData.evalConclusion[0]
|
||||
this.evalConclusion.status = this.apiData.evalConclusion[1]
|
||||
//充电关键数据
|
||||
this.chargingKey[0].value = this.apiData.soh + '%'
|
||||
this.chargingKey[0].status = this.apiData.sohState
|
||||
this.chargingKey[1].value = this.apiData.alarmNumber + '条'
|
||||
this.chargingKey[1].status = this.apiData.alarmState
|
||||
this.chargingKey[2].value = this.apiData.socAccuracy + '%'
|
||||
this.chargingKey[2].status = this.apiData.socAccuracyState
|
||||
this.chargingKey[3].value = this.apiData.bmsVoltAccuracy + '%'
|
||||
this.chargingKey[3].value1 = this.apiData.bmsCurrentAccuracy + '%'
|
||||
this.chargingKey[3].status = this.apiData.bmsAccuracyState
|
||||
this.chargingKey[4].value = this.apiData.voltConsistency + '分'
|
||||
this.chargingKey[4].status = this.apiData.voltConsistencyState
|
||||
this.chargingKey[5].value = this.apiData.powerAvg + 'kW'
|
||||
this.chargingKey[6].value = this.apiData.voltDiff + 'V'
|
||||
this.chargingKey[6].value1 = this.apiData.voltMax + 'V'
|
||||
this.chargingKey[6].value2 = this.apiData.voltMin + 'V'
|
||||
this.chargingKey[6].status = this.apiData.voltDiffState
|
||||
this.chargingKey[7].value = this.apiData.tempDiff + '℃'
|
||||
this.chargingKey[7].value1 = this.apiData.tempDiffMax + '℃'
|
||||
this.chargingKey[7].value2 = this.apiData.tempDiffMin + '℃'
|
||||
this.chargingKey[7].status = this.apiData.tempDiffState
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
// 请求失败时执行的回调函数
|
||||
console.error('Request failed:', err);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
background: rgb(21, 21, 33);
|
||||
|
||||
.carDetection {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
background: url(@/static/img/bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
image {
|
||||
width: 60%;
|
||||
height: 9%;
|
||||
top: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
background: url(@/static/img/titleBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 68%;
|
||||
height: 1.2%;
|
||||
font-size: 5vw;
|
||||
font-weight: 550;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: start;
|
||||
/* margin-bottom: 10px; */
|
||||
margin-top: 10px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-left: 10px;
|
||||
|
||||
span:first-child {
|
||||
font-family: 'SourceHanSansCN-Heavy';
|
||||
font-size: 5vw;
|
||||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||||
-webkit-text-stroke: 0px #28b4ff;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.smallTitle {
|
||||
font-size: 1.7vw;
|
||||
color: #8195AA;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.visualInspection {
|
||||
width: 100%;
|
||||
height: 5%;
|
||||
/* margin-top: 8px; */
|
||||
background: url(@/static/img/detailBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
top: -0.47%;
|
||||
padding: 10% 3% 3% 3%;
|
||||
box-sizing: border-box;
|
||||
color: #96DBFF;
|
||||
font-family: 'SourceHanSansCN-Regular';
|
||||
|
||||
.textBg {
|
||||
background: url(@/static/img/plBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
font-size: 3.5vw;
|
||||
line-height: 1.8;
|
||||
}
|
||||
}
|
||||
|
||||
.visualInspection2 {
|
||||
width: 100%;
|
||||
height: 8%;
|
||||
/* margin-top: 8px; */
|
||||
background: url(@/static/img/lineBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
top: -0.47%;
|
||||
padding: 10% 3% 3% 3%;
|
||||
box-sizing: border-box;
|
||||
color: #96DBFF;
|
||||
font-family: 'SourceHanSansCN-Regular';
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.textBg {
|
||||
background: url(@/static/img/plBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
font-size: 3.5vw;
|
||||
line-height: 1.8;
|
||||
}
|
||||
}
|
||||
|
||||
.visualInspection3 {
|
||||
width: 100%;
|
||||
height: 9%;
|
||||
/* margin-top: 8px; */
|
||||
background: url(@/static/img/linedlBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
top: -0.47%;
|
||||
padding: 10% 3% 3% 3%;
|
||||
box-sizing: border-box;
|
||||
color: #96DBFF;
|
||||
font-family: 'SourceHanSansCN-Regular';
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
|
||||
.textBg {
|
||||
background: url(@/static/img/plBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
font-size: 3.5vw;
|
||||
line-height: 1.8;
|
||||
}
|
||||
}
|
||||
|
||||
.visualInspection4 {
|
||||
width: 100%;
|
||||
height: 4%;
|
||||
/* margin-top: 8px; */
|
||||
background: url(@/static/img/qzyBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
top: -0.47%;
|
||||
padding: 10% 3% 3% 3%;
|
||||
box-sizing: border-box;
|
||||
color: #96DBFF;
|
||||
font-family: 'SourceHanSansCN-Regular';
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.textBg {
|
||||
background: url(@/static/img/plBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
font-size: 3.5vw;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.qzy {
|
||||
color: #88A9CD;
|
||||
font-size: 3.5vw;
|
||||
line-height: 2;
|
||||
text-indent: 2em;
|
||||
|
||||
span {
|
||||
color: #28B4FF
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cdxx {
|
||||
width: 100%;
|
||||
/* height: 34%; */
|
||||
background: url(@/static/img/dccdxxBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
top: -0.45%;
|
||||
padding: 10% 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'SourceHanSansCN-Regular';
|
||||
}
|
||||
|
||||
.visualInspection1 {
|
||||
width: 100%;
|
||||
height: 5%;
|
||||
background: url(@/static/img/detailBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
top: -0.47%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around
|
||||
}
|
||||
|
||||
.cularBg {
|
||||
background: url(@/static/img/chartBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.plateNumber {
|
||||
background: url(@/static/img/numberBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 50%;
|
||||
width: 33%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
.number {
|
||||
font-family: 'SourceHanSansCN-Heavy';
|
||||
font-size: 5vw;
|
||||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||||
-webkit-text-stroke: 0px #28b4ff;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.carStatus {
|
||||
font-size: 4vw;
|
||||
color: #96DBFF;
|
||||
font-family: 'SourceHanSansCN-Regular';
|
||||
}
|
||||
}
|
||||
|
||||
.chargeInfo {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
border-bottom: 1px solid rgba(136, 169, 205, 1);
|
||||
justify-content: space-between;
|
||||
|
||||
.chartCard {
|
||||
width: 31%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 0;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
height: 26px;
|
||||
width: 22px;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
span:first-child {
|
||||
font-size: 4vw;
|
||||
font-family: 'SourceHanSansCN-Bold';
|
||||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||||
-webkit-text-stroke: 0px #28b4ff;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
color: rgb(173, 184, 212);
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
.cdValue {
|
||||
font-family: 'SourceHanSansCN-Bold';
|
||||
background: linear-gradient(270deg, rgba(40, 180, 255, 1) 60%, rgba(60, 253, 255, 1) 100%);
|
||||
-webkit-text-stroke: 0px #28b4ff;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.batteryInfo {
|
||||
margin-top: 5px;
|
||||
|
||||
.list {
|
||||
list-style-type: none;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
color: rgba(136, 169, 205, 1);
|
||||
font-family: 'SourceHanSansCN-Regular';
|
||||
|
||||
.type {
|
||||
font-size: 4vw;
|
||||
font-family: 'SourceHanSansCN-Bold';
|
||||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||||
-webkit-text-stroke: 0px #28b4ff;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment {
|
||||
margin-top: 8px;
|
||||
color: rgb(173, 184, 212);
|
||||
padding: 8px;
|
||||
font-size: 3vw;
|
||||
height: 65%;
|
||||
|
||||
.pgjl {
|
||||
background: url(@/static/img/plBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
height: 14%;
|
||||
font-size: 3.5vw;
|
||||
line-height: 1.8;
|
||||
|
||||
p::before {
|
||||
content: "·";
|
||||
/* 这里是你要添加的内容 */
|
||||
color: rgba(60, 253, 255, 1);
|
||||
/* 点的颜色 */
|
||||
font-size: 4vw;
|
||||
/* 点的尺寸 */
|
||||
margin-right: 5px;
|
||||
/* 点和文字之间的间距 */
|
||||
}
|
||||
}
|
||||
|
||||
.ycjy {
|
||||
background: url(@/static/img/ycjybg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
/* height: 14%; */
|
||||
font-size: 3.5vw;
|
||||
margin-top: 5%;
|
||||
}
|
||||
}
|
||||
|
||||
.carSuggestions {
|
||||
font-family: 'SourceHanSansCN-Regular';
|
||||
font-size: 3.5vw;
|
||||
line-height: 1.8;
|
||||
letter-spacing: 2px;
|
||||
|
||||
.xh {
|
||||
background: url(@/static/img/xhbg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
font-family: 'SourceHanSansCN-Heavy';
|
||||
height: 23px;
|
||||
width: 23px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.twoTitle {
|
||||
font-size: 4.5vw;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
/* margin: 10px 0; */
|
||||
background: url(@/static/img/numberBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: block;
|
||||
|
||||
span {
|
||||
font-family: 'SourceHanSansCN-Bold';
|
||||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||||
-webkit-text-stroke: 0px #28b4ff;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.chargeDataList {
|
||||
background: url(@/static/img/cdgjsjBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 10% 3% 6% 3%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
top: -0.45%;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 48%;
|
||||
background: url(@/static/img/cdlistBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 10px 10px 0px 10px;
|
||||
box-sizing: border-box;
|
||||
height: 120px;
|
||||
margin-top: 13px;
|
||||
line-height: 1.5;
|
||||
|
||||
span:first-child {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.name {
|
||||
font-size: 4vw;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
font-family: 'SourceHanSansCN-Bold';
|
||||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||||
-webkit-text-stroke: 0px #28b4ff;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.status {
|
||||
background: url(@/static/img/zc.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: 15px;
|
||||
width: 30%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
font-family: 'SourceHanSansCN-Bold';
|
||||
background: linear-gradient(270deg, rgba(40, 180, 255, 1) 60%, rgba(60, 253, 255, 1) 100%);
|
||||
-webkit-text-stroke: 0px #28b4ff;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.status1 {
|
||||
background: url(@/static/img/yc.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: 15px;
|
||||
color: #D93E3E;
|
||||
width: 30%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #88A9CD;
|
||||
margin-top: 5px;
|
||||
font-size: 13px;
|
||||
/* white-space: nowrap; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.unit {
|
||||
color: #3CFDFF;
|
||||
font-size: 15px;
|
||||
font-weight: 550;
|
||||
}
|
||||
}
|
||||
|
||||
.value::before {
|
||||
content: "·";
|
||||
/* 这里是你要添加的内容 */
|
||||
color: #88A9CD;
|
||||
/* 点的颜色 */
|
||||
font-size: 3vw;
|
||||
/* 点的尺寸 */
|
||||
margin-right: 5px;
|
||||
/* 点和文字之间的间距 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prompt {
|
||||
font-size: 18rpx;
|
||||
color: rgb(127, 127, 127);
|
||||
}
|
||||
|
||||
.chatResult {
|
||||
background: url(@/static/img/pgjgBg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 10px 15px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.twoTitle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.comStatus {
|
||||
background: url(@/static/img/zc.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: 15px;
|
||||
width: 20%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
font-family: 'SourceHanSansCN-Bold';
|
||||
background: linear-gradient(270deg, rgba(40, 180, 255, 1) 60%, rgba(60, 253, 255, 1) 100%);
|
||||
-webkit-text-stroke: 0px #28b4ff;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.remind {
|
||||
color: #88A9CD;
|
||||
font-size: 3vw;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: url(@/static/img/button.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 1%;
|
||||
width: 60%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 5vw;
|
||||
left: 20%;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
|
||||
span {
|
||||
font-family: 'SourceHanSansCN-Bold';
|
||||
background: linear-gradient(0deg, rgb(49, 190, 255) 0%, rgba(20, 158, 255, 1) 0%, rgba(239, 252, 254, 1) 58.7646484375%);
|
||||
-webkit-text-stroke: 0px #28b4ff;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,3 @@
|
|||
window.g = {
|
||||
API_IP: 'http://172.16.1.146:5000',
|
||||
}
|
|
@ -0,0 +1,18 @@
|
|||
@font-face {
|
||||
font-family: "SourceHanSansCN-Heavy";
|
||||
src: url('./font/SourceHanSansCN-Heavy_0.otf');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "SourceHanSansCN-Bold";
|
||||
src: url('./font/SourceHanSansCN-Bold_0.otf');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "SourceHanSansCN-Regular";
|
||||
src: url('./font/SourceHanSansCN-Regular_0.otf');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
After Width: | Height: | Size: 85 KiB |
After Width: | Height: | Size: 3.3 MiB |
After Width: | Height: | Size: 23 KiB |
After Width: | Height: | Size: 251 KiB |
After Width: | Height: | Size: 5.3 KiB |
After Width: | Height: | Size: 791 B |
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 113 KiB |
After Width: | Height: | Size: 127 KiB |
After Width: | Height: | Size: 956 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 190 KiB |
After Width: | Height: | Size: 218 KiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 8.4 KiB |
After Width: | Height: | Size: 8.4 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 106 KiB |
After Width: | Height: | Size: 48 KiB |
After Width: | Height: | Size: 751 B |
After Width: | Height: | Size: 626 B |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 373 B |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 40 KiB |
After Width: | Height: | Size: 318 B |
After Width: | Height: | Size: 3.9 KiB |
|
@ -0,0 +1,10 @@
|
|||
uni.addInterceptor({
|
||||
returnValue (res) {
|
||||
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
|
||||
return res;
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
res.then((res) => res[0] ? reject(res[0]) : resolve(res[1]));
|
||||
});
|
||||
},
|
||||
});
|
|
@ -0,0 +1,76 @@
|
|||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
|
||||
/* 颜色变量 */
|
||||
|
||||
/* 行为相关颜色 */
|
||||
$uni-color-primary: #007aff;
|
||||
$uni-color-success: #4cd964;
|
||||
$uni-color-warning: #f0ad4e;
|
||||
$uni-color-error: #dd524d;
|
||||
|
||||
/* 文字基本颜色 */
|
||||
$uni-text-color:#333;//基本色
|
||||
$uni-text-color-inverse:#fff;//反色
|
||||
$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息
|
||||
$uni-text-color-placeholder: #808080;
|
||||
$uni-text-color-disable:#c0c0c0;
|
||||
|
||||
/* 背景颜色 */
|
||||
$uni-bg-color:#000;
|
||||
$uni-bg-color-grey:#f8f8f8;
|
||||
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
|
||||
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
|
||||
|
||||
/* 边框颜色 */
|
||||
$uni-border-color:#c8c7cc;
|
||||
|
||||
/* 尺寸变量 */
|
||||
|
||||
/* 文字尺寸 */
|
||||
$uni-font-size-sm:12px;
|
||||
$uni-font-size-base:14px;
|
||||
$uni-font-size-lg:16;
|
||||
|
||||
/* 图片尺寸 */
|
||||
$uni-img-size-sm:20px;
|
||||
$uni-img-size-base:26px;
|
||||
$uni-img-size-lg:40px;
|
||||
|
||||
/* Border Radius */
|
||||
$uni-border-radius-sm: 2px;
|
||||
$uni-border-radius-base: 3px;
|
||||
$uni-border-radius-lg: 6px;
|
||||
$uni-border-radius-circle: 50%;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-row-sm: 5px;
|
||||
$uni-spacing-row-base: 10px;
|
||||
$uni-spacing-row-lg: 15px;
|
||||
|
||||
/* 垂直间距 */
|
||||
$uni-spacing-col-sm: 4px;
|
||||
$uni-spacing-col-base: 8px;
|
||||
$uni-spacing-col-lg: 12px;
|
||||
|
||||
/* 透明度 */
|
||||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||
|
||||
/* 文章场景相关 */
|
||||
$uni-color-title: #2C405A; // 文章标题颜色
|
||||
$uni-font-size-title:20px;
|
||||
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||
$uni-font-size-subtitle:26px;
|
||||
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||
$uni-font-size-paragraph:15px;
|
|
@ -0,0 +1,209 @@
|
|||
## 1.0.0(2025-02-27)
|
||||
- fix: 修复uniappx微信小程序不显示问题
|
||||
## 0.9.9(2025-02-24)
|
||||
- feat: 更新v4
|
||||
## 0.9.8(2024-12-20)
|
||||
- fix: 修复 APP 无法放大问题
|
||||
## 0.9.7(2024-12-02)
|
||||
- feat: uniapp 增加`landscape`,当`landscape`为`true`时旋转90deg达到横屏效果。
|
||||
- feat: 支持uniapp x 微信小程序
|
||||
## 0.9.6(2024-07-23)
|
||||
- fix: 修复 uni is not defined
|
||||
## 0.9.5(2024-07-19)
|
||||
- chore: 鸿蒙`measureText`为异步,异步字体不正常,使用模拟方式。
|
||||
## 0.9.4(2024-07-18)
|
||||
- chore: 更新文档
|
||||
## 0.9.3(2024-07-16)
|
||||
- feat: 鸿蒙 canvas 事件缺失,待官方修复,如何在鸿蒙使用请看文档`常见问题 vue3`
|
||||
## 0.9.2(2024-07-12)
|
||||
- chore: 删除多余文件
|
||||
## 0.9.1(2024-07-12)
|
||||
- fix: 修复 安卓5不显示图表问题
|
||||
## 0.9.0(2024-06-13)
|
||||
- chore: 合并nvue和uvue
|
||||
## 0.8.9(2024-05-19)
|
||||
- chore: 更新文档
|
||||
## 0.8.8(2024-05-13)
|
||||
- chore: 更新文档和uvue示例
|
||||
## 0.8.7(2024-04-26)
|
||||
- fix: uniapp x需要HBX 4.13以上
|
||||
## 0.8.6(2024-04-10)
|
||||
- feat: 支持 uniapp x ios
|
||||
## 0.8.5(2024-04-03)
|
||||
- fix: 修复 nvue `reset`传值不生效问题
|
||||
- feat: 支持 uniapp x web
|
||||
## 0.8.4(2024-01-27)
|
||||
- chore: 更新文档
|
||||
## 0.8.3(2024-01-21)
|
||||
- chore: 更新文档
|
||||
## 0.8.2(2024-01-21)
|
||||
- feat: 支持 `uvue`
|
||||
## 0.8.1(2023-08-24)
|
||||
- fix: app 的`touch`事件为`object` 导致无法显示 `tooltip`
|
||||
## 0.8.0(2023-08-22)
|
||||
- fix: 离屏 报错问题
|
||||
- fix: 微信小程序PC无法使用事件
|
||||
- chore: 更新文档
|
||||
## 0.7.9(2023-07-29)
|
||||
- chore: 更新文档
|
||||
## 0.7.8(2023-07-29)
|
||||
- fix: 离屏 报错问题
|
||||
## 0.7.7(2023-07-27)
|
||||
- chore: 更新文档
|
||||
- chore: lime-echart 里的示例使用自定tooltips
|
||||
- feat: 对支持离屏的使用离屏创建(微信、字节、支付宝)
|
||||
## 0.7.6(2023-06-30)
|
||||
- fix: vue3 报`width`的错
|
||||
## 0.7.5(2023-05-25)
|
||||
- chore: 更新文档 和 demo, 使用`lime-echart`这个标签即可查看示例
|
||||
## 0.7.4(2023-05-22)
|
||||
- chore: 增加关于钉钉小程序上传时提示安全问题的说明及修改建议
|
||||
## 0.7.3(2023-05-16)
|
||||
- chore: 更新 vue3 非微信小程序平台可能缺少`wx`的说明
|
||||
## 0.7.2(2023-05-16)
|
||||
- chore: 更新 vue3 非微信小程序平台的可以缺少`wx`的说明
|
||||
## 0.7.1(2023-04-26)
|
||||
- chore: 更新demo,使用`lime-echart`这个标签即可查看示例
|
||||
- chore:微信小程序的`tooltip`文字有阴影,怀疑是微信的锅,临时解决方法是`tooltip.shadowBlur = 0`
|
||||
## 0.7.0(2023-04-24)
|
||||
- fix: 修复`setAttribute is not a function`
|
||||
## 0.6.9(2023-04-15)
|
||||
- chore: 更新文档,vue3请使用echarts esm的包
|
||||
## 0.6.8(2023-03-22)
|
||||
- feat: mac pc无法使用canvas 2d
|
||||
## 0.6.7(2023-03-17)
|
||||
- feat: 更新文档
|
||||
## 0.6.6(2023-03-17)
|
||||
- feat: 微信小程序PC已经支持canvas 2d,故去掉判断PC
|
||||
## 0.6.5(2022-11-03)
|
||||
- fix: 某些手机touches为对象,导致无法交互。
|
||||
## 0.6.4(2022-10-28)
|
||||
- fix: 优化点击事件的触发条件
|
||||
## 0.6.3(2022-10-26)
|
||||
- fix: 修复 dataZoom 拖动问题
|
||||
## 0.6.2(2022-10-23)
|
||||
- fix: 修复 飞书小程序 尺寸问题
|
||||
## 0.6.1(2022-10-19)
|
||||
- fix: 修复 PC mousewheel 事件 鼠标位置不准确的BUG,不兼容火狐!
|
||||
- feat: showLoading 增加传参
|
||||
## 0.6.0(2022-09-16)
|
||||
- feat: 增加PC的mousewheel事件
|
||||
## 0.5.4(2022-09-16)
|
||||
- fix: 修复 nvue 动态数据不显示问题
|
||||
## 0.5.3(2022-09-16)
|
||||
- feat: 增加enableHover属性, 在PC端时当鼠标进入显示tooltip,不必按下。
|
||||
- chore: 更新文档
|
||||
## 0.5.2(2022-09-16)
|
||||
- feat: 增加enableHover属性, 在PC端时当鼠标进入显示tooltip,不必按下。
|
||||
## 0.5.1(2022-09-16)
|
||||
- fix: 修复nvue报错
|
||||
## 0.5.0(2022-09-15)
|
||||
- feat: init(echarts, theme?:string, opts?:{}, callback: function(chart))
|
||||
## 0.4.8(2022-09-11)
|
||||
- feat: 增加 @finished
|
||||
## 0.4.7(2022-08-24)
|
||||
- chore: 去掉 stylus
|
||||
## 0.4.6(2022-08-24)
|
||||
- feat: 增加 beforeDelay
|
||||
## 0.4.5(2022-08-12)
|
||||
- chore: 更新文档
|
||||
## 0.4.4(2022-08-12)
|
||||
- fix: 修复 resize 无参数时报错
|
||||
## 0.4.3(2022-08-07)
|
||||
# 评论有说本插件对新手不友好,让我做不好就不要发出来。 还有的说跟官网一样,发出来做什么,给我整无语了。
|
||||
# 所以在此提醒一下准备要下载的你,如果你从未使用过 echarts 请不要下载 或 谨慎下载。
|
||||
# 如果你确认要下载,麻烦看完文档。还有请注意插件是让echarts在uniapp能运行,API 配置请自行去官网查阅!
|
||||
# 如果你不会echarts 但又需要图表,市场上有个很优秀的图表插件 uchart 你可以去使用这款插件,uchart的作者人很好,也热情。
|
||||
# 每个人都有自己的本职工作,如果你能力强可以自行兼容,如果使用了他人的插件也麻烦尊重他人的成果和劳动时间。谢谢。
|
||||
# 为了心情愉悦,本人已经使用插件屏蔽差评。
|
||||
- chore: 更新文档
|
||||
## 0.4.2(2022-07-20)
|
||||
- feat: 增加 resize
|
||||
## 0.4.1(2022-06-07)
|
||||
- fix: 修复 canvasToTempFilePath 不生效问题
|
||||
## 0.4.0(2022-06-04)
|
||||
- chore 为了词云 增加一个canvas 标签
|
||||
- 词云下载地址[echart-wordcloud](https://ext.dcloud.net.cn/plugin?id=8430)
|
||||
## 0.3.9(2022-06-02)
|
||||
- chore: 更新文档
|
||||
- tips: lines 不支持 `trailLength`
|
||||
## 0.3.8(2022-05-31)
|
||||
- fix: 修复 因mouse事件冲突tooltip跳动问题
|
||||
## 0.3.7(2022-05-26)
|
||||
- chore: 更新文档
|
||||
- chore: 设置默认宽高300px
|
||||
- fix: 修复 vue3 微信小程序 拖影BUG
|
||||
- chore: 支持PC
|
||||
## 0.3.5(2022-04-28)
|
||||
- chore: 更新使用方式
|
||||
- 🔔 必须使用hbuilderx 3.4.8-alpha以上
|
||||
## 0.3.4(2021-08-03)
|
||||
- chore: 增加 setOption的参数值
|
||||
## 0.3.3(2021-07-22)
|
||||
- fix: 修复 径向渐变报错的问题
|
||||
## 0.3.2(2021-07-09)
|
||||
- chore: 统一命名规范,无须主动引入组件
|
||||
## [代码示例站点1](https://limeui.qcoon.cn/#/echart-example)
|
||||
## [代码示例站点2](http://liangei.gitee.io/limeui/#/echart-example)
|
||||
## 0.3.1(2021-06-21)
|
||||
- fix: 修复 app-nvue ios is-enable 无效的问题
|
||||
## [代码示例站点1](https://limeui.qcoon.cn/#/echart-example)
|
||||
## [代码示例站点2](http://liangei.gitee.io/limeui/#/echart-example)
|
||||
## 0.3.0(2021-06-14)
|
||||
- fix: 修复 头条系小程序 2d 报 JSON.stringify 的问题
|
||||
- 目前 头条系小程序 2d 无法在开发工具上预览,划动图表页面无法滚动,axisLabel 字体颜色无法更改,建议使用非2d。
|
||||
## 0.2.9(2021-06-06)
|
||||
- fix: 修复 头条系小程序 2d 放大的BUG
|
||||
- 头条系小程序 2d 无法在开发工具上预览,也存在划动图表页面无法滚动的问题。
|
||||
## [代码示例:http://liangei.gitee.io/limeui/#/echart-example](http://liangei.gitee.io/limeui/#/echart-example)
|
||||
## 0.2.8(2021-05-19)
|
||||
- fix: 修复 微信小程序 PC 显示过大的问题
|
||||
## 0.2.7(2021-05-19)
|
||||
- fix: 修复 微信小程序 PC 不显示问题
|
||||
## [代码示例:http://liangei.gitee.io/limeui/#/echart-example](http://liangei.gitee.io/limeui/#/echart-example)
|
||||
## 0.2.6(2021-05-14)
|
||||
- feat: 支持 `image`
|
||||
- feat: props 增加 `ec.clear`,更新时是否先删除图表样式
|
||||
- feat: props 增加 `isDisableScroll` ,触摸图表时是否禁止页面滚动
|
||||
- feat: props 增加 `webviewStyles` ,webview 的样式, 仅nvue有效
|
||||
## 0.2.5(2021-05-13)
|
||||
- docs: 插件用到了css 预编译器 [stylus](https://ext.dcloud.net.cn/plugin?name=compile-stylus) 请安装它
|
||||
## 0.2.4(2021-05-12)
|
||||
- fix: 修复 百度平台 多个图表ctx 和 渐变色 bug
|
||||
- ## [代码示例:http://liangei.gitee.io/limeui/#/echart-example](http://liangei.gitee.io/limeui/#/echart-example)
|
||||
## 0.2.3(2021-05-10)
|
||||
- feat: 增加 `canvasToTempFilePath` 方法,用于生成图片
|
||||
```js
|
||||
this.$refs.chart.canvasToTempFilePath({success: (res) => {
|
||||
console.log('tempFilePath:', res.tempFilePath)
|
||||
}})
|
||||
```
|
||||
## 0.2.2(2021-05-10)
|
||||
- feat: 增加 `dispose` 方法,用于销毁实例
|
||||
- feat: 增加 `isClickable` 是否派发点击
|
||||
- feat: 实验性的支持 `nvue` 使用要慎重考虑
|
||||
- ## [代码示例:http://liangei.gitee.io/limeui/#/echart-example](http://liangei.gitee.io/limeui/#/echart-example)
|
||||
## 0.2.1(2021-05-06)
|
||||
- fix:修复 微信小程序 json 报错
|
||||
- chore: `reset` 更改为 `setChart`
|
||||
- feat: 增加 `isEnable` 开启初始化 启用这个后 无须再使用`init`方法
|
||||
```html
|
||||
<l-echart ref="chart" is-enable />
|
||||
```
|
||||
```js
|
||||
// 显示加载
|
||||
this.$refs.chart.showLoading()
|
||||
// 使用实例回调
|
||||
this.$refs.chart.setChart(chart => ...code)
|
||||
// 直接设置图表配置
|
||||
this.$refs.chart.setOption(data)
|
||||
```
|
||||
## 0.2.0(2021-05-05)
|
||||
- fix:修复 头条 百度 偏移的问题
|
||||
- docs: 更新文档
|
||||
## [代码示例:http://liangei.gitee.io/limeui/#/echart-example](http://liangei.gitee.io/limeui/#/echart-example)
|
||||
## 0.1.0(2021-05-02)
|
||||
- chore: 第一次上传,基本全端兼容,使用方法与官网一致。
|
||||
- 已知BUG:非2d 无法使用背景色,已反馈官方
|
||||
- 已知BUG:头条 百度 有许些偏移
|
||||
- 后期计划:兼容nvue
|
|
@ -0,0 +1,399 @@
|
|||
import {getDeviceInfo} from './utils';
|
||||
|
||||
const cacheChart = {}
|
||||
const fontSizeReg = /([\d\.]+)px/;
|
||||
class EventEmit {
|
||||
constructor() {
|
||||
this.__events = {};
|
||||
}
|
||||
on(type, listener) {
|
||||
if (!type || !listener) {
|
||||
return;
|
||||
}
|
||||
const events = this.__events[type] || [];
|
||||
events.push(listener);
|
||||
this.__events[type] = events;
|
||||
}
|
||||
emit(type, e) {
|
||||
if (type.constructor === Object) {
|
||||
e = type;
|
||||
type = e && e.type;
|
||||
}
|
||||
if (!type) {
|
||||
return;
|
||||
}
|
||||
const events = this.__events[type];
|
||||
if (!events || !events.length) {
|
||||
return;
|
||||
}
|
||||
events.forEach((listener) => {
|
||||
listener.call(this, e);
|
||||
});
|
||||
}
|
||||
off(type, listener) {
|
||||
const __events = this.__events;
|
||||
const events = __events[type];
|
||||
if (!events || !events.length) {
|
||||
return;
|
||||
}
|
||||
if (!listener) {
|
||||
delete __events[type];
|
||||
return;
|
||||
}
|
||||
for (let i = 0, len = events.length; i < len; i++) {
|
||||
if (events[i] === listener) {
|
||||
events.splice(i, 1);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
class Image {
|
||||
constructor() {
|
||||
this.currentSrc = null
|
||||
this.naturalHeight = 0
|
||||
this.naturalWidth = 0
|
||||
this.width = 0
|
||||
this.height = 0
|
||||
this.tagName = 'IMG'
|
||||
}
|
||||
set src(src) {
|
||||
this.currentSrc = src
|
||||
uni.getImageInfo({
|
||||
src,
|
||||
success: (res) => {
|
||||
this.naturalWidth = this.width = res.width
|
||||
this.naturalHeight = this.height = res.height
|
||||
this.onload()
|
||||
},
|
||||
fail: () => {
|
||||
this.onerror()
|
||||
}
|
||||
})
|
||||
}
|
||||
get src() {
|
||||
return this.currentSrc
|
||||
}
|
||||
}
|
||||
class OffscreenCanvas {
|
||||
constructor(ctx, com, canvasId) {
|
||||
this.tagName = 'canvas'
|
||||
this.com = com
|
||||
this.canvasId = canvasId
|
||||
this.ctx = ctx
|
||||
}
|
||||
set width(w) {
|
||||
this.com.offscreenWidth = w
|
||||
}
|
||||
set height(h) {
|
||||
this.com.offscreenHeight = h
|
||||
}
|
||||
get width() {
|
||||
return this.com.offscreenWidth || 0
|
||||
}
|
||||
get height() {
|
||||
return this.com.offscreenHeight || 0
|
||||
}
|
||||
getContext(type) {
|
||||
return this.ctx
|
||||
}
|
||||
getImageData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.com.$nextTick(() => {
|
||||
uni.canvasGetImageData({
|
||||
x:0,
|
||||
y:0,
|
||||
width: this.com.offscreenWidth,
|
||||
height: this.com.offscreenHeight,
|
||||
canvasId: this.canvasId,
|
||||
success: (res) => {
|
||||
resolve(res)
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err)
|
||||
},
|
||||
}, this.com)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
export class Canvas {
|
||||
constructor(ctx, com, isNew, canvasNode={}) {
|
||||
cacheChart[com.canvasId] = {ctx}
|
||||
this.canvasId = com.canvasId;
|
||||
this.chart = null;
|
||||
this.isNew = isNew
|
||||
this.tagName = 'canvas'
|
||||
this.canvasNode = canvasNode;
|
||||
this.com = com;
|
||||
if (!isNew) {
|
||||
this._initStyle(ctx)
|
||||
}
|
||||
this._initEvent();
|
||||
this._ee = new EventEmit()
|
||||
}
|
||||
getContext(type) {
|
||||
if (type === '2d') {
|
||||
return this.ctx;
|
||||
}
|
||||
}
|
||||
setAttribute(key, value) {
|
||||
if(key === 'aria-label') {
|
||||
this.com['ariaLabel'] = value
|
||||
}
|
||||
}
|
||||
setChart(chart) {
|
||||
this.chart = chart;
|
||||
}
|
||||
createOffscreenCanvas(param){
|
||||
if(!this.children) {
|
||||
this.com.isOffscreenCanvas = true
|
||||
this.com.offscreenWidth = param.width||300
|
||||
this.com.offscreenHeight = param.height||300
|
||||
const com = this.com
|
||||
const canvasId = this.com.offscreenCanvasId
|
||||
const context = uni.createCanvasContext(canvasId, this.com)
|
||||
this._initStyle(context)
|
||||
this.children = new OffscreenCanvas(context, com, canvasId)
|
||||
}
|
||||
return this.children
|
||||
}
|
||||
appendChild(child) {
|
||||
console.log('child', child)
|
||||
}
|
||||
dispatchEvent(type, e) {
|
||||
if(typeof type == 'object') {
|
||||
this._ee.emit(type.type, type);
|
||||
} else {
|
||||
this._ee.emit(type, e);
|
||||
}
|
||||
return true
|
||||
}
|
||||
attachEvent() {
|
||||
}
|
||||
detachEvent() {
|
||||
}
|
||||
addEventListener(type, listener) {
|
||||
this._ee.on(type, listener)
|
||||
}
|
||||
removeEventListener(type, listener) {
|
||||
this._ee.off(type, listener)
|
||||
}
|
||||
_initCanvas(zrender, ctx) {
|
||||
// zrender.util.getContext = function() {
|
||||
// return ctx;
|
||||
// };
|
||||
// zrender.util.$override('measureText', function(text, font) {
|
||||
// ctx.font = font || '12px sans-serif';
|
||||
// return ctx.measureText(text, font);
|
||||
// });
|
||||
}
|
||||
_initStyle(ctx, child) {
|
||||
const styles = [
|
||||
'fillStyle',
|
||||
'strokeStyle',
|
||||
'fontSize',
|
||||
'globalAlpha',
|
||||
'opacity',
|
||||
'textAlign',
|
||||
'textBaseline',
|
||||
'shadow',
|
||||
'lineWidth',
|
||||
'lineCap',
|
||||
'lineJoin',
|
||||
'lineDash',
|
||||
'miterLimit',
|
||||
// #ifdef H5
|
||||
'font',
|
||||
// #endif
|
||||
];
|
||||
const colorReg = /#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])\b/g;
|
||||
styles.forEach(style => {
|
||||
Object.defineProperty(ctx, style, {
|
||||
set: value => {
|
||||
// #ifdef H5
|
||||
if (style === 'font' && fontSizeReg.test(value)) {
|
||||
const match = fontSizeReg.exec(value);
|
||||
ctx.setFontSize(match[1]);
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
|
||||
if (style === 'opacity') {
|
||||
ctx.setGlobalAlpha(value)
|
||||
return;
|
||||
}
|
||||
if (style !== 'fillStyle' && style !== 'strokeStyle' || value !== 'none' && value !== null) {
|
||||
// #ifdef H5 || APP-PLUS || MP-BAIDU
|
||||
if(typeof value == 'object') {
|
||||
if (value.hasOwnProperty('colorStop') || value.hasOwnProperty('colors')) {
|
||||
ctx['set' + style.charAt(0).toUpperCase() + style.slice(1)](value);
|
||||
}
|
||||
return
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-TOUTIAO
|
||||
if(colorReg.test(value)) {
|
||||
value = value.replace(colorReg, '#$1$1$2$2$3$3')
|
||||
}
|
||||
// #endif
|
||||
ctx['set' + style.charAt(0).toUpperCase() + style.slice(1)](value);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
if(!this.isNew && !child) {
|
||||
ctx.uniDrawImage = ctx.drawImage
|
||||
ctx.drawImage = (...a) => {
|
||||
a[0] = a[0].src
|
||||
ctx.uniDrawImage(...a)
|
||||
}
|
||||
}
|
||||
if(!ctx.createRadialGradient) {
|
||||
ctx.createRadialGradient = function() {
|
||||
return ctx.createCircularGradient(...[...arguments].slice(-3))
|
||||
};
|
||||
}
|
||||
// 字节不支持
|
||||
if (!ctx.strokeText) {
|
||||
ctx.strokeText = (...a) => {
|
||||
ctx.fillText(...a)
|
||||
}
|
||||
}
|
||||
|
||||
// 钉钉不支持 , 鸿蒙是异步
|
||||
if (!ctx.measureText || getDeviceInfo().osName == 'harmonyos') {
|
||||
ctx._measureText = ctx.measureText
|
||||
const strLen = (str) => {
|
||||
let len = 0;
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
|
||||
len++;
|
||||
} else {
|
||||
len += 2;
|
||||
}
|
||||
}
|
||||
return len;
|
||||
}
|
||||
ctx.measureText = (text, font) => {
|
||||
let fontSize = ctx?.state?.fontSize || 12;
|
||||
if (font) {
|
||||
fontSize = parseInt(font.match(/([\d\.]+)px/)[1])
|
||||
}
|
||||
fontSize /= 2;
|
||||
let isBold = fontSize >= 16;
|
||||
const widthFactor = isBold ? 1.3 : 1;
|
||||
// ctx._measureText(text, (res) => {})
|
||||
return {
|
||||
width: strLen(text) * fontSize * widthFactor
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_initEvent(e) {
|
||||
this.event = {};
|
||||
const eventNames = [{
|
||||
wxName: 'touchStart',
|
||||
ecName: 'mousedown'
|
||||
}, {
|
||||
wxName: 'touchMove',
|
||||
ecName: 'mousemove'
|
||||
}, {
|
||||
wxName: 'touchEnd',
|
||||
ecName: 'mouseup'
|
||||
}, {
|
||||
wxName: 'touchEnd',
|
||||
ecName: 'click'
|
||||
}];
|
||||
|
||||
eventNames.forEach(name => {
|
||||
this.event[name.wxName] = e => {
|
||||
const touch = e.touches[0];
|
||||
this.chart.getZr().handler.dispatch(name.ecName, {
|
||||
zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
|
||||
zrY: name.wxName === 'tap' ? touch.clientY : touch.y
|
||||
});
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
set width(w) {
|
||||
this.canvasNode.width = w
|
||||
}
|
||||
set height(h) {
|
||||
this.canvasNode.height = h
|
||||
}
|
||||
|
||||
get width() {
|
||||
return this.canvasNode.width || 0
|
||||
}
|
||||
get height() {
|
||||
return this.canvasNode.height || 0
|
||||
}
|
||||
get ctx() {
|
||||
return cacheChart[this.canvasId]['ctx'] || null
|
||||
}
|
||||
set chart(chart) {
|
||||
cacheChart[this.canvasId]['chart'] = chart
|
||||
}
|
||||
get chart() {
|
||||
return cacheChart[this.canvasId]['chart'] || null
|
||||
}
|
||||
}
|
||||
|
||||
export function dispatch(name, {x,y, wheelDelta}) {
|
||||
this.dispatch(name, {
|
||||
zrX: x,
|
||||
zrY: y,
|
||||
zrDelta: wheelDelta,
|
||||
preventDefault: () => {},
|
||||
stopPropagation: () =>{}
|
||||
});
|
||||
}
|
||||
export function setCanvasCreator(echarts, {canvas, node}) {
|
||||
if(echarts && !echarts.registerPreprocessor) {
|
||||
return console.warn('echarts 版本不对或未传入echarts,vue3请使用esm格式')
|
||||
}
|
||||
echarts.registerPreprocessor(option => {
|
||||
if (option && option.series) {
|
||||
if (option.series.length > 0) {
|
||||
option.series.forEach(series => {
|
||||
series.progressive = 0;
|
||||
});
|
||||
} else if (typeof option.series === 'object') {
|
||||
option.series.progressive = 0;
|
||||
}
|
||||
}
|
||||
});
|
||||
function loadImage(src, onload, onerror) {
|
||||
let img = null
|
||||
if(node && node.createImage) {
|
||||
img = node.createImage()
|
||||
img.onload = onload.bind(img);
|
||||
img.onerror = onerror.bind(img);
|
||||
img.src = src;
|
||||
return img
|
||||
} else {
|
||||
img = new Image()
|
||||
img.onload = onload.bind(img)
|
||||
img.onerror = onerror.bind(img);
|
||||
img.src = src
|
||||
return img
|
||||
}
|
||||
}
|
||||
if(echarts.setPlatformAPI) {
|
||||
echarts.setPlatformAPI({
|
||||
loadImage: canvas.setChart ? loadImage : null,
|
||||
createCanvas(){
|
||||
const key = 'createOffscreenCanvas'
|
||||
return uni.canIUse(key) && uni[key] ? uni[key]({type: '2d'}) : canvas
|
||||
}
|
||||
})
|
||||
} else if(echarts.setCanvasCreator) {
|
||||
echarts.setCanvasCreator(() => {
|
||||
return canvas;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,347 @@
|
|||
<template>
|
||||
<!-- #ifdef APP -->
|
||||
<web-view class="lime-echart" ref="chartRef" @load="loaded" :style="[customStyle]" :webview-styles="[webviewStyles]"
|
||||
src="/uni_modules/lime-echart/static/uvue.html?v=10112">
|
||||
</web-view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<div class="lime-echart" ref="chartRef"></div>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef H5 || APP-->
|
||||
<view class="lime-echart">
|
||||
<canvas style="width:100%; height:100%" v-if="canvasid" :id="canvasid" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script lang="uts" setup>
|
||||
// @ts-nocheck
|
||||
import { getCurrentInstance, nextTick } from "vue";
|
||||
import { Echarts } from './uvue';
|
||||
// #ifdef WEB
|
||||
import { dispatch } from './canvas';
|
||||
// #endif
|
||||
// #ifndef APP || WEB
|
||||
import { Canvas, setCanvasCreator, dispatch } from './canvas';
|
||||
import { wrapTouch, convertTouchesToArray, devicePixelRatio, sleep, canIUseCanvas2d, getRect } from './utils';
|
||||
// #endif
|
||||
type EchartsResolve = (value : Echarts) => void
|
||||
defineOptions({
|
||||
name: 'l-echart'
|
||||
})
|
||||
const emits = defineEmits(['finished'])
|
||||
const props = defineProps({
|
||||
// #ifdef APP
|
||||
webviewStyles: {
|
||||
type: Object
|
||||
},
|
||||
customStyle: {
|
||||
type: Object
|
||||
},
|
||||
// #endif
|
||||
// #ifndef APP
|
||||
webviewStyles: {
|
||||
type: Object
|
||||
},
|
||||
customStyle: {
|
||||
type: [String, Object]
|
||||
},
|
||||
// #endif
|
||||
isDisableScroll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
isClickable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
enableHover: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
beforeDelay: {
|
||||
type: Number,
|
||||
default: 30
|
||||
}
|
||||
})
|
||||
const instance = getCurrentInstance()!;
|
||||
const canvasid = `lime-echart-${instance.uid}`
|
||||
const finished = ref(false)
|
||||
const map = [] as EchartsResolve[]
|
||||
const callbackMap = [] as EchartsResolve[]
|
||||
// let context = null as UniWebViewElement | null
|
||||
let chart = null as Echarts | null
|
||||
let chartRef = ref<UniWebViewElement | null>(null)
|
||||
|
||||
const trigger = () => {
|
||||
// #ifdef APP
|
||||
if (finished.value) {
|
||||
if (chart == null) {
|
||||
chart = new Echarts(chartRef.value!)
|
||||
}
|
||||
while (map.length > 0) {
|
||||
const resolve = map.pop() as EchartsResolve
|
||||
resolve(chart!)
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
// #ifndef APP
|
||||
while (map.length > 0) {
|
||||
if (chart != null) {
|
||||
const resolve = map.pop() as EchartsResolve
|
||||
resolve(chart!)
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
||||
if (chart != null) {
|
||||
while (callbackMap.length > 0) {
|
||||
const callback = callbackMap.pop() as EchartsResolve
|
||||
callback(chart!)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// #ifdef APP
|
||||
const loaded = (event : UniWebViewLoadEvent) => {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
finished.value = true
|
||||
trigger()
|
||||
emits('finished')
|
||||
}
|
||||
// #endif
|
||||
|
||||
|
||||
const _next = () : boolean => {
|
||||
if (chart == null) {
|
||||
console.warn(`组件还未初始化,请先使用 init`)
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
const setOption = (option : UTSJSONObject) => {
|
||||
if (_next()) return
|
||||
chart!.setOption(option);
|
||||
}
|
||||
const showLoading = () => {
|
||||
if (_next()) return
|
||||
chart!.showLoading();
|
||||
}
|
||||
const hideLoading = () => {
|
||||
if (_next()) return
|
||||
chart!.hideLoading();
|
||||
}
|
||||
const clear = () => {
|
||||
if (_next()) return
|
||||
chart!.clear();
|
||||
}
|
||||
const dispose = () => {
|
||||
if (_next()) return
|
||||
chart!.dispose();
|
||||
}
|
||||
const resize = (size : UTSJSONObject) => {
|
||||
if (_next()) return
|
||||
chart!.resize(size);
|
||||
}
|
||||
const canvasToTempFilePath = (opt : UTSJSONObject) => {
|
||||
if (_next()) return
|
||||
chart!.canvasToTempFilePath(opt);
|
||||
}
|
||||
|
||||
// #ifdef APP
|
||||
function init(callback : ((chart : Echarts) => void) | null) : Promise<Echarts> {
|
||||
|
||||
if (callback != null) {
|
||||
callbackMap.push(callback)
|
||||
}
|
||||
return new Promise<Echarts>((resolve) => {
|
||||
map.push(resolve)
|
||||
trigger()
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
// #ifndef APP
|
||||
// #ifndef WEB
|
||||
let use2dCanvas = canIUseCanvas2d()
|
||||
const getContext = async () => {
|
||||
return new Promise((resolve, reject)=>{
|
||||
uni.createCanvasContextAsync({
|
||||
id: canvasid,
|
||||
component: instance.proxy!,
|
||||
success: (context : CanvasContext) => {
|
||||
const canvasContext = context.getContext('2d')!;
|
||||
const canvas = canvasContext.canvas;
|
||||
let uniCanvas;
|
||||
const width = canvas.offsetWidth
|
||||
const height = canvas.offsetHeight
|
||||
// 处理高清屏逻辑
|
||||
const dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;
|
||||
canvas.width = canvas.offsetWidth * dpr;
|
||||
canvas.height = canvas.offsetHeight * dpr;
|
||||
canvasContext.scale(dpr, dpr); // 仅需调用一次,当调用 reset 方法后需要再次 scale
|
||||
if(use2dCanvas) {
|
||||
uniCanvas = new Canvas(canvasContext, instance.proxy, true, context);
|
||||
} else {
|
||||
uniCanvas = new Canvas(canvasContext, instance.proxy, false);
|
||||
}
|
||||
resolve({ canvas: uniCanvas, width, height, devicePixelRatio: 1, node: context});
|
||||
},
|
||||
fail(err) {
|
||||
reject(err)
|
||||
console.log('err', err)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
// return getRect(`#${canvasid}`, {context: instance.proxy!, type: use2dCanvas ? 'fields': 'boundingClientRect'}).then(res => {
|
||||
// if(res) {
|
||||
// let dpr = uni.getWindowInfo().pixelRatio
|
||||
// let {width, height, node} = res
|
||||
// let canvas;
|
||||
// if(node) {
|
||||
// const ctx = node.getContext('2d');
|
||||
// canvas = new Canvas(ctx, instance.proxy, true, node);
|
||||
// } else {
|
||||
// const ctx = uni.createCanvasContext(canvasid, instance.proxy);
|
||||
// canvas = new Canvas(ctx, instance.proxy, false);
|
||||
// }
|
||||
|
||||
// return { canvas, width, height, devicePixelRatio: dpr, node };
|
||||
// } else {
|
||||
// return {}
|
||||
// }
|
||||
// })
|
||||
}
|
||||
// #endif
|
||||
const getTouch = (e) => {
|
||||
const touches = e.touches[0]
|
||||
// #ifdef WEB
|
||||
const rect = chart!.getZr().dom.getBoundingClientRect();
|
||||
const touch = {
|
||||
x: touches.clientX - rect.left,
|
||||
y: touches.clientY - rect.top
|
||||
}
|
||||
// #endif
|
||||
// #ifndef WEB
|
||||
const touch = {
|
||||
x: touches.x,
|
||||
y: touches.y
|
||||
}
|
||||
// #endif
|
||||
return touch
|
||||
}
|
||||
const touchstart = (e) => {
|
||||
if (chart == null) return
|
||||
const handler = chart.getZr().handler;
|
||||
const touch = getTouch(e)
|
||||
dispatch.call(handler, 'mousedown', touch)
|
||||
dispatch.call(handler, 'click', touch)
|
||||
}
|
||||
const touchmove = (e) => {
|
||||
if (chart == null) return
|
||||
const handler = chart.getZr().handler;
|
||||
const touch = getTouch(e)
|
||||
dispatch.call(handler, 'mousemove', touch)
|
||||
// const rect = chart.getZr().dom.getBoundingClientRect()
|
||||
// handler.dispatch('mousemove', {
|
||||
// zrX: e.touches[0].clientX - rect.left,
|
||||
// zrY: e.touches[0].clientY - rect.top
|
||||
// })
|
||||
}
|
||||
const touchend = (e) => {
|
||||
if (chart == null) return
|
||||
const handler = chart.getZr().handler;
|
||||
|
||||
const touch = {
|
||||
x: 999999999,
|
||||
y: 999999999
|
||||
}
|
||||
|
||||
dispatch.call(handler, 'mousemove', touch)
|
||||
dispatch.call(handler, 'touchend', touch)
|
||||
|
||||
}
|
||||
async function init(echarts : any, ...args : any[]) : Promise<Echarts> {
|
||||
if (echarts == null) {
|
||||
console.error('请确保已经引入了 ECharts 库');
|
||||
return Promise.reject('请确保已经引入了 ECharts 库');
|
||||
}
|
||||
let theme : string | null = null
|
||||
let opts = {}
|
||||
let callback : Function | null = null;
|
||||
|
||||
args.forEach(item => {
|
||||
if (typeof item === 'function') {
|
||||
callback = item
|
||||
} else if (['string'].includes(typeof item)) {
|
||||
theme = item
|
||||
} else if (typeof item === 'object') {
|
||||
opts = item
|
||||
}
|
||||
})
|
||||
|
||||
// #ifdef WEB
|
||||
echarts.env.domSupported = true
|
||||
echarts.env.hasGlobalWindow = true
|
||||
echarts.env.node = false
|
||||
echarts.env.pointerEventsSupported = false
|
||||
echarts.env.svgSupported = true
|
||||
echarts.env.touchEventsSupported = true
|
||||
echarts.env.transform3dSupported = true
|
||||
echarts.env.transformSupported = true
|
||||
echarts.env.worker = false
|
||||
echarts.env.wxa = false
|
||||
chart = echarts.init(chartRef.value, theme, opts)
|
||||
// window.addEventListener('touchstart', touchstart)
|
||||
// window.addEventListener('touchmove', touchmove)
|
||||
// window.addEventListener('touchend', touchend)
|
||||
// #endif
|
||||
|
||||
// #ifndef WEB
|
||||
let config = await getContext();
|
||||
setCanvasCreator(echarts, config)
|
||||
chart = echarts.init(config.canvas, theme, Object.assign({}, config, opts))
|
||||
// #endif
|
||||
if (callback != null && typeof callback == 'function') {
|
||||
callbackMap.push(callback)
|
||||
}
|
||||
return new Promise<Echarts>((resolve) => {
|
||||
map.push(resolve)
|
||||
trigger()
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
finished.value = true
|
||||
trigger()
|
||||
emits('finished')
|
||||
})
|
||||
})
|
||||
onUnmounted(() => {
|
||||
// #ifdef WEB
|
||||
// window.removeEventListener('touchstart', touchstart)
|
||||
// window.removeEventListener('touchmove', touchmove)
|
||||
// window.removeEventListener('touchend', touchend)
|
||||
// #endif
|
||||
})
|
||||
// #endif
|
||||
|
||||
defineExpose({
|
||||
init,
|
||||
setOption,
|
||||
showLoading,
|
||||
hideLoading,
|
||||
clear,
|
||||
dispose,
|
||||
resize,
|
||||
canvasToTempFilePath
|
||||
})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.lime-echart {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,514 @@
|
|||
<template>
|
||||
<view class="lime-echart" :style="[customStyle]" v-if="canvasId" ref="limeEchart" :aria-label="ariaLabel">
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<canvas
|
||||
class="lime-echart__canvas"
|
||||
v-if="use2dCanvas"
|
||||
type="2d"
|
||||
:id="canvasId"
|
||||
:style="canvasStyle"
|
||||
:disable-scroll="isDisableScroll"
|
||||
@touchstart="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd"
|
||||
/>
|
||||
<canvas
|
||||
class="lime-echart__canvas"
|
||||
v-else
|
||||
:width="nodeWidth"
|
||||
:height="nodeHeight"
|
||||
:style="canvasStyle"
|
||||
:canvas-id="canvasId"
|
||||
:id="canvasId"
|
||||
:disable-scroll="isDisableScroll"
|
||||
@touchstart="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd"
|
||||
/>
|
||||
<view class="lime-echart__mask"
|
||||
v-if="isPC"
|
||||
@mousedown="touchStart"
|
||||
@mousemove="touchMove"
|
||||
@mouseup="touchEnd"
|
||||
@touchstart="touchStart"
|
||||
@touchmove="touchMove"
|
||||
@touchend="touchEnd">
|
||||
</view>
|
||||
<canvas v-if="isOffscreenCanvas" :style="offscreenStyle" :canvas-id="offscreenCanvasId"></canvas>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<web-view
|
||||
class="lime-echart__canvas"
|
||||
:id="canvasId"
|
||||
:style="canvasStyle"
|
||||
:webview-styles="webviewStyles"
|
||||
ref="webview"
|
||||
src="/uni_modules/lime-echart/static/uvue.html?v=1"
|
||||
@pagefinish="finished = true"
|
||||
@onPostMessage="onMessage"
|
||||
></web-view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ts-nocheck
|
||||
// #ifndef APP-NVUE
|
||||
import {Canvas, setCanvasCreator, dispatch} from './canvas';
|
||||
import {wrapTouch, convertTouchesToArray, devicePixelRatio ,sleep, canIUseCanvas2d, getRect, getDeviceInfo} from './utils';
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
import { base64ToPath, sleep } from './utils';
|
||||
import {Echarts} from './nvue'
|
||||
// #endif
|
||||
|
||||
/**
|
||||
* LimeChart 图表
|
||||
* @description 全端兼容的eCharts
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=4899
|
||||
|
||||
* @property {String} customStyle 自定义样式
|
||||
* @property {String} type 指定 canvas 类型
|
||||
* @value 2d 使用canvas 2d,部分小程序支持
|
||||
* @value '' 使用原生canvas,会有层级问题
|
||||
* @value bottom right 不缩放图片,只显示图片的右下边区域
|
||||
* @property {Boolean} isDisableScroll
|
||||
* @property {number} beforeDelay = [30] 延迟初始化 (毫秒)
|
||||
* @property {Boolean} enableHover PC端使用鼠标悬浮
|
||||
|
||||
* @event {Function} finished 加载完成触发
|
||||
*/
|
||||
export default {
|
||||
name: 'lime-echart',
|
||||
props: {
|
||||
// #ifdef MP-WEIXIN || MP-TOUTIAO
|
||||
type: {
|
||||
type: String,
|
||||
default: '2d'
|
||||
},
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
webviewStyles: Object,
|
||||
// hybrid: Boolean,
|
||||
// #endif
|
||||
customStyle: String,
|
||||
isDisableScroll: Boolean,
|
||||
isClickable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
enableHover: Boolean,
|
||||
beforeDelay: {
|
||||
type: Number,
|
||||
default: 30
|
||||
},
|
||||
landscape: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
|
||||
use2dCanvas: true,
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
|
||||
use2dCanvas: false,
|
||||
// #endif
|
||||
ariaLabel: '图表',
|
||||
width: null,
|
||||
height: null,
|
||||
nodeWidth: null,
|
||||
nodeHeight: null,
|
||||
// canvasNode: null,
|
||||
config: {},
|
||||
inited: false,
|
||||
finished: false,
|
||||
file: '',
|
||||
platform: '',
|
||||
isPC: false,
|
||||
isDown: false,
|
||||
isOffscreenCanvas: false,
|
||||
offscreenWidth: 0,
|
||||
offscreenHeight: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
rootStyle() {
|
||||
if(this.landscape) {
|
||||
return `transform: translate(-50%,-50%) rotate(90deg); top:50%; left:50%;`
|
||||
}
|
||||
},
|
||||
canvasId() {
|
||||
return `lime-echart${this._ && this._.uid || this._uid}`
|
||||
},
|
||||
offscreenCanvasId() {
|
||||
return `${this.canvasId}_offscreen`
|
||||
},
|
||||
offscreenStyle() {
|
||||
return `width:${this.offscreenWidth}px;height: ${this.offscreenHeight}px; position: fixed; left: 99999px; background: red`
|
||||
},
|
||||
canvasStyle() {
|
||||
return this.rootStyle + (this.width && this.height ? ('width:' + this.width + 'px;height:' + this.height + 'px') : '')
|
||||
}
|
||||
},
|
||||
// #ifndef VUE3
|
||||
beforeDestroy() {
|
||||
this.clear()
|
||||
this.dispose()
|
||||
// #ifdef H5
|
||||
if(this.isPC) {
|
||||
document.removeEventListener('mousewheel', this.mousewheel)
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
beforeUnmount() {
|
||||
this.clear()
|
||||
this.dispose()
|
||||
// #ifdef H5
|
||||
if(this.isPC) {
|
||||
document.removeEventListener('mousewheel', this.mousewheel)
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
// #endif
|
||||
created() {
|
||||
// #ifdef H5
|
||||
if(!('ontouchstart' in window)) {
|
||||
this.isPC = true
|
||||
document.addEventListener('mousewheel', this.mousewheel)
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY
|
||||
const { platform } = getDeviceInfo();
|
||||
this.isPC = /windows/i.test(platform)
|
||||
// #endif
|
||||
this.use2dCanvas = this.type === '2d' && canIUseCanvas2d()
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.$emit('finished')
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// #ifdef APP-NVUE
|
||||
onMessage(e) {
|
||||
const detail = e?.detail?.data[0] || null;
|
||||
const data = detail?.data
|
||||
const key = detail?.event
|
||||
const options = data?.options
|
||||
const event = data?.event
|
||||
const file = detail?.file
|
||||
if (key == 'log' && data) {
|
||||
console.log(data)
|
||||
}
|
||||
if(event) {
|
||||
this.chart.dispatchAction(event.replace(/"/g,''), options)
|
||||
}
|
||||
if(file) {
|
||||
thie.file = file
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
setChart(callback) {
|
||||
if(!this.chart) {
|
||||
console.warn(`组件还未初始化,请先使用 init`)
|
||||
return
|
||||
}
|
||||
if(typeof callback === 'function' && this.chart) {
|
||||
callback(this.chart);
|
||||
}
|
||||
// #ifdef APP-NVUE
|
||||
if(typeof callback === 'function') {
|
||||
this.$refs.webview.evalJs(`setChart(${JSON.stringify(callback.toString())}, ${JSON.stringify(this.chart.options)})`);
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
setOption() {
|
||||
if (!this.chart || !this.chart.setOption) {
|
||||
console.warn(`组件还未初始化,请先使用 init`)
|
||||
return
|
||||
}
|
||||
this.chart.setOption(...arguments);
|
||||
},
|
||||
showLoading() {
|
||||
if(this.chart) {
|
||||
this.chart.showLoading(...arguments)
|
||||
}
|
||||
},
|
||||
hideLoading() {
|
||||
if(this.chart) {
|
||||
this.chart.hideLoading()
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
if(this.chart && !this.chart.isDisposed()) {
|
||||
this.chart.clear()
|
||||
}
|
||||
},
|
||||
dispose() {
|
||||
if(this.chart && !this.chart.isDisposed()) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
},
|
||||
resize(size) {
|
||||
if(size && size.width && size.height) {
|
||||
this.height = size.height
|
||||
this.width = size.width
|
||||
if(this.chart) {this.chart.resize(size)}
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
getRect('.lime-echart', this).then(res =>{
|
||||
if (res) {
|
||||
let { width, height } = res;
|
||||
this.width = width = width || 300;
|
||||
this.height = height = height || 300;
|
||||
this.chart.resize({width, height})
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
canvasToTempFilePath(args = {}) {
|
||||
// #ifndef APP-NVUE
|
||||
const { use2dCanvas, canvasId } = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
const copyArgs = Object.assign({
|
||||
canvasId,
|
||||
success: resolve,
|
||||
fail: reject
|
||||
}, args);
|
||||
if (use2dCanvas) {
|
||||
delete copyArgs.canvasId;
|
||||
copyArgs.canvas = this.canvasNode;
|
||||
}
|
||||
uni.canvasToTempFilePath(copyArgs, this);
|
||||
});
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.file = ''
|
||||
this.$refs.webview.evalJs(`canvasToTempFilePath()`);
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$watch('file', async (file) => {
|
||||
if(file) {
|
||||
const tempFilePath = await base64ToPath(file)
|
||||
resolve(args.success({tempFilePath}))
|
||||
} else {
|
||||
reject(args.fail({error: ``}))
|
||||
}
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
async init(echarts, ...args) {
|
||||
// #ifndef APP-NVUE
|
||||
if(args && args.length == 0 && !echarts) {
|
||||
console.error('缺少参数:init(echarts, theme?:string, opts?: object, callback?: function)')
|
||||
return
|
||||
}
|
||||
// #endif
|
||||
let theme=null,opts={},callback;
|
||||
Array.from(arguments).forEach(item => {
|
||||
if(typeof item === 'function') {
|
||||
callback = item
|
||||
}
|
||||
if(['string'].includes(typeof item)) {
|
||||
theme = item
|
||||
}
|
||||
if(typeof item === 'object') {
|
||||
opts = item
|
||||
}
|
||||
})
|
||||
if(this.beforeDelay) {
|
||||
await sleep(this.beforeDelay)
|
||||
}
|
||||
let config = await this.getContext();
|
||||
// #ifndef APP-NVUE
|
||||
setCanvasCreator(echarts, config)
|
||||
try {
|
||||
this.chart = echarts.init(config.canvas, theme, Object.assign({}, config, opts || {}))
|
||||
|
||||
callback?.(this.chart)
|
||||
return this.chart
|
||||
} catch(e) {
|
||||
console.error("【lime-echarts】:", e)
|
||||
return null
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.chart = new Echarts(this.$refs.webview)
|
||||
this.$refs.webview.evalJs(`init(null, null, ${JSON.stringify(opts)}, ${theme})`)
|
||||
callback?.(this.chart)
|
||||
return this.chart
|
||||
// #endif
|
||||
},
|
||||
getContext() {
|
||||
// #ifdef APP-NVUE
|
||||
if(this.finished) {
|
||||
return Promise.resolve(this.finished)
|
||||
}
|
||||
return new Promise(resolve => {
|
||||
this.$watch('finished', (val) => {
|
||||
if(val) {
|
||||
resolve(this.finished)
|
||||
}
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
return getRect(`#${this.canvasId}`, this, this.use2dCanvas).then(res => {
|
||||
if(res) {
|
||||
let dpr = devicePixelRatio
|
||||
let {width, height, node} = res
|
||||
let canvas;
|
||||
this.width = width = width || 300;
|
||||
this.height = height = height || 300;
|
||||
if(node) {
|
||||
const ctx = node.getContext('2d');
|
||||
canvas = new Canvas(ctx, this, true, node);
|
||||
this.canvasNode = node
|
||||
} else {
|
||||
// #ifdef MP-TOUTIAO
|
||||
dpr = !this.isPC ? devicePixelRatio : 1// 1.25
|
||||
// #endif
|
||||
// #ifndef MP-ALIPAY || MP-TOUTIAO
|
||||
dpr = this.isPC ? devicePixelRatio : 1
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY || MP-LARK
|
||||
dpr = devicePixelRatio
|
||||
// #endif
|
||||
// #ifdef WEB
|
||||
dpr = 1
|
||||
// #endif
|
||||
this.rect = res
|
||||
this.nodeWidth = width * dpr;
|
||||
this.nodeHeight = height * dpr;
|
||||
const ctx = uni.createCanvasContext(this.canvasId, this);
|
||||
canvas = new Canvas(ctx, this, false);
|
||||
}
|
||||
|
||||
return { canvas, width, height, devicePixelRatio: dpr, node };
|
||||
} else {
|
||||
return {}
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
// #ifndef APP-NVUE
|
||||
getRelative(e, touches) {
|
||||
let { clientX, clientY } = e
|
||||
if(!(clientX && clientY) && touches && touches[0]) {
|
||||
clientX = touches[0].clientX
|
||||
clientY = touches[0].clientY
|
||||
}
|
||||
return {x: clientX - this.rect.left, y: clientY - this.rect.top, wheelDelta: e.wheelDelta || 0}
|
||||
},
|
||||
getTouch(e, touches) {
|
||||
const {x} = touches && touches[0] || {}
|
||||
const touch = x ? touches[0] : this.getRelative(e, touches);
|
||||
if(this.landscape) {
|
||||
[touch.x, touch.y] = [touch.y, this.height - touch.x]
|
||||
}
|
||||
return touch;
|
||||
},
|
||||
touchStart(e) {
|
||||
this.isDown = true
|
||||
const next = () => {
|
||||
const touches = convertTouchesToArray(e.touches)
|
||||
if(this.chart) {
|
||||
const touch = this.getTouch(e, touches)
|
||||
this.startX = touch.x
|
||||
this.startY = touch.y
|
||||
this.startT = new Date()
|
||||
const handler = this.chart.getZr().handler;
|
||||
dispatch.call(handler, 'mousedown', touch)
|
||||
dispatch.call(handler, 'mousemove', touch)
|
||||
handler.processGesture(wrapTouch(e), 'start');
|
||||
clearTimeout(this.endTimer);
|
||||
}
|
||||
|
||||
}
|
||||
if(this.isPC) {
|
||||
getRect(`#${this.canvasId}`, {context: this}).then(res => {
|
||||
this.rect = res
|
||||
next()
|
||||
})
|
||||
return
|
||||
}
|
||||
next()
|
||||
},
|
||||
touchMove(e) {
|
||||
if(this.isPC && this.enableHover && !this.isDown) {this.isDown = true}
|
||||
const touches = convertTouchesToArray(e.touches)
|
||||
if (this.chart && this.isDown) {
|
||||
const handler = this.chart.getZr().handler;
|
||||
dispatch.call(handler, 'mousemove', this.getTouch(e, touches))
|
||||
handler.processGesture(wrapTouch(e), 'change');
|
||||
}
|
||||
|
||||
},
|
||||
touchEnd(e) {
|
||||
this.isDown = false
|
||||
if (this.chart) {
|
||||
const touches = convertTouchesToArray(e.changedTouches)
|
||||
const {x} = touches && touches[0] || {}
|
||||
const touch = (x ? touches[0] : this.getRelative(e, touches)) || {};
|
||||
if(this.landscape) {
|
||||
[touch.x, touch.y] = [touch.y, this.height - touch.x]
|
||||
}
|
||||
const handler = this.chart.getZr().handler;
|
||||
const isClick = Math.abs(touch.x - this.startX) < 10 && new Date() - this.startT < 200;
|
||||
dispatch.call(handler, 'mouseup', touch)
|
||||
handler.processGesture(wrapTouch(e), 'end');
|
||||
if(isClick) {
|
||||
dispatch.call(handler, 'click', touch)
|
||||
} else {
|
||||
this.endTimer = setTimeout(() => {
|
||||
dispatch.call(handler, 'mousemove', {x: 999999999,y: 999999999});
|
||||
dispatch.call(handler, 'mouseup', {x: 999999999,y: 999999999});
|
||||
},50)
|
||||
}
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
mousewheel(e){
|
||||
if(this.chart) {
|
||||
dispatch.call(this.chart.getZr().handler, 'mousewheel', this.getTouch(e))
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.lime-echart {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
}
|
||||
.lime-echart__canvas {
|
||||
/* #ifndef APP-NVUE */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
}
|
||||
/* #ifndef APP-NVUE */
|
||||
.lime-echart__mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
|
@ -0,0 +1,51 @@
|
|||
export class Echarts {
|
||||
eventMap = new Map()
|
||||
constructor(webview) {
|
||||
this.webview = webview
|
||||
this.options = null
|
||||
}
|
||||
setOption() {
|
||||
this.options = arguments
|
||||
this.webview.evalJs(`setOption(${JSON.stringify(arguments)})`);
|
||||
}
|
||||
getOption() {
|
||||
return this.options
|
||||
}
|
||||
showLoading() {
|
||||
this.webview.evalJs(`showLoading(${JSON.stringify(arguments)})`);
|
||||
}
|
||||
hideLoading() {
|
||||
this.webview.evalJs(`hideLoading()`);
|
||||
}
|
||||
clear() {
|
||||
this.webview.evalJs(`clear()`);
|
||||
}
|
||||
dispose() {
|
||||
this.webview.evalJs(`dispose()`);
|
||||
}
|
||||
resize(size) {
|
||||
if(size) {
|
||||
this.webview.evalJs(`resize(${JSON.stringify(size)})`);
|
||||
} else {
|
||||
this.webview.evalJs(`resize()`);
|
||||
}
|
||||
}
|
||||
on(type, ...args) {
|
||||
const query = args[0]
|
||||
const useQuery = query && typeof query != 'function'
|
||||
const param = useQuery ? [type, query] : [type]
|
||||
const key = `${type}${useQuery ? JSON.stringify(query): '' }`
|
||||
const callback = useQuery ? args[1]: args[0]
|
||||
if(typeof callback == 'function'){
|
||||
this.eventMap.set(key, callback)
|
||||
}
|
||||
this.webview.evalJs(`on(${JSON.stringify(param)})`);
|
||||
console.warn('nvue 暂不支持事件')
|
||||
}
|
||||
dispatchAction(type, options){
|
||||
const handler = this.eventMap.get(type)
|
||||
if(handler){
|
||||
handler(options)
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,185 @@
|
|||
// @ts-nocheck
|
||||
/**
|
||||
* 获取设备基础信息
|
||||
*
|
||||
* @see [uni.getDeviceInfo](https://uniapp.dcloud.net.cn/api/system/getDeviceInfo.html)
|
||||
*/
|
||||
export function getDeviceInfo() {
|
||||
if (uni.getDeviceInfo || uni.canIUse('getDeviceInfo')) {
|
||||
return uni.getDeviceInfo();
|
||||
} else {
|
||||
return uni.getSystemInfoSync();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取窗口信息
|
||||
*
|
||||
* @see [uni.getWindowInfo](https://uniapp.dcloud.net.cn/api/system/getWindowInfo.html)
|
||||
*/
|
||||
export function getWindowInfo() {
|
||||
if (uni.getWindowInfo || uni.canIUse('getWindowInfo')) {
|
||||
return uni.getWindowInfo();
|
||||
} else {
|
||||
return uni.getSystemInfoSync();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取APP基础信息
|
||||
*
|
||||
* @see [uni.getAppBaseInfo](https://uniapp.dcloud.net.cn/api/system/getAppBaseInfo.html)
|
||||
*/
|
||||
export function getAppBaseInfo() {
|
||||
if (uni.getAppBaseInfo || uni.canIUse('getAppBaseInfo')) {
|
||||
return uni.getAppBaseInfo();
|
||||
} else {
|
||||
return uni.getSystemInfoSync();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// #ifndef APP-NVUE
|
||||
// 计算版本
|
||||
export function compareVersion(v1, v2) {
|
||||
v1 = v1.split('.')
|
||||
v2 = v2.split('.')
|
||||
const len = Math.max(v1.length, v2.length)
|
||||
while (v1.length < len) {
|
||||
v1.push('0')
|
||||
}
|
||||
while (v2.length < len) {
|
||||
v2.push('0')
|
||||
}
|
||||
for (let i = 0; i < len; i++) {
|
||||
const num1 = parseInt(v1[i], 10)
|
||||
const num2 = parseInt(v2[i], 10)
|
||||
|
||||
if (num1 > num2) {
|
||||
return 1
|
||||
} else if (num1 < num2) {
|
||||
return -1
|
||||
}
|
||||
}
|
||||
return 0
|
||||
}
|
||||
// const systemInfo = uni.getSystemInfoSync();
|
||||
|
||||
function gte(version) {
|
||||
// 截止 2023-03-22 mac pc小程序不支持 canvas 2d
|
||||
// let {
|
||||
// SDKVersion,
|
||||
// platform
|
||||
// } = systemInfo;
|
||||
const { platform } = getDeviceInfo();
|
||||
let { SDKVersion } = getAppBaseInfo();
|
||||
// #ifdef MP-ALIPAY
|
||||
SDKVersion = my.SDKVersion
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
return platform !== 'mac' && compareVersion(SDKVersion, version) >= 0;
|
||||
// #endif
|
||||
return compareVersion(SDKVersion, version) >= 0;
|
||||
}
|
||||
|
||||
|
||||
export function canIUseCanvas2d() {
|
||||
// #ifdef MP-WEIXIN
|
||||
return gte('2.9.0');
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
return gte('2.7.0');
|
||||
// #endif
|
||||
// #ifdef MP-TOUTIAO
|
||||
return gte('1.78.0');
|
||||
// #endif
|
||||
return false
|
||||
}
|
||||
|
||||
export function convertTouchesToArray(touches) {
|
||||
// 如果 touches 是一个数组,则直接返回它
|
||||
if (Array.isArray(touches)) {
|
||||
return touches;
|
||||
}
|
||||
// 如果touches是一个对象,则转换为数组
|
||||
if (typeof touches === 'object' && touches !== null) {
|
||||
return Object.values(touches);
|
||||
}
|
||||
// 对于其他类型,直接返回它
|
||||
return touches;
|
||||
}
|
||||
|
||||
export function wrapTouch(event) {
|
||||
event.touches = convertTouchesToArray(event.touches)
|
||||
for (let i = 0; i < event.touches.length; ++i) {
|
||||
const touch = event.touches[i];
|
||||
touch.offsetX = touch.x;
|
||||
touch.offsetY = touch.y;
|
||||
}
|
||||
return event;
|
||||
}
|
||||
// export const devicePixelRatio = uni.getSystemInfoSync().pixelRatio
|
||||
export const devicePixelRatio = getWindowInfo().pixelRatio;
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
export function base64ToPath(base64) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
|
||||
const bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
|
||||
bitmap.loadBase64Data(base64, () => {
|
||||
if (!format) {
|
||||
reject(new Error('ERROR_BASE64SRC_PARSE'))
|
||||
}
|
||||
const time = new Date().getTime();
|
||||
const filePath = `_doc/uniapp_temp/${time}.${format}`
|
||||
|
||||
bitmap.save(filePath, {},
|
||||
() => {
|
||||
bitmap.clear()
|
||||
resolve(filePath)
|
||||
},
|
||||
(error) => {
|
||||
bitmap.clear()
|
||||
console.error(`${JSON.stringify(error)}`)
|
||||
reject(error)
|
||||
})
|
||||
}, (error) => {
|
||||
bitmap.clear()
|
||||
console.error(`${JSON.stringify(error)}`)
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
|
||||
|
||||
export function sleep(time) {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(true)
|
||||
}, time)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function getRect(selector, context, node) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const dom = uni.createSelectorQuery().in(context).select(selector);
|
||||
const result = (rect) => {
|
||||
if (rect) {
|
||||
resolve(rect)
|
||||
} else {
|
||||
reject()
|
||||
}
|
||||
}
|
||||
if (!node) {
|
||||
dom.boundingClientRect(result).exec()
|
||||
} else {
|
||||
dom.fields({
|
||||
node: true,
|
||||
size: true,
|
||||
rect: true
|
||||
}, result).exec()
|
||||
}
|
||||
});
|
||||
};
|
|
@ -0,0 +1,133 @@
|
|||
// @ts-nocheck
|
||||
// #ifdef APP
|
||||
type EchartsEventHandler = (event: UTSJSONObject)=>void
|
||||
// type EchartsTempResolve = (obj : UTSJSONObject) => void
|
||||
// type EchartsTempOptions = UTSJSONObject
|
||||
export class Echarts {
|
||||
options: UTSJSONObject = {} as UTSJSONObject
|
||||
context: UniWebViewElement
|
||||
eventMap: Map<string, EchartsEventHandler> = new Map()
|
||||
private temp: UTSJSONObject[] = []
|
||||
constructor(context: UniWebViewElement){
|
||||
this.context = context
|
||||
this.init()
|
||||
}
|
||||
init(){
|
||||
this.context.evalJS(`init(null, null, ${JSON.stringify({})})`)
|
||||
|
||||
this.context.addEventListener('message', (e : UniWebViewMessageEvent) => {
|
||||
// event.stopPropagation()
|
||||
// event.preventDefault()
|
||||
|
||||
const detail = e.detail.data[0]
|
||||
const file = detail.getString('file')
|
||||
const data = detail.get('data')
|
||||
const key = detail.getString('event')
|
||||
const options = typeof data == 'object' ? (data as UTSJSONObject).getJSON('options'): null
|
||||
const event = typeof data == 'object' ? (data as UTSJSONObject).getString('event'): null
|
||||
if (key == 'log' && data != null) {
|
||||
console.log(data)
|
||||
}
|
||||
if (event != null && options != null) {
|
||||
this.dispatchAction(event.replace(/"/g,''), options)
|
||||
}
|
||||
if(file != null){
|
||||
while (this.temp.length > 0) {
|
||||
const opt = this.temp.pop()
|
||||
const success = opt?.get('success')
|
||||
if(typeof success == 'function'){
|
||||
success as (res: UTSJSONObject) => void
|
||||
success({tempFilePath: file})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
setOption(option: UTSJSONObject){
|
||||
this.options = option;
|
||||
this.context.evalJS(`setOption(${JSON.stringify([option])})`)
|
||||
}
|
||||
setOption(option: UTSJSONObject, notMerge: boolean = false, lazyUpdate: boolean = false){
|
||||
this.options = option;
|
||||
this.context.evalJS(`setOption(${JSON.stringify([option, notMerge, lazyUpdate])})`)
|
||||
}
|
||||
setOption(option: UTSJSONObject, notMerge: UTSJSONObject){
|
||||
this.options = option;
|
||||
this.context.evalJS(`setOption(${JSON.stringify([option, notMerge])})`)
|
||||
}
|
||||
getOption(): UTSJSONObject {
|
||||
return this.options
|
||||
}
|
||||
showLoading(){
|
||||
this.context.evalJS(`showLoading(${JSON.stringify([] as any[])})`);
|
||||
}
|
||||
showLoading(type: string, opts: UTSJSONObject){
|
||||
this.context.evalJS(`showLoading(${JSON.stringify([type, opts])})`);
|
||||
}
|
||||
hideLoading(){
|
||||
this.context.evalJS(`hideLoading()`);
|
||||
}
|
||||
clear(){
|
||||
this.context.evalJS(`clear()`);
|
||||
}
|
||||
dispose(){
|
||||
this.context.evalJS(`dispose()`);
|
||||
}
|
||||
resize(size:UTSJSONObject){
|
||||
setTimeout(()=>{
|
||||
this.context.evalJS(`resize(${JSON.stringify(size)})`);
|
||||
},0)
|
||||
}
|
||||
resize(){
|
||||
setTimeout(()=>{
|
||||
this.context.evalJS(`resize()`);
|
||||
},10)
|
||||
|
||||
}
|
||||
on(type:string, query: any, callback: EchartsEventHandler) {
|
||||
const key = `${type}${JSON.stringify(query)}`
|
||||
if(typeof callback == 'function'){
|
||||
this.eventMap.set(key, callback)
|
||||
}
|
||||
this.context.evalJS(`on(${JSON.stringify([type, query])})`);
|
||||
console.warn('uvue 暂不支持事件')
|
||||
}
|
||||
on(type:string, callback: EchartsEventHandler) {
|
||||
const key = `${type}`
|
||||
if(typeof callback == 'function'){
|
||||
this.eventMap.set(key, callback)
|
||||
}
|
||||
this.context.evalJS(`on(${JSON.stringify([type])})`);
|
||||
console.warn('uvue 暂不支持事件')
|
||||
}
|
||||
dispatchAction(type:string, options: UTSJSONObject){
|
||||
const handler = this.eventMap.get(type)
|
||||
if(handler!=null){
|
||||
handler(options)
|
||||
}
|
||||
}
|
||||
canvasToTempFilePath(opt: UTSJSONObject){
|
||||
// this.context.evalJS(`on(${JSON.stringify(opt)})`);
|
||||
this.context.evalJS(`canvasToTempFilePath(${JSON.stringify(opt)})`);
|
||||
this.temp.push(opt)
|
||||
}
|
||||
}
|
||||
|
||||
// #endif
|
||||
// #ifndef APP
|
||||
export class Echarts {
|
||||
constructor() {}
|
||||
setOption(option: UTSJSONObject): void
|
||||
isDisposed(): boolean;
|
||||
clear(): void;
|
||||
resize(size:UTSJSONObject): void;
|
||||
resize(): void;
|
||||
canvasToTempFilePath(opt : UTSJSONObject): void;
|
||||
dispose(): void;
|
||||
showLoading(cfg?: UTSJSONObject): void;
|
||||
showLoading(name?: string, cfg?: UTSJSONObject): void;
|
||||
hideLoading(): void;
|
||||
getZr(): any
|
||||
}
|
||||
// #endif
|
|
@ -0,0 +1,159 @@
|
|||
<template>
|
||||
<view style="width: 100%; height: 408px;">
|
||||
<l-echart ref="chartRef" @finished="init"></l-echart>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showTip: false,
|
||||
option: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
// shadowBlur: 0,
|
||||
textStyle: {
|
||||
textShadowBlur: 0
|
||||
},
|
||||
renderMode: 'richText',
|
||||
},
|
||||
legend: {
|
||||
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '邮件营销',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: '直接访问',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: '搜索引擎',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('lime echarts nvue')
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
const chartRef = this.$refs['chartRef']
|
||||
chartRef.init(chart => {
|
||||
chart.setOption(this.option);
|
||||
|
||||
|
||||
setTimeout(()=>{
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
// shadowBlur: 0,
|
||||
textStyle: {
|
||||
textShadowBlur: 0
|
||||
},
|
||||
renderMode: 'richText',
|
||||
},
|
||||
legend: {
|
||||
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '邮件营销',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: '直接访问',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: '搜索引擎',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
}
|
||||
chart.setOption(option);
|
||||
},1000)
|
||||
})
|
||||
},
|
||||
save() {
|
||||
// this.$refs.chart.canvasToTempFilePath({
|
||||
// success(res) {
|
||||
// console.log('res::::', res)
|
||||
// }
|
||||
// })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
|
@ -0,0 +1,159 @@
|
|||
<template>
|
||||
<view style="width: 100%; height: 408px;">
|
||||
<l-echart ref="chartRef" @finished="init"></l-echart>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="uts" setup>
|
||||
// @ts-nocheck
|
||||
// #ifndef APP
|
||||
import * as echarts from 'echarts/dist/echarts.esm.js'
|
||||
// #endif
|
||||
const chartRef = ref<LEchartComponentPublicInstance|null>(null)
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
// shadowBlur: 0,
|
||||
textStyle: {
|
||||
textShadowBlur: 0
|
||||
},
|
||||
renderMode: 'richText',
|
||||
},
|
||||
// formatter: async (params: any) => {
|
||||
// console.log('params', params)
|
||||
// return 1
|
||||
// },
|
||||
legend: {
|
||||
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '邮件营销',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: '直接访问',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: '搜索引擎',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const init = async () =>{
|
||||
if(chartRef.value== null) return
|
||||
// #ifdef APP
|
||||
const chart = await chartRef.value!.init(null)
|
||||
// #endif
|
||||
// #ifndef APP
|
||||
const chart = await chartRef.value!.init(echarts, null)
|
||||
// #endif
|
||||
chart.setOption(option)
|
||||
chart.on('mouseover', function (params) {
|
||||
console.log('params', params);
|
||||
});
|
||||
|
||||
|
||||
// setTimeout(()=> {
|
||||
// const option1 = {
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
// // shadowBlur: 0,
|
||||
// textStyle: {
|
||||
// textShadowBlur: 0
|
||||
// },
|
||||
// renderMode: 'richText',
|
||||
// },
|
||||
// legend: {
|
||||
// data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
|
||||
// },
|
||||
// grid: {
|
||||
// left: '3%',
|
||||
// right: '4%',
|
||||
// bottom: '3%',
|
||||
// containLabel: true
|
||||
// },
|
||||
// xAxis: {
|
||||
// type: 'category',
|
||||
// boundaryGap: false,
|
||||
// data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
// },
|
||||
// yAxis: {
|
||||
// type: 'value'
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// name: '邮件营销',
|
||||
// type: 'line',
|
||||
// stack: '总量',
|
||||
// data: [820, 132, 101, 134, 90, 230, 210]
|
||||
// },
|
||||
// {
|
||||
// name: '联盟广告',
|
||||
// type: 'line',
|
||||
// stack: '总量',
|
||||
// data: [220, 182, 191, 234, 290, 330, 310]
|
||||
// },
|
||||
// {
|
||||
// name: '视频广告',
|
||||
// type: 'line',
|
||||
// stack: '总量',
|
||||
// data: [950, 232, 201, 154, 190, 330, 410]
|
||||
// },
|
||||
// {
|
||||
// name: '直接访问',
|
||||
// type: 'line',
|
||||
// stack: '总量',
|
||||
// data: [320, 332, 301, 334, 390, 330, 320]
|
||||
// },
|
||||
// {
|
||||
// name: '搜索引擎',
|
||||
// type: 'line',
|
||||
// stack: '总量',
|
||||
// data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// chart.setOption(option1)
|
||||
// },1000)
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
|
@ -0,0 +1,227 @@
|
|||
<template>
|
||||
<view>
|
||||
<view style="height: 750rpx; position: relative">
|
||||
<l-echart ref="chart" @finished="init"></l-echart>
|
||||
<view
|
||||
class="customTooltips"
|
||||
:style="{ left: position[0] + 'px', top: position[1] + 'px' }"
|
||||
v-if="params.length && position.length && showTip"
|
||||
>
|
||||
<view>这是个自定的tooltips</view>
|
||||
<view>{{ params[0]['axisValue'] }}</view>
|
||||
<view v-for="item in params">
|
||||
<view>
|
||||
<text>{{ item.seriesName }}</text>
|
||||
<text>{{ item.value }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// nvue 不需要引入
|
||||
// #ifdef VUE2
|
||||
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
// #ifdef MP
|
||||
// 由于vue3 使用vite 不支持umd格式的包,小程序依然可以使用,但需要使用require
|
||||
const echarts = require('../../static/echarts.min')
|
||||
// #endif
|
||||
// #ifndef MP
|
||||
// 由于 vue3 使用vite 不支持umd格式的包,故引入npm的包
|
||||
import * as echarts from 'echarts/dist/echarts.esm'
|
||||
// #endif
|
||||
// #endif
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showTip: false,
|
||||
position: [],
|
||||
params: [],
|
||||
option: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
// shadowBlur: 0,
|
||||
textStyle: {
|
||||
textShadowBlur: 0,
|
||||
},
|
||||
renderMode: 'richText',
|
||||
position: (point, params, dom, rect, size) => {
|
||||
// 假设自定义的tooltips尺寸
|
||||
const box = [170, 170]
|
||||
// 偏移
|
||||
const offsetX = point[0] < size.viewSize[0] / 2 ? 20 : -box[0] - 20
|
||||
const offsetY = point[1] < size.viewSize[1] / 2 ? 20 : -box[1] - 20
|
||||
const x = point[0] + offsetX
|
||||
const y = point[1] + offsetY
|
||||
|
||||
this.position = [x, y]
|
||||
this.params = params
|
||||
},
|
||||
formatter: (params, ticket, callback) => {},
|
||||
},
|
||||
legend: {
|
||||
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '邮件营销',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
},
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: '直接访问',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [320, 332, 301, 334, 390, 330, 320],
|
||||
},
|
||||
{
|
||||
name: '搜索引擎',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
init() {
|
||||
// init(echarts, theme?:string, opts?:{}, chart => {})
|
||||
// echarts 必填, 非nvue必填,nvue不用填
|
||||
// theme 可选,应用的主题,目前只支持名称,如:'dark'
|
||||
// opts = { // 可选
|
||||
// locale?: string // 从 `5.0.0` 开始支持
|
||||
// }
|
||||
// chart => {} , callback 返回图表实例
|
||||
// setTimeout(()=>{
|
||||
// this.$refs.chart.init(echarts, chart => {
|
||||
// chart.setOption(this.option);
|
||||
// });
|
||||
// },300)
|
||||
this.$refs.chart.init(echarts, (chart) => {
|
||||
chart.setOption(this.option)
|
||||
|
||||
// 监听tooltip显示事件
|
||||
chart.on('showTip', (params) => {
|
||||
this.showTip = true
|
||||
console.log('showTip::')
|
||||
})
|
||||
chart.on('hideTip', (params) => {
|
||||
setTimeout(() => {
|
||||
this.showTip = false
|
||||
}, 300)
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
// shadowBlur: 0,
|
||||
textStyle: {
|
||||
textShadowBlur: 0,
|
||||
},
|
||||
renderMode: 'richText',
|
||||
},
|
||||
legend: {
|
||||
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '邮件营销',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [1120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
},
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [150, 632, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: '直接访问',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [820, 332, 301, 334, 390, 330, 320],
|
||||
},
|
||||
{
|
||||
name: '搜索引擎',
|
||||
type: 'line',
|
||||
stack: '总量',
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
},
|
||||
],
|
||||
}
|
||||
chart.setOption(option)
|
||||
}, 1000)
|
||||
})
|
||||
},
|
||||
save() {
|
||||
this.$refs.chart.canvasToTempFilePath({
|
||||
success(res) {
|
||||
console.log('res::::', res)
|
||||
},
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.customTooltips {
|
||||
position: absolute;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
padding: 20rpx;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,91 @@
|
|||
{
|
||||
"id": "lime-echart",
|
||||
"displayName": "echarts",
|
||||
"version": "1.0.0",
|
||||
"description": "echarts 全端兼容,一款使echarts图表能跑在uniapp各端中的插件, 支持uniapp/uniappx(web,ios,安卓)",
|
||||
"keywords": [
|
||||
"echarts",
|
||||
"canvas",
|
||||
"图表",
|
||||
"可视化"
|
||||
],
|
||||
"repository": "https://gitee.com/liangei/lime-echart",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.6.4"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "n"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y",
|
||||
"app-uvue": "y",
|
||||
"app-harmony": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "u",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"echarts": "^5.4.1",
|
||||
"zrender": "^5.4.3"
|
||||
}
|
||||
}
|
|
@ -0,0 +1,408 @@
|
|||
# echarts 图表 <span style="font-size:16px;">👑👑👑👑👑 <span style="background:#ff9d00;padding:2px 4px;color:#fff;font-size:10px;border-radius: 3px;">全端</span></span>
|
||||
> 一个基于 JavaScript 的开源可视化图表库 [查看更多](https://limeui.qcoon.cn/#/echart) <br>
|
||||
> 基于 echarts 做了兼容处理,更多示例请访问 [uni示例](https://limeui.qcoon.cn/#/echart-example) | [官方示例](https://echarts.apache.org/examples/zh/index.html) <br>
|
||||
|
||||
|
||||
## 平台兼容
|
||||
|
||||
| H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
|
||||
| --- | ---------- | ------------ | ---------- | ---------- | --------- | ---- |
|
||||
| √ | √ | √ | √ | √ | √ | √ |
|
||||
|
||||
|
||||
## 安装
|
||||
- 第一步:在市场导入 [百度图表](https://ext.dcloud.net.cn/plugin?id=4899)
|
||||
- 第二步:选择插件依赖:<br>
|
||||
1、可以选插件内的`echarts`包或自定义包,自定义包[下载地址](https://echarts.apache.org/zh/builder.html)<br>
|
||||
2、或者使用`npm`安装`echarts`
|
||||
|
||||
**注意**
|
||||
* 🔔 echarts 5.3.0及以上
|
||||
* 🔔 如果是 `cli` 项目请下载插件到`src`目录下的`uni_modules`,没有这个目录就创建一个
|
||||
|
||||
|
||||
## 代码演示
|
||||
|
||||
### Vue2
|
||||
- 引入依赖,可以是插件内提供或自己下载的[自定义包](https://echarts.apache.org/zh/builder.html),也可以是`npm`包
|
||||
|
||||
```html
|
||||
<view style="width:750rpx; height:750rpx"><l-echart ref="chartRef" @finished="init"></l-echart></view>
|
||||
```
|
||||
|
||||
```js
|
||||
// 插件内的 三选一
|
||||
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
|
||||
// 自定义的 三选一 下载后放入项目的路径
|
||||
import * as echarts from 'xxx/echarts.min'
|
||||
// npm包 三选一 需要在控制台 输入命令:npm install echarts
|
||||
import * as echarts from 'echarts'
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
confine: true
|
||||
},
|
||||
legend: {
|
||||
data: ['热度', '正面', '负面']
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 15,
|
||||
top: 40,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666666'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666666'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '热度',
|
||||
type: 'bar',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
}
|
||||
},
|
||||
data: [300, 270, 340, 344, 300, 320, 310],
|
||||
},
|
||||
{
|
||||
name: '正面',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
data: [120, 102, 141, 174, 190, 250, 220]
|
||||
},
|
||||
{
|
||||
name: '负面',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'left'
|
||||
}
|
||||
},
|
||||
data: [-20, -32, -21, -34, -90, -130, -110]
|
||||
}
|
||||
]
|
||||
},
|
||||
};
|
||||
},
|
||||
// 组件能被调用必须是组件的节点已经被渲染到页面上
|
||||
methods: {
|
||||
async init() {
|
||||
// chart 图表实例不能存在data里
|
||||
const chart = await this.$refs.chartRef.init(echarts);
|
||||
chart.setOption(this.option)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Vue3
|
||||
- 小程序可以使用`require`引入插件内提供或自己下载的[自定义包](https://echarts.apache.org/zh/builder.html)
|
||||
- `require`仅支持相对路径,不支持路径别名
|
||||
- 非小程序使用 `npm` 包
|
||||
|
||||
|
||||
```html
|
||||
<view style="width:750rpx; height:750rpx"><l-echart ref="chartRef"></l-echart></view>
|
||||
```
|
||||
|
||||
```js
|
||||
// 小程序 二选一
|
||||
// 插件内的 二选一
|
||||
const echarts = require('../../uni_modules/lime-echart/static/echarts.min');
|
||||
// 自定义的 二选一 下载后放入项目的路径
|
||||
const echarts = require('xxx/xxx/echarts');
|
||||
|
||||
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
// 非小程序
|
||||
// 需要在控制台 输入命令:npm install echarts
|
||||
import * as echarts from 'echarts'
|
||||
```
|
||||
|
||||
```js
|
||||
|
||||
const chartRef = ref(null)
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
confine: true
|
||||
},
|
||||
legend: {
|
||||
data: ['热度', '正面', '负面']
|
||||
},
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 15,
|
||||
top: 40,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666666'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#999999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666666'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '热度',
|
||||
type: 'bar',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
}
|
||||
},
|
||||
data: [300, 270, 340, 344, 300, 320, 310],
|
||||
},
|
||||
{
|
||||
name: '正面',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
data: [120, 102, 141, 174, 190, 250, 220]
|
||||
},
|
||||
{
|
||||
name: '负面',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'left'
|
||||
}
|
||||
},
|
||||
data: [-20, -32, -21, -34, -90, -130, -110]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
onMounted( ()=>{
|
||||
// 组件能被调用必须是组件的节点已经被渲染到页面上
|
||||
setTimeout(async()=>{
|
||||
if(!chartRef.value) return
|
||||
const myChart = await chartRef.value.init(echarts)
|
||||
myChart.setOption(option)
|
||||
},300)
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
|
||||
### Uvue
|
||||
- Uvue和Nvue不需要引入`echarts`,因为它们的实现方式是`webview`
|
||||
- uniapp x需要HBX 4.13以上
|
||||
|
||||
```html
|
||||
<view style="width: 100%; height: 408px;">
|
||||
<l-echart ref="chartRef" @finished="init"></l-echart>
|
||||
</view>
|
||||
```
|
||||
|
||||
```js
|
||||
// @ts-nocheck
|
||||
// #ifdef H5
|
||||
import * as echarts from 'echarts/dist/echarts.esm.js'
|
||||
// #endif
|
||||
const chartRef = ref<LEchartComponentPublicInstance|null>(null);
|
||||
const init = async () => {
|
||||
if(chartRef.value== null) return
|
||||
// #ifdef APP
|
||||
const chart = await chartRef.value!.init(null)
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
const chart = await chartRef.value!.init(echarts, null)
|
||||
// #endif
|
||||
chart.setOption(option)
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## 数据更新
|
||||
- 1、使用 `ref` 可获取`setOption`设置更新
|
||||
- 2、也可以拿到图表实例`chart`设置`myChart.setOption(data)`
|
||||
|
||||
```js
|
||||
// ref
|
||||
this.$refs.chart.setOption(data)
|
||||
|
||||
// 图表实例
|
||||
myChart.setOption(data)
|
||||
```
|
||||
|
||||
## 图表大小
|
||||
- 在有些场景下,我们希望当容器大小改变时,图表的大小也相应地改变。
|
||||
|
||||
```js
|
||||
// 默认获取容器尺寸
|
||||
this.$refs.chart.resize()
|
||||
// 指定尺寸
|
||||
this.$refs.chart.resize({width: 375, height: 375})
|
||||
```
|
||||
|
||||
## 自定义Tooltips
|
||||
- uvue\nvue 不支持
|
||||
由于除H5之外都不存在dom,但又有tooltips个性化的需求,代码就不贴了,看示例吧
|
||||
```
|
||||
代码位于/uni_modules/lime-echart/component/lime-echart
|
||||
```
|
||||
|
||||
|
||||
## 插件标签
|
||||
- 默认 l-echart 为 component
|
||||
- 默认 lime-echart 为 demo
|
||||
```html
|
||||
// 在任意地方使用可查看domo, 代码位于/uni_modules/lime-echart/component/lime-echart
|
||||
<lime-echart></lime-echart>
|
||||
```
|
||||
|
||||
|
||||
## 常见问题
|
||||
- 钉钉小程序 由于没有`measureText`,模拟的`measureText`又无法得到当前字体的`fontWeight`,故可能存在估计不精细的问题
|
||||
- 微信小程序 `2d` 只支持 真机调试2.0
|
||||
- 微信开发工具会出现 `canvas` 不跟随页面的情况,真机不影响
|
||||
- 微信开发工具会出现 `canvas` 层级过高的问题,真机一般不受影响,可以先测只有两个元素的页面看是否会有层级问题。
|
||||
- toolbox 不支持 `saveImage`
|
||||
- echarts 5.3.0 的 lines 不支持 trailLength,故需设置为 `0`
|
||||
- dataZoom H5不要设置 `showDetail`
|
||||
- 如果微信小程序的`tooltip`文字有阴影,可能是微信的锅,临时解决方法是`tooltip.shadowBlur = 0`
|
||||
- 如果钉钉小程序上传时报安全问题`Uint8Clamped`,可以向钉钉反馈是安全代码扫描把Uint8Clamped数组错误识别了,也可以在 echarts 文件修改`Uint8Clamped`
|
||||
```js
|
||||
// 找到这段代码把代码中`Uint8Clamped`改成`Uint8_Clamped`,再把下划线去掉,不过直接去掉`Uint8Clamped`也是可行的
|
||||
// ["Int8","Uint8","Uint8Clamped","Int16","Uint16","Int32","Uint32","Float32","Float64"],(function(t,e){return t["[object "+e+"Array]"]
|
||||
// 改成如下
|
||||
["Int8","Uint8","Uint8_Clamped","Int16","Uint16","Int32","Uint32","Float32","Float64"],(function(t,e){return t["[object "+e.replace('_','')+"Array]"]
|
||||
```
|
||||
|
||||
### vue3
|
||||
如果您是使用 **vite + vue3** 非微信小程序可能会遇到`echarts`文件缺少`wx`判断导致无法使用或缺少`tooltip`<br>
|
||||
|
||||
方式一:可以在`echarts.min.js`文件开头增加以下内容,参考插件内的echart.min.js的做法
|
||||
|
||||
```js
|
||||
// 某些echarts版本下 uniapp app 需要global,不然会报__ECHARTS__DEFAULT__RENDERER__
|
||||
let global = null
|
||||
let wx = uni
|
||||
```
|
||||
|
||||
方式二:在`vite.config.js`的`define`设置环境
|
||||
|
||||
```js
|
||||
// 或者在`vite.config.js`的`define`设置环境
|
||||
import { defineConfig } from 'vite';
|
||||
import uni from '@dcloudio/vite-plugin-uni';
|
||||
|
||||
const define = {}
|
||||
if(!["mp-weixin", "h5", "web"].includes(process.env.UNI_PLATFORM)) {
|
||||
define['global'] = null
|
||||
define['wx'] = 'uni'
|
||||
}
|
||||
export default defineConfig({
|
||||
plugins: [uni()],
|
||||
define
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --------------- | -------- | ------- | ------------ | ----- |
|
||||
| custom-style | 自定义样式 | `string` | - | - |
|
||||
| type | 指定 canvas 类型 | `string` | `2d` | |
|
||||
| is-disable-scroll | 触摸图表时是否禁止页面滚动 | `boolean` | `false` | |
|
||||
| beforeDelay | 延迟初始化 (毫秒) | `number` | `30` | |
|
||||
| enableHover | PC端使用鼠标悬浮 | `boolean` | `false` | |
|
||||
| landscape | 是否旋转90deg,模拟横屏效果 | `boolean` | `false` | |
|
||||
|
||||
## 事件
|
||||
|
||||
| 参数 | 说明 |
|
||||
| --------------- | --------------- |
|
||||
| init(echarts, chart => {}) | 初始化调用函数,第一个参数是传入`echarts`,第二个参数是回调函数,回调函数的参数是 `chart` 实例 |
|
||||
| setChart(chart => {}) | 已经初始化后,请使用这个方法,是个回调函数,参数是 `chart` 实例 |
|
||||
| setOption(data) | [图表配置项](https://echarts.apache.org/zh/option.html#title),用于更新 ,传递是数据 `option` |
|
||||
| clear() | 清空当前实例,会移除实例中所有的组件和图表。 |
|
||||
| dispose() | 销毁实例 |
|
||||
| showLoading() | 显示加载 |
|
||||
| hideLoading() | 隐藏加载 |
|
||||
| [canvasToTempFilePath](https://uniapp.dcloud.io/api/canvas/canvasToTempFilePath.html#canvastotempfilepath)(opt) | 用于生成图片,与官方使用方法一致,但不需要传`canvasId` |
|
||||
|
||||
|
||||
## 打赏
|
||||
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。
|
||||

|
||||

|
|
@ -0,0 +1,129 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
html,
|
||||
body,
|
||||
.canvas {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="canvas" id="limeChart"></div>
|
||||
<script type="text/javascript" src="./uni.webview.1.5.3.js"></script>
|
||||
<script type="text/javascript" src="./echarts.min.js"></script>
|
||||
<script type="text/javascript" src="./ecStat.min.js"></script>
|
||||
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@latest/dist/echarts-liquidfill.min.js"></script> -->
|
||||
<script>
|
||||
let chart = null;
|
||||
let cache = [];
|
||||
console.log = function(...agrs) {
|
||||
postMessage(agrs)
|
||||
}
|
||||
function emit(event, data) {
|
||||
let dataStr = JSON.stringify(data, stringify)
|
||||
postMessage({
|
||||
event,
|
||||
data: dataStr
|
||||
})
|
||||
cache = []
|
||||
}
|
||||
function postMessage(data) {
|
||||
uni.postMessage({
|
||||
data
|
||||
});
|
||||
}
|
||||
function stringify(key, value) {
|
||||
if (typeof value === 'object' && value !== null) {
|
||||
if (cache.indexOf(value) !== -1) {
|
||||
return;
|
||||
}
|
||||
cache.push(value);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
function parse(name, callback, options) {
|
||||
const optionNameReg = /[\w]+\.setOption\(([\w]+\.)?([\w]+)\)/
|
||||
if (optionNameReg.test(callback)) {
|
||||
const optionNames = callback.match(optionNameReg)
|
||||
if(optionNames[1]) {
|
||||
const _this = optionNames[1].split('.')[0]
|
||||
window[_this] = {}
|
||||
window[_this][optionNames[2]] = options
|
||||
return optionNames[2]
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
function init(callback, options, opts = {}, theme = null) {
|
||||
if(!chart) {
|
||||
chart = echarts.init(document.getElementById('limeChart'), theme, opts)
|
||||
if(options) {
|
||||
chart.setOption(options)
|
||||
}
|
||||
// const name = parse('a', callback, options)
|
||||
// console.log('options::', callback)
|
||||
// if(name) this[name] = options
|
||||
// eval(`a = ${callback};`)
|
||||
// if(a) {a(chart)}
|
||||
}
|
||||
}
|
||||
|
||||
function setChart(callback, options) {
|
||||
if(!callback) return
|
||||
if(chart && callback && options) {
|
||||
var r = null
|
||||
const name = parse('r', callback, options)
|
||||
if(name) this[name] = options
|
||||
eval(`r = ${callback};`)
|
||||
if(r) {r(chart)}
|
||||
}
|
||||
}
|
||||
function setOption(data) {
|
||||
if (chart) chart.setOption(data[0], data[1])
|
||||
}
|
||||
function showLoading(data) {
|
||||
if (chart) chart.showLoading(data[0], data[1])
|
||||
}
|
||||
|
||||
function hideLoading() {
|
||||
if (chart) chart.hideLoading()
|
||||
}
|
||||
|
||||
function clear() {
|
||||
if (chart) chart.clear()
|
||||
|
||||
}
|
||||
|
||||
function dispose() {
|
||||
if (chart) chart.dispose()
|
||||
}
|
||||
function resize(size) {
|
||||
if (chart) chart.resize(size)
|
||||
}
|
||||
|
||||
function canvasToTempFilePath(opt = {}) {
|
||||
if (chart) {
|
||||
const src = chart.getDataURL(opt)
|
||||
postMessage({
|
||||
file: true,
|
||||
data: src
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,177 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
html,
|
||||
body,
|
||||
.canvas {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="canvas" id="limeChart"></div>
|
||||
<script type="text/javascript" src="./uni.webview.1.5.3.js"></script>
|
||||
<script type="text/javascript" src="./echarts.min.js"></script>
|
||||
<script type="text/javascript" src="./ecStat.min.js"></script>
|
||||
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@latest/dist/echarts-liquidfill.min.js"></script> -->
|
||||
<script>
|
||||
let chart = null;
|
||||
let cache = [];
|
||||
console.log = function(...agrs) {
|
||||
postMessage(agrs)
|
||||
}
|
||||
|
||||
function emit(event, data) {
|
||||
let dataStr = JSON.stringify(data, stringify)
|
||||
postMessage({
|
||||
event,
|
||||
data: dataStr
|
||||
})
|
||||
cache = []
|
||||
}
|
||||
|
||||
function postMessage(data) {
|
||||
uni.postMessage({
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
function stringify(key, value) {
|
||||
if (typeof value === 'object' && value !== null) {
|
||||
if (cache.indexOf(value) !== -1) {
|
||||
return;
|
||||
}
|
||||
cache.push(value);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function parse(name, callback, options) {
|
||||
const optionNameReg = /[\w]+\.setOption\(([\w]+\.)?([\w]+)\)/
|
||||
if (optionNameReg.test(callback)) {
|
||||
const optionNames = callback.match(optionNameReg)
|
||||
if (optionNames[1]) {
|
||||
const _this = optionNames[1].split('.')[0]
|
||||
window[_this] = {}
|
||||
window[_this][optionNames[2]] = options
|
||||
return optionNames[2]
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
function init(callback, options, opts = {}, theme = null) {
|
||||
if (!chart) {
|
||||
chart = echarts.init(document.getElementById('limeChart'), theme, opts)
|
||||
if (options) {
|
||||
chart.setOption(options)
|
||||
}
|
||||
// const name = parse('a', callback, options)
|
||||
// console.log('options::', callback)
|
||||
// if(name) this[name] = options
|
||||
// eval(`a = ${callback};`)
|
||||
// if(a) {a(chart)}
|
||||
}
|
||||
}
|
||||
|
||||
function setChart(callback, options) {
|
||||
if (!callback) return
|
||||
if (chart && callback && options) {
|
||||
var r = null
|
||||
const name = parse('r', callback, options)
|
||||
if (name) this[name] = options
|
||||
eval(`r = ${callback};`)
|
||||
if (r) {
|
||||
r(chart)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setOption(data) {
|
||||
if (chart) chart.setOption(data[0], data[1])
|
||||
}
|
||||
|
||||
function showLoading(data) {
|
||||
if (chart) chart.showLoading(data[0], data[1])
|
||||
}
|
||||
|
||||
function hideLoading() {
|
||||
if (chart) chart.hideLoading()
|
||||
}
|
||||
|
||||
function clear() {
|
||||
if (chart) chart.clear()
|
||||
|
||||
}
|
||||
|
||||
function dispose() {
|
||||
if (chart) chart.dispose()
|
||||
}
|
||||
|
||||
function resize(size) {
|
||||
if (chart) chart.resize(size)
|
||||
}
|
||||
|
||||
function canvasToTempFilePath(opt = {}) {
|
||||
if (chart) {
|
||||
const src = chart.getDataURL(opt)
|
||||
postMessage({
|
||||
file: true,
|
||||
data: src
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function on(data) {
|
||||
if (chart && data.length > 0) {
|
||||
const [type, query] = data
|
||||
const useQuery = query && typeof query != 'function'
|
||||
const key = `${type}${useQuery ? JSON.stringify(query): '' }`
|
||||
if (query) {
|
||||
chart.on(type, query, (options) => {
|
||||
const obj = {}
|
||||
Object.keys(options).forEach(key => {
|
||||
if (key != 'event') {
|
||||
obj[key] = options[key]
|
||||
}
|
||||
})
|
||||
emit(`@${key}`, {
|
||||
event: key,
|
||||
options: obj
|
||||
})
|
||||
})
|
||||
} else {
|
||||
chart.on(type, (options) => {
|
||||
|
||||
const obj = {}
|
||||
Object.keys(options).forEach(key => {
|
||||
if (key != 'event') {
|
||||
obj[key] = options[key]
|
||||
}
|
||||
|
||||
})
|
||||
emit(`@${key}`, {
|
||||
event: key,
|
||||
options: obj
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,177 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
html,
|
||||
body,
|
||||
.canvas {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="canvas" id="limeChart"></div>
|
||||
<script type="text/javascript" src="./uni.webview.1.5.5.js"></script>
|
||||
<script type="text/javascript" src="./echarts.min.js"></script>
|
||||
<script type="text/javascript" src="./ecStat.min.js"></script>
|
||||
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-liquidfill@latest/dist/echarts-liquidfill.min.js"></script> -->
|
||||
<script>
|
||||
let chart = null;
|
||||
let cache = [];
|
||||
console.log = function() {
|
||||
emit('log', {
|
||||
log: arguments,
|
||||
})
|
||||
}
|
||||
|
||||
function emit(event, data) {
|
||||
postMessage({
|
||||
event,
|
||||
data
|
||||
})
|
||||
cache = []
|
||||
}
|
||||
|
||||
function postMessage(data) {
|
||||
uni.webView.postMessage({
|
||||
data
|
||||
})
|
||||
// window.__uniapp_x_.postMessage(JSON.stringify(data))
|
||||
};
|
||||
|
||||
function stringify(key, value) {
|
||||
if (typeof value === 'object' && value !== null) {
|
||||
if (cache.indexOf(value) !== -1) {
|
||||
return;
|
||||
}
|
||||
cache.push(value);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function parse(name, callback, options) {
|
||||
const optionNameReg = /[\w]+\.setOption\(([\w]+\.)?([\w]+)\)/
|
||||
if (optionNameReg.test(callback)) {
|
||||
const optionNames = callback.match(optionNameReg)
|
||||
if (optionNames[1]) {
|
||||
const _this = optionNames[1].split('.')[0]
|
||||
window[_this] = {}
|
||||
window[_this][optionNames[2]] = options
|
||||
return optionNames[2]
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
function init(callback, options, opts, theme) {
|
||||
if (!chart) {
|
||||
chart = echarts.init(document.getElementById('limeChart'), theme, opts)
|
||||
|
||||
if (options) {
|
||||
chart.setOption(options)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function on(data) {
|
||||
if (chart && data.length > 0) {
|
||||
const [type, query] = data
|
||||
const key = `${type}${JSON.stringify(query||'')}`
|
||||
if (query) {
|
||||
chart.on(type, query, function(options) {
|
||||
var obj = {};
|
||||
Object.keys(options).forEach(function(key) {
|
||||
if (key != 'event') {
|
||||
obj[key] = options[key];
|
||||
}
|
||||
});
|
||||
emit(key, {
|
||||
event: key,
|
||||
options: obj,
|
||||
});
|
||||
});
|
||||
} else {
|
||||
chart.on(type, function(options) {
|
||||
var obj = {};
|
||||
Object.keys(options).forEach(function(key) {
|
||||
if (key != 'event') {
|
||||
obj[key] = options[key];
|
||||
}
|
||||
});
|
||||
emit(key, {
|
||||
event: key,
|
||||
options: obj,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function setChart(callback, options) {
|
||||
if (!callback) return
|
||||
if (chart && callback && options) {
|
||||
var r = null
|
||||
const name = parse('r', callback, options)
|
||||
if (name) this[name] = options
|
||||
eval(`r = ${callback};`)
|
||||
if (r) {
|
||||
r(chart)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setOption(data) {
|
||||
if (chart) chart.setOption(data[0], data[1])
|
||||
}
|
||||
|
||||
function showLoading(data) {
|
||||
if (chart) chart.showLoading(data[0], data[1])
|
||||
}
|
||||
|
||||
function hideLoading() {
|
||||
if (chart) chart.hideLoading()
|
||||
}
|
||||
|
||||
function clear() {
|
||||
if (chart) chart.clear()
|
||||
|
||||
}
|
||||
|
||||
function dispose() {
|
||||
if (chart) chart.dispose()
|
||||
}
|
||||
|
||||
function resize(size) {
|
||||
if (chart) chart.resize(size)
|
||||
}
|
||||
|
||||
function canvasToTempFilePath(opt) {
|
||||
if (chart) {
|
||||
delete opt.success
|
||||
const src = chart.getDataURL(opt)
|
||||
postMessage({
|
||||
// event: 'file',
|
||||
file: src
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('touchmove', () => {
|
||||
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,320 @@
|
|||
## 2.5.0-20230101(2023-01-01)
|
||||
- 秋云图表组件 修改条件编译顺序,确保uniapp的cli方式的项目依赖不完整时可以正常显示
|
||||
- 秋云图表组件 恢复props属性directory的使用,以修复vue3项目中,开启echarts后,echarts目录识别错误的bug
|
||||
- uCharts.js 修复区域图、混合图只有一个数据时图表显示不正确的bug
|
||||
- uCharts.js 修复折线图、区域图中时间轴类别图表tooltip指示点显示不正确的bug
|
||||
- uCharts.js 修复x轴使用labelCount时,并且boundaryGap = 'justify' 并且关闭Y轴显示的时候,最后一个坐标值不显示的bug
|
||||
- uCharts.js 修复折线图只有一组数据时 ios16 渲染颜色不正确的bug
|
||||
- uCharts.js 修复玫瑰图半径显示不正确的bug
|
||||
- uCharts.js 柱状图、山峰图增加正负图功能,y轴网格如果需要显示0轴则由 min max 及 splitNumber 确定,后续版本优化自动显示0轴
|
||||
- uCharts.js 柱状图column增加 opts.extra.column.labelPosition,数据标签位置,有效值为 outside外部, insideTop内顶部, center内中间, bottom内底部
|
||||
- uCharts.js 雷达图radar增加 opts.extra.radar.labelShow,否显示各项标识文案是,默认true
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.boxPadding,提示窗边框填充距离,默认3px
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.fontSize,提示窗字体大小配置,默认13px
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.lineHeight,提示窗文字行高,默认20px
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.legendShow,是否显示左侧图例,默认true
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.legendShape,图例形状,图例标识样式,有效值为 auto自动跟随图例, diamond◆, circle●, triangle▲, square■, rect▬, line-
|
||||
- uCharts.js 标记线markLine增加 opts.extra.markLine.labelFontSize,字体大小配置,默认13px
|
||||
- uCharts.js 标记线markLine增加 opts.extra.markLine.labelPadding,标签边框内填充距离,默认6px
|
||||
- uCharts.js 折线图line增加 opts.extra.line.linearType,渐变色类型,可选值 none关闭渐变色,custom 自定义渐变色。使用自定义渐变色时请赋值serie.linearColor作为颜色值
|
||||
- uCharts.js 折线图line增加 serie.linearColor,渐变色数组,格式为2维数组[起始位置,颜色值],例如[[0,'#0EE2F8'],[0.3,'#2BDCA8'],[0.6,'#1890FF'],[1,'#9A60B4']]
|
||||
- uCharts.js 折线图line增加 opts.extra.line.onShadow,是否开启折线阴影,开启后请赋值serie.setShadow阴影设置
|
||||
- uCharts.js 折线图line增加 serie.setShadow,阴影配置,格式为4位数组:[offsetX,offsetY,blur,color]
|
||||
- uCharts.js 折线图line增加 opts.extra.line.animation,动画效果方向,可选值为vertical 垂直动画效果,horizontal 水平动画效果
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.lineHeight,X轴字体行高,默认20px
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.marginTop,X轴文字距离轴线的距离,默认0px
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.title,当前X轴标题
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.titleFontSize,标题字体大小,默认13px
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.titleOffsetY,标题纵向偏移距离,负数为向上偏移,正数向下偏移
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.titleOffsetX,标题横向偏移距离,负数为向左偏移,正数向右偏移
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.titleFontColor,标题字体颜色,默认#666666
|
||||
|
||||
## 报错TypeError: Cannot read properties of undefined (reading 'length')
|
||||
- 如果是uni-modules版本组件,请先登录HBuilderX账号;
|
||||
- 在HBuilderX中的manifest.json,点击重新获取uniapp的appid,或者删除appid重新粘贴,重新运行;
|
||||
- 如果是cli项目请使用码云上的非uniCloud版本组件;
|
||||
- 或者添加uniCloud的依赖;
|
||||
- 或者使用原生uCharts;
|
||||
## 2.4.5-20221130(2022-11-30)
|
||||
- uCharts.js 优化tooltip当文字很多变为左侧显示时,如果画布仍显显示不下,提示框错位置变为以左侧0位置起画
|
||||
- uCharts.js 折线图修复特殊情况下只有单点数据,并改变线宽后点变为圆形的bug
|
||||
- uCharts.js 修复Y轴disabled启用后无效并报错的bug
|
||||
- uCharts.js 修复仪表盘起始结束角度特殊情况下显示不正确的bug
|
||||
- uCharts.js 雷达图新增参数 opts.extra.radar.radius , 自定义雷达图半径
|
||||
- uCharts.js 折线图、区域图增加tooltip指示点,opts.extra.line.activeType/opts.extra.area.activeType,可选值"none"不启用激活指示点,"hollow"空心点模式,"solid"实心点模式
|
||||
## 2.4.4-20221102(2022-11-02)
|
||||
- 秋云图表组件 修复使用echarts时reload、reshow无法调用重新渲染的bug,[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/40)
|
||||
- 秋云图表组件 修复使用echarts时,初始化时宽高不正确的bug,[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/42)
|
||||
- 秋云图表组件 修复uniapp的h5使用history模式时,无法加载echarts的bug
|
||||
- 秋云图表组件 小程序端@complete、@scrollLeft、@scrollRight、@getTouchStart、@getTouchMove、@getTouchEnd事件增加opts参数传出,方便一些特殊需求的交互获取数据。
|
||||
|
||||
- uCharts.js 修复calTooltipYAxisData方法内formatter格式化方法未与y轴方法同步的问题,[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/43)
|
||||
- uCharts.js 地图新增参数opts.series[i].fillOpacity,以透明度方式来设置颜色过度效果,[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/38)
|
||||
- uCharts.js 地图新增参数opts.extra.map.active,是否启用点击激活变色
|
||||
- uCharts.js 地图新增参数opts.extra.map.activeTextColor,是否启用点击激活变色
|
||||
- uCharts.js 地图新增渲染完成事件renderComplete
|
||||
- uCharts.js 漏斗图修复当部分数据相同时tooltip提示窗点击错误的bug
|
||||
- uCharts.js 漏斗图新增参数series.data[i].centerText 居中标签文案
|
||||
- uCharts.js 漏斗图新增参数series.data[i].centerTextSize 居中标签文案字体大小,默认opts.fontSize
|
||||
- uCharts.js 漏斗图新增参数series.data[i].centerTextColor 居中标签文案字体颜色,默认#FFFFFF
|
||||
- uCharts.js 漏斗图新增参数opts.extra.funnel.minSize 最小值的最小宽度,默认0
|
||||
- uCharts.js 进度条新增参数opts.extra.arcbar.direction,动画方向,可选值为cw顺时针、ccw逆时针
|
||||
- uCharts.js 混合图新增参数opts.extra.mix.line.width,折线的宽度,默认2
|
||||
- uCharts.js 修复tooltip开启horizentalLine水平横线标注时,图表显示错位的bug
|
||||
- uCharts.js 优化tooltip当文字很多变为左侧显示时,如果画布仍显显示不下,提示框错位置变为以左侧0位置起画
|
||||
- uCharts.js 修复开启滚动条后X轴文字超出绘图区域后的隐藏逻辑
|
||||
- uCharts.js 柱状图、条状图修复堆叠模式不能通过{value,color}赋值单个柱子颜色的问题
|
||||
- uCharts.js 气泡图修复不识别series.textSize和series.textColor的bug
|
||||
|
||||
## 报错TypeError: Cannot read properties of undefined (reading 'length')
|
||||
1. 如果是uni-modules版本组件,请先登录HBuilderX账号;
|
||||
2. 在HBuilderX中的manifest.json,点击重新获取uniapp的appid,或者删除appid重新粘贴,重新运行;
|
||||
3. 如果是cli项目请使用码云上的非uniCloud版本组件;
|
||||
4. 或者添加uniCloud的依赖;
|
||||
5. 或者使用原生uCharts;
|
||||
## 2.4.3-20220505(2022-05-05)
|
||||
- 秋云图表组件 修复开启canvas2d后将series赋值为空数组显示加载图标时,再次赋值后画布闪动的bug
|
||||
- 秋云图表组件 修复升级hbx最新版后ECharts的highlight方法报错的bug
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.gridEval,数据点位网格抽希,默认1
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.axisLabel, 是否显示刻度点值,默认false
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.axisLabelTofix,刻度点值小数位数,默认0
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointShow,是否显示末端刻度圆点,默认false
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointRadius,刻度圆点的半径,默认3
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointColor,刻度圆点的颜色,默认#cccccc
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.linearType,渐变色类型,可选值"none"关闭渐变,"custom"开启渐变
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.customColor,自定义渐变颜色,数组类型对应series的数组长度以匹配不同series颜色的不同配色方案,例如["#FA7D8D", "#EB88E2"]
|
||||
- uCharts.js 雷达图优化支持series.textColor、series.textSize属性
|
||||
- uCharts.js 柱状图中温度计式图标,优化支持全圆角类型,修复边框有缝隙的bug,详见官网【演示】中的温度计图表
|
||||
- uCharts.js 柱状图新增参数opts.extra.column.activeWidth,当前点击柱状图的背景宽度,默认一个单元格单位
|
||||
- uCharts.js 混合图增加opts.extra.mix.area.gradient 区域图是否开启渐变色
|
||||
- uCharts.js 混合图增加opts.extra.mix.area.opacity 区域图透明度,默认0.2
|
||||
- uCharts.js 饼图、圆环图、玫瑰图、漏斗图,增加opts.series[0].data[i].labelText,自定义标签文字,避免formatter格式化的繁琐,详见官网【演示】中的饼图
|
||||
- uCharts.js 饼图、圆环图、玫瑰图、漏斗图,增加opts.series[0].data[i].labelShow,自定义是否显示某一个指示标签,避免因饼图类别太多导致标签重复或者居多导致图形变形的问题,详见官网【演示】中的饼图
|
||||
- uCharts.js 增加opts.series[i].legendText/opts.series[0].data[i].legendText(与series.name同级)自定义图例显示文字的方法
|
||||
- uCharts.js 优化X轴、Y轴formatter格式化方法增加形参,统一为fromatter:function(value,index,opts){}
|
||||
- uCharts.js 修复横屏模式下无法使用双指缩放方法的bug
|
||||
- uCharts.js 修复当只有一条数据或者多条数据值相等的时候Y轴自动计算的最大值错误的bug
|
||||
- 【官网模板】增加外部自定义图例与图表交互的例子,[点击跳转](https://www.ucharts.cn/v2/#/layout/info?id=2)
|
||||
|
||||
## 注意:非unimodules 版本如因更新 hbx 至 3.4.7 导致报错如下,请到码云更新非 unimodules 版本组件,[点击跳转](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6)
|
||||
> Error in callback for immediate watcher "uchartsOpts": "SyntaxError: Unexpected token u in JSON at position 0"
|
||||
## 2.4.2-20220421(2022-04-21)
|
||||
- 秋云图表组件 修复HBX升级3.4.6.20220420版本后echarts报错的问题
|
||||
## 2.4.2-20220420(2022-04-20)
|
||||
## 重要!此版本uCharts新增了很多功能,修复了诸多已知问题
|
||||
- 秋云图表组件 新增onzoom开启双指缩放功能(仅uCharts),前提需要直角坐标系类图表类型,并且ontouch为true、opts.enableScroll为true,详见实例项目K线图
|
||||
- 秋云图表组件 新增optsWatch是否监听opts变化,关闭optsWatch后,动态修改opts不会触发图表重绘
|
||||
- 秋云图表组件 修复开启canvas2d功能后,动态更新数据后画布闪动的bug
|
||||
- 秋云图表组件 去除directory属性,改为自动获取echarts.min.js路径(升级不受影响)
|
||||
- 秋云图表组件 增加getImage()方法及@getImage事件,通过ref调用getImage()方法获,触发@getImage事件获取当前画布的base64图片文件流。
|
||||
- 秋云图表组件 支付宝、字节跳动、飞书、快手小程序支持开启canvas2d同层渲染设置。
|
||||
- 秋云图表组件 新增加【非uniCloud】版本组件,避免有些不需要uniCloud的使用组件发布至小程序需要提交隐私声明问题,请到码云[【非uniCloud版本】](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6),或npm[【非uniCloud版本】](https://www.npmjs.com/package/@qiun/uni-ucharts)下载使用。
|
||||
- uCharts.js 新增dobuleZoom双指缩放功能
|
||||
- uCharts.js 新增山峰图type="mount",数据格式为饼图类格式,不需要传入categories,具体详见新版官网在线演示
|
||||
- uCharts.js 修复折线图当数据中存在null时tooltip报错的bug
|
||||
- uCharts.js 修复饼图类当画布比较小时自动计算的半径是负数报错的bug
|
||||
- uCharts.js 统一各图表类型的series.formatter格式化方法的形参为(val, index, series, opts),方便格式化时有更多参数可用
|
||||
- uCharts.js 标记线功能增加labelText自定义显示文字,增加labelAlign标签显示位置(左侧或右侧),增加标签显示位置微调labelOffsetX、labelOffsetY
|
||||
- uCharts.js 修复条状图当数值很小时开启圆角后样式错误的bug
|
||||
- uCharts.js 修复X轴开启disabled后,X轴仍占用空间的bug
|
||||
- uCharts.js 修复X轴开启滚动条并且开启rotateLabel后,X轴文字与滚动条重叠的bug
|
||||
- uCharts.js 增加X轴rotateAngle文字旋转自定义角度,取值范围(-90至90)
|
||||
- uCharts.js 修复地图文字标签层级显示不正确的bug
|
||||
- uCharts.js 修复饼图、圆环图、玫瑰图当数据全部为0的时候不显示数据标签的bug
|
||||
- uCharts.js 修复当opts.padding上边距为0时,Y轴顶部刻度标签位置不正确的bug
|
||||
|
||||
## 另外我们还开发了各大原生小程序组件,已发布至码云和npm
|
||||
[https://gitee.com/uCharts/uCharts](https://gitee.com/uCharts/uCharts)
|
||||
[https://www.npmjs.com/~qiun](https://www.npmjs.com/~qiun)
|
||||
|
||||
## 对于原生uCharts文档我们已上线新版官方网站,详情点击下面链接进入官网
|
||||
[https://www.uCharts.cn/v2/](https://www.ucharts.cn/v2/)
|
||||
## 2.3.7-20220122(2022-01-22)
|
||||
## 重要!使用vue3编译,请使用cli模式并升级至最新依赖,HbuilderX编译需要使用3.3.8以上版本
|
||||
- uCharts.js 修复uni-app平台组件模式使用vue3编译到小程序报错的bug。
|
||||
## 2.3.7-20220118(2022-01-18)
|
||||
## 注意,使用vue3的前提是需要3.3.8.20220114-alpha版本的HBuilder!
|
||||
## 2.3.67-20220118(2022-01-18)
|
||||
- 秋云图表组件 组件初步支持vue3,全端编译会有些问题,具体详见下面修改:
|
||||
1. 小程序端运行时,在uni_modules文件夹的qiun-data-charts.js中搜索 new uni_modules_qiunDataCharts_js_sdk_uCharts_uCharts.uCharts,将.uCharts去掉。
|
||||
2. 小程序端发行时,在uni_modules文件夹的qiun-data-charts.js中搜索 new e.uCharts,将.uCharts去掉,变为 new e。
|
||||
3. 如果觉得上述步骤比较麻烦,如果您的项目只编译到小程序端,可以修改u-charts.js最后一行导出方式,将 export default uCharts;变更为 export default { uCharts: uCharts }; 这样变更后,H5和App端的renderjs会有问题,请开发者自行选择。(此问题非组件问题,请等待DC官方修复Vue3的小程序端)
|
||||
## 2.3.6-20220111(2022-01-11)
|
||||
- 秋云图表组件 修改组件 props 属性中的 background 默认值为 rgba(0,0,0,0)
|
||||
## 2.3.6-20211201(2021-12-01)
|
||||
- uCharts.js 修复bar条状图开启圆角模式时,值很小时圆角渲染错误的bug
|
||||
## 2.3.5-20211014(2021-10-15)
|
||||
- uCharts.js 增加vue3的编译支持(仅原生uCharts,qiun-data-charts组件后续会支持,请关注更新)
|
||||
## 2.3.4-20211012(2021-10-12)
|
||||
- 秋云图表组件 修复 mac os x 系统 mouseover 事件丢失的 bug
|
||||
## 2.3.3-20210706(2021-07-06)
|
||||
- uCharts.js 增加雷达图开启数据点值(opts.dataLabel)的显示
|
||||
## 2.3.2-20210627(2021-06-27)
|
||||
- 秋云图表组件 修复tooltipCustom个别情况下传值不正确报错TypeError: Cannot read property 'name' of undefined的bug
|
||||
## 2.3.1-20210616(2021-06-16)
|
||||
- uCharts.js 修复圆角柱状图使用4角圆角时,当数值过大时不正确的bug
|
||||
## 2.3.0-20210612(2021-06-12)
|
||||
- uCharts.js 【重要】uCharts增加nvue兼容,可在nvue项目中使用gcanvas组件渲染uCharts,[详见码云uCharts-demo-nvue](https://gitee.com/uCharts/uCharts)
|
||||
- 秋云图表组件 增加tapLegend属性,是否开启图例点击交互事件
|
||||
- 秋云图表组件 getIndex事件中增加返回uCharts实例中的opts参数,以便在页面中调用参数
|
||||
- 示例项目 pages/other/other.vue增加app端自定义tooltip的方法,详见showOptsTooltip方法
|
||||
## 2.2.1-20210603(2021-06-03)
|
||||
- uCharts.js 修复饼图、圆环图、玫瑰图,当起始角度不为0时,tooltip位置不准确的bug
|
||||
- uCharts.js 增加温度计式柱状图开启顶部半圆形的配置
|
||||
## 2.2.0-20210529(2021-05-29)
|
||||
- uCharts.js 增加条状图type="bar"
|
||||
- 示例项目 pages/ucharts/ucharts.vue增加条状图的demo
|
||||
## 2.1.7-20210524(2021-05-24)
|
||||
- uCharts.js 修复大数据量模式下曲线图不平滑的bug
|
||||
## 2.1.6-20210523(2021-05-23)
|
||||
- 秋云图表组件 修复小程序端开启滚动条更新数据后滚动条位置不符合预期的bug
|
||||
## 2.1.5-2021051702(2021-05-17)
|
||||
- uCharts.js 修复自定义Y轴min和max值为0时不能正确显示的bug
|
||||
## 2.1.5-20210517(2021-05-17)
|
||||
- uCharts.js 修复Y轴自定义min和max时,未按指定的最大值最小值显示坐标轴刻度的bug
|
||||
## 2.1.4-20210516(2021-05-16)
|
||||
- 秋云图表组件 优化onWindowResize防抖方法
|
||||
- 秋云图表组件 修复APP端uCharts更新数据时,清空series显示loading图标后再显示图表,图表抖动的bug
|
||||
- uCharts.js 修复开启canvas2d后,x轴、y轴、series自定义字体大小未按比例缩放的bug
|
||||
- 示例项目 修复format-e.vue拼写错误导致app端使用uCharts渲染图表
|
||||
## 2.1.3-20210513(2021-05-13)
|
||||
- 秋云图表组件 修改uCharts变更chartData数据为updateData方法,支持带滚动条的数据动态打点
|
||||
- 秋云图表组件 增加onWindowResize防抖方法 fix by ど誓言,如尘般染指流年づ
|
||||
- 秋云图表组件 H5或者APP变更chartData数据显示loading图表时,原数据闪现的bug
|
||||
- 秋云图表组件 props增加errorReload禁用错误点击重新加载的方法
|
||||
- uCharts.js 增加tooltip显示category(x轴对应点位)标题的功能,opts.extra.tooltip.showCategory,默认为false
|
||||
- uCharts.js 修复mix混合图只有柱状图时,tooltip的分割线显示位置不正确的bug
|
||||
- uCharts.js 修复开启滚动条,图表在拖动中动态打点,滚动条位置不正确的bug
|
||||
- uCharts.js 修复饼图类数据格式为echarts数据格式,series为空数组报错的bug
|
||||
- 示例项目 修改uCharts.js更新到v2.1.2版本后,@getIndex方法获取索引值变更为e.currentIndex.index
|
||||
- 示例项目 pages/updata/updata.vue增加滚动条拖动更新(数据动态打点)的demo
|
||||
- 示例项目 pages/other/other.vue增加errorReload禁用错误点击重新加载的demo
|
||||
## 2.1.2-20210509(2021-05-09)
|
||||
秋云图表组件 修复APP端初始化时就传入chartData或lacaldata不显示图表的bug
|
||||
## 2.1.1-20210509(2021-05-09)
|
||||
- 秋云图表组件 变更ECharts的eopts配置在renderjs内执行,支持在config-echarts.js配置文件内写function配置。
|
||||
- 秋云图表组件 修复APP端报错Prop being mutated: "onmouse"错误的bug。
|
||||
- 秋云图表组件 修复APP端报错Error: Not Found:Page[6][-1,27] at view.umd.min.js:1的bug。
|
||||
## 2.1.0-20210507(2021-05-07)
|
||||
- 秋云图表组件 修复初始化时就有数据或者数据更新的时候loading加载动画闪动的bug
|
||||
- uCharts.js 修复x轴format方法categories为字符串类型时返回NaN的bug
|
||||
- uCharts.js 修复series.textColor、legend.fontColor未执行全局默认颜色的bug
|
||||
## 2.1.0-20210506(2021-05-06)
|
||||
- 秋云图表组件 修复极个别情况下报错item.properties undefined的bug
|
||||
- 秋云图表组件 修复极个别情况下关闭加载动画reshow不起作用,无法显示图表的bug
|
||||
- 示例项目 pages/ucharts/ucharts.vue 增加时间轴折线图(type="tline")、时间轴区域图(type="tarea")、散点图(type="scatter")、气泡图demo(type="bubble")、倒三角形漏斗图(opts.extra.funnel.type="triangle")、金字塔形漏斗图(opts.extra.funnel.type="pyramid")
|
||||
- 示例项目 pages/format-u/format-u.vue 增加X轴format格式化示例
|
||||
- uCharts.js 升级至v2.1.0版本
|
||||
- uCharts.js 修复 玫瑰图面积模式点击tooltip位置不正确的bug
|
||||
- uCharts.js 修复 玫瑰图点击图例,只剩一个类别显示空白的bug
|
||||
- uCharts.js 修复 饼图类图点击图例,其他图表tooltip位置某些情况下不准的bug
|
||||
- uCharts.js 修复 x轴为矢量轴(时间轴)情况下,点击tooltip位置不正确的bug
|
||||
- uCharts.js 修复 词云图获取点击索引偶尔不准的bug
|
||||
- uCharts.js 增加 直角坐标系图表X轴format格式化方法(原生uCharts.js用法请使用formatter)
|
||||
- uCharts.js 增加 漏斗图扩展配置,倒三角形(opts.extra.funnel.type="triangle"),金字塔形(opts.extra.funnel.type="pyramid")
|
||||
- uCharts.js 增加 散点图(opts.type="scatter")、气泡图(opts.type="bubble")
|
||||
- 后期计划 完善散点图、气泡图,增加markPoints标记点,增加横向条状图。
|
||||
## 2.0.0-20210502(2021-05-02)
|
||||
- uCharts.js 修复词云图获取点击索引不正确的bug
|
||||
## 2.0.0-20210501(2021-05-01)
|
||||
- 秋云图表组件 修复QQ小程序、百度小程序在关闭动画效果情况下,v-for循环使用图表,显示不正确的bug
|
||||
## 2.0.0-20210426(2021-04-26)
|
||||
- 秋云图表组件 修复QQ小程序不支持canvas2d的bug
|
||||
- 秋云图表组件 修复钉钉小程序某些情况点击坐标计算错误的bug
|
||||
- uCharts.js 增加 extra.column.categoryGap 参数,柱状图类每个category点位(X轴点)柱子组之间的间距
|
||||
- uCharts.js 增加 yAxis.data[i].titleOffsetY 参数,标题纵向偏移距离,负数为向上偏移,正数向下偏移
|
||||
- uCharts.js 增加 yAxis.data[i].titleOffsetX 参数,标题横向偏移距离,负数为向左偏移,正数向右偏移
|
||||
- uCharts.js 增加 extra.gauge.labelOffset 参数,仪表盘标签文字径向便宜距离,默认13px
|
||||
## 2.0.0-20210422-2(2021-04-22)
|
||||
秋云图表组件 修复 formatterAssign 未判断 args[key] == null 的情况导致栈溢出的 bug
|
||||
## 2.0.0-20210422(2021-04-22)
|
||||
- 秋云图表组件 修复H5、APP、支付宝小程序、微信小程序canvas2d模式下横屏模式的bug
|
||||
## 2.0.0-20210421(2021-04-21)
|
||||
- uCharts.js 修复多行图例的情况下,图例在上方或者下方时,图例float为左侧或者右侧时,第二行及以后的图例对齐方式不正确的bug
|
||||
## 2.0.0-20210420(2021-04-20)
|
||||
- 秋云图表组件 修复微信小程序开启canvas2d模式后,windows版微信小程序不支持canvas2d模式的bug
|
||||
- 秋云图表组件 修改非uni_modules版本为v2.0版本qiun-data-charts组件
|
||||
## 2.0.0-20210419(2021-04-19)
|
||||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX,如仍不好用,请重启电脑;
|
||||
## 如果是cli项目,请尝试清理node_modules,重新install,还不行就删除项目,再重新install。
|
||||
## 此问题已于DCloud官方确认,HBuilderX下个版本会修复。
|
||||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍,右侧蓝色按钮示例项目请看2遍! </font>
|
||||
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- uCharts.js 修复混合图中柱状图单独设置颜色不生效的bug
|
||||
- uCharts.js 修复多Y轴单独设置fontSize时,开启canvas2d后,未对应放大字体的bug
|
||||
## 2.0.0-20210418(2021-04-18)
|
||||
- 秋云图表组件 增加directory配置,修复H5端history模式下如果发布到二级目录无法正确加载echarts.min.js的bug
|
||||
## 2.0.0-20210416(2021-04-16)
|
||||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX,如仍不好用,请重启电脑;
|
||||
## 如果是cli项目,请尝试清理node_modules,重新install,还不行就删除项目,再重新install。
|
||||
## 此问题已于DCloud官方确认,HBuilderX下个版本会修复。
|
||||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍,右侧蓝色按钮示例项目请看2遍! </font>
|
||||
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- 秋云图表组件 修复APP端某些情况下报错`Not Found Page`的bug,fix by 高级bug开发技术员
|
||||
- 示例项目 修复APP端v-for循环某些情况下报错`Not Found Page`的bug,fix by 高级bug开发技术员
|
||||
- uCharts.js 修复非直角坐标系tooltip提示窗右侧超出未变换方向显示的bug
|
||||
## 2.0.0-20210415(2021-04-15)
|
||||
- 秋云图表组件 修复H5端发布到二级目录下echarts无法加载的bug
|
||||
- 秋云图表组件 修复某些情况下echarts.off('finished')移除监听事件报错的bug
|
||||
## 2.0.0-20210414(2021-04-14)
|
||||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX,如仍不好用,请重启电脑;
|
||||
## 如果是cli项目,请尝试清理node_modules,重新install,还不行就删除项目,再重新install。
|
||||
## 此问题已于DCloud官方确认,HBuilderX下个版本会修复。
|
||||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍,右侧蓝色按钮示例项目请看2遍! </font>
|
||||
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- 秋云图表组件 修复H5端在cli项目下ECharts引用地址错误的bug
|
||||
- 示例项目 增加ECharts的formatter用法的示例(详见示例项目format-e.vue)
|
||||
- uCharts.js 增加圆环图中心背景色的配置extra.ring.centerColor
|
||||
- uCharts.js 修复微信小程序安卓端柱状图开启透明色后显示不正确的bug
|
||||
## 2.0.0-20210413(2021-04-13)
|
||||
- 秋云图表组件 修复百度小程序多个图表真机未能正确获取根元素dom尺寸的bug
|
||||
- 秋云图表组件 修复百度小程序横屏模式方向不正确的bug
|
||||
- 秋云图表组件 修改ontouch时,@getTouchStart@getTouchMove@getTouchEnd的触发条件
|
||||
- uCharts.js 修复饼图类数据格式series属性不生效的bug
|
||||
- uCharts.js 增加时序区域图 详见示例项目中ucharts.vue
|
||||
## 2.0.0-20210412-2(2021-04-12)
|
||||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX。如仍不好用,请重启电脑,此问题已于DCloud官方确认,HBuilderX下个版本会修复。
|
||||
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- 秋云图表组件 修复uCharts在APP端横屏模式下不能正确渲染的bug
|
||||
- 示例项目 增加ECharts柱状图渐变色、圆角柱状图、横向柱状图(条状图)的示例
|
||||
## 2.0.0-20210412(2021-04-12)
|
||||
- 秋云图表组件 修复created中判断echarts导致APP端无法识别,改回mounted中判断echarts初始化
|
||||
- uCharts.js 修复2d模式下series.textOffset未乘像素比的bug
|
||||
## 2.0.0-20210411(2021-04-11)
|
||||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件,请重启HBuilderX,并清空小程序开发者工具缓存。
|
||||
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- uCharts.js 折线图区域图增加connectNulls断点续连的功能,详见示例项目中ucharts.vue
|
||||
- 秋云图表组件 变更初始化方法为created,变更type2d默认值为true,优化2d模式下组件初始化后dom获取不到的bug
|
||||
- 秋云图表组件 修复左右布局时,右侧图表点击坐标错误的bug,修复tooltip柱状图自定义颜色显示object的bug
|
||||
## 2.0.0-20210410(2021-04-10)
|
||||
- 修复左右布局时,右侧图表点击坐标错误的bug,修复柱状图自定义颜色tooltip显示object的bug
|
||||
- 增加标记线及柱状图自定义颜色的demo
|
||||
## 2.0.0-20210409(2021-04-08)
|
||||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧【使用HBuilderX导入插件】即可体验,DEMO演示及在线生成工具(v2.0文档)[https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- uCharts.js 修复钉钉小程序百度小程序measureText不准确的bug,修复2d模式下饼图类activeRadius为按比例放大的bug
|
||||
- 修复组件在支付宝小程序端点击位置不准确的bug
|
||||
## 2.0.0-20210408(2021-04-07)
|
||||
- 修复组件在支付宝小程序端不能显示的bug(目前支付宝小程不能点击交互,后续修复)
|
||||
- uCharts.js 修复高分屏下柱状图类,圆弧进度条 自定义宽度不能按比例放大的bug
|
||||
## 2.0.0-20210407(2021-04-06)
|
||||
## v1.0版本已停更,建议转uni_modules版本组件方式调用,点击右侧【使用HBuilderX导入插件】即可体验,DEMO演示及在线生成工具(v2.0文档)[https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## 增加 通过tofix和unit快速格式化y轴的demo add by `howcode`
|
||||
## 增加 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
## 2.0.0-20210406(2021-04-05)
|
||||
# 秋云图表组件+uCharts v2.0版本同步上线,使用方法详见https://demo.ucharts.cn帮助页
|
||||
## 2.0.0(2021-04-05)
|
||||
# 秋云图表组件+uCharts v2.0版本同步上线,使用方法详见https://demo.ucharts.cn帮助页
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<view class="container loading1">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading1',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
.container.loading1 {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
.loading1 .shape1 {
|
||||
-webkit-animation: animation1shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, 16px);
|
||||
transform: translate(16px, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, 16px);
|
||||
transform: translate(16px, 16px);
|
||||
}
|
||||
}
|
||||
.loading1 .shape2 {
|
||||
-webkit-animation: animation1shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, 16px);
|
||||
transform: translate(-16px, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, 16px);
|
||||
transform: translate(-16px, 16px);
|
||||
}
|
||||
}
|
||||
.loading1 .shape3 {
|
||||
-webkit-animation: animation1shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, -16px);
|
||||
transform: translate(16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, -16px);
|
||||
transform: translate(16px, -16px);
|
||||
}
|
||||
}
|
||||
.loading1 .shape4 {
|
||||
-webkit-animation: animation1shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, -16px);
|
||||
transform: translate(-16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, -16px);
|
||||
transform: translate(-16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
|
@ -0,0 +1,170 @@
|
|||
<template>
|
||||
<view class="container loading2">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading2',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading2 {
|
||||
-webkit-transform: rotate(10deg);
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
.container.loading2 .shape {
|
||||
border-radius: 5px;
|
||||
}
|
||||
.container.loading2{
|
||||
-webkit-animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
|
||||
.loading2 .shape1 {
|
||||
-webkit-animation: animation2shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, 20px);
|
||||
transform: translate(20px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, 20px);
|
||||
transform: translate(20px, 20px);
|
||||
}
|
||||
}
|
||||
.loading2 .shape2 {
|
||||
-webkit-animation: animation2shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, 20px);
|
||||
transform: translate(-20px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, 20px);
|
||||
transform: translate(-20px, 20px);
|
||||
}
|
||||
}
|
||||
.loading2 .shape3 {
|
||||
-webkit-animation: animation2shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, -20px);
|
||||
transform: translate(20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, -20px);
|
||||
transform: translate(20px, -20px);
|
||||
}
|
||||
}
|
||||
.loading2 .shape4 {
|
||||
-webkit-animation: animation2shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, -20px);
|
||||
transform: translate(-20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, -20px);
|
||||
transform: translate(-20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
|
@ -0,0 +1,173 @@
|
|||
<template>
|
||||
<view class="container loading3">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading3',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading3 {
|
||||
-webkit-animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
.container.loading3 .shape1 {
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
.container.loading3 .shape2 {
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
.container.loading3 .shape3 {
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
.container.loading3 .shape4 {
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
.loading3 .shape1 {
|
||||
-webkit-animation: animation3shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, 5px);
|
||||
transform: translate(5px, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, 5px);
|
||||
transform: translate(5px, 5px);
|
||||
}
|
||||
}
|
||||
.loading3 .shape2 {
|
||||
-webkit-animation: animation3shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, 5px);
|
||||
transform: translate(-5px, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, 5px);
|
||||
transform: translate(-5px, 5px);
|
||||
}
|
||||
}
|
||||
.loading3 .shape3 {
|
||||
-webkit-animation: animation3shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, -5px);
|
||||
transform: translate(5px, -5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, -5px);
|
||||
transform: translate(5px, -5px);
|
||||
}
|
||||
}
|
||||
.loading3 .shape4 {
|
||||
-webkit-animation: animation3shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, -5px);
|
||||
transform: translate(-5px, -5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, -5px);
|
||||
transform: translate(-5px, -5px);
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,222 @@
|
|||
<template>
|
||||
<view class="container loading5">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading5',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading5 .shape {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
.loading5 .shape1 {
|
||||
animation: animation5shape1 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, 15px);
|
||||
transform: translate(15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, 15px);
|
||||
transform: translate(15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
}
|
||||
.loading5 .shape2 {
|
||||
animation: animation5shape2 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, 15px);
|
||||
transform: translate(-15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, 15px);
|
||||
transform: translate(-15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
}
|
||||
.loading5 .shape3 {
|
||||
animation: animation5shape3 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, -15px);
|
||||
transform: translate(15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, -15px);
|
||||
transform: translate(15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
}
|
||||
.loading5 .shape4 {
|
||||
animation: animation5shape4 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, -15px);
|
||||
transform: translate(-15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, -15px);
|
||||
transform: translate(-15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
|
@ -0,0 +1,229 @@
|
|||
<template>
|
||||
<view class="container loading6">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading6',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading6 {
|
||||
-webkit-animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
.container.loading6 .shape {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
|
||||
.loading6 .shape1 {
|
||||
-webkit-animation: animation6shape1 2s linear 0s infinite normal;
|
||||
animation: animation6shape1 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, 18px);
|
||||
transform: translate(18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, 18px);
|
||||
transform: translate(18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
}
|
||||
.loading6 .shape2 {
|
||||
-webkit-animation: animation6shape2 2s linear 0s infinite normal;
|
||||
animation: animation6shape2 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, 18px);
|
||||
transform: translate(-18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, 18px);
|
||||
transform: translate(-18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
}
|
||||
.loading6 .shape3 {
|
||||
-webkit-animation: animation6shape3 2s linear 0s infinite normal;
|
||||
animation: animation6shape3 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, -18px);
|
||||
transform: translate(18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, -18px);
|
||||
transform: translate(18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
}
|
||||
.loading6 .shape4 {
|
||||
-webkit-animation: animation6shape4 2s linear 0s infinite normal;
|
||||
animation: animation6shape4 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, -18px);
|
||||
transform: translate(-18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, -18px);
|
||||
transform: translate(-18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<view>
|
||||
<Loading1 v-if="loadingType==1"/>
|
||||
<Loading2 v-if="loadingType==2"/>
|
||||
<Loading3 v-if="loadingType==3"/>
|
||||
<Loading4 v-if="loadingType==4"/>
|
||||
<Loading5 v-if="loadingType==5"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Loading1 from "./loading1.vue";
|
||||
import Loading2 from "./loading2.vue";
|
||||
import Loading3 from "./loading3.vue";
|
||||
import Loading4 from "./loading4.vue";
|
||||
import Loading5 from "./loading5.vue";
|
||||
export default {
|
||||
components:{Loading1,Loading2,Loading3,Loading4,Loading5},
|
||||
name: 'qiun-loading',
|
||||
props: {
|
||||
loadingType: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
|
@ -0,0 +1,422 @@
|
|||
/*
|
||||
* uCharts®
|
||||
* 高性能跨平台图表库,支持H5、APP、小程序(微信/支付宝/百度/头条/QQ/360)、Vue、Taro等支持canvas的框架平台
|
||||
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
|
||||
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
|
||||
* 复制使用请保留本段注释,感谢支持开源!
|
||||
*
|
||||
* uCharts®官方网站
|
||||
* https://www.uCharts.cn
|
||||
*
|
||||
* 开源地址:
|
||||
* https://gitee.com/uCharts/uCharts
|
||||
*
|
||||
* uni-app插件市场地址:
|
||||
* http://ext.dcloud.net.cn/plugin?id=271
|
||||
*
|
||||
*/
|
||||
|
||||
// 通用配置项
|
||||
|
||||
// 主题颜色配置:如每个图表类型需要不同主题,请在对应图表类型上更改color属性
|
||||
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
|
||||
|
||||
const cfe = {
|
||||
//demotype为自定义图表类型
|
||||
"type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge","candle","demotype"],
|
||||
//增加自定义图表类型,如果需要categories,请在这里加入您的图表类型例如最后的"demotype"
|
||||
"categories": ["line", "column", "area", "radar", "gauge", "candle","demotype"],
|
||||
//instance为实例变量承载属性,option为eopts承载属性,不要删除
|
||||
"instance": {},
|
||||
"option": {},
|
||||
//下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换
|
||||
"formatter":{
|
||||
"tooltipDemo1":function(res){
|
||||
let result = ''
|
||||
for (let i in res) {
|
||||
if (i == 0) {
|
||||
result += res[i].axisValueLabel + '年销售额'
|
||||
}
|
||||
let value = '--'
|
||||
if (res[i].data !== null) {
|
||||
value = res[i].data
|
||||
}
|
||||
// #ifdef H5
|
||||
result += '\n' + res[i].seriesName + ':' + value + ' 万元'
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
result += '<br/>' + res[i].marker + res[i].seriesName + ':' + value + ' 万元'
|
||||
// #endif
|
||||
}
|
||||
return result;
|
||||
},
|
||||
legendFormat:function(name){
|
||||
return "自定义图例+"+name;
|
||||
},
|
||||
yAxisFormatDemo:function (value, index) {
|
||||
return value + '元';
|
||||
},
|
||||
seriesFormatDemo:function(res){
|
||||
return res.name + '年' + res.value + '元';
|
||||
}
|
||||
},
|
||||
//这里演示了自定义您的图表类型的option,可以随意命名,之后在组件上 type="demotype" 后,组件会调用这个花括号里的option,如果组件上还存在eopts参数,会将demotype与eopts中option合并后渲染图表。
|
||||
"demotype":{
|
||||
"color": color,
|
||||
//在这里填写echarts的option即可
|
||||
|
||||
},
|
||||
//下面是自定义配置,请添加项目所需的通用配置
|
||||
"column": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'axis'
|
||||
},
|
||||
"grid": {
|
||||
"top": 30,
|
||||
"bottom": 50,
|
||||
"right": 15,
|
||||
"left": 40
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"toolbox": {
|
||||
"show": false,
|
||||
},
|
||||
"xAxis": {
|
||||
"type": 'category',
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
"boundaryGap": true,
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {
|
||||
"type": 'value',
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'bar',
|
||||
"data": [],
|
||||
"barwidth": 20,
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"line": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'axis'
|
||||
},
|
||||
"grid": {
|
||||
"top": 30,
|
||||
"bottom": 50,
|
||||
"right": 15,
|
||||
"left": 40
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"toolbox": {
|
||||
"show": false,
|
||||
},
|
||||
"xAxis": {
|
||||
"type": 'category',
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
"boundaryGap": true,
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {
|
||||
"type": 'value',
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'line',
|
||||
"data": [],
|
||||
"barwidth": 20,
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"area": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'axis'
|
||||
},
|
||||
"grid": {
|
||||
"top": 30,
|
||||
"bottom": 50,
|
||||
"right": 15,
|
||||
"left": 40
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"toolbox": {
|
||||
"show": false,
|
||||
},
|
||||
"xAxis": {
|
||||
"type": 'category',
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
"boundaryGap": true,
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {
|
||||
"type": 'value',
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'line',
|
||||
"data": [],
|
||||
"areaStyle": {},
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"pie": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item'
|
||||
},
|
||||
"grid": {
|
||||
"top": 40,
|
||||
"bottom": 30,
|
||||
"right": 15,
|
||||
"left": 15
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'pie',
|
||||
"data": [],
|
||||
"radius": '50%',
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"ring": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item'
|
||||
},
|
||||
"grid": {
|
||||
"top": 40,
|
||||
"bottom": 30,
|
||||
"right": 15,
|
||||
"left": 15
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'pie',
|
||||
"data": [],
|
||||
"radius": ['40%', '70%'],
|
||||
"avoidLabelOverlap": false,
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
"labelLine": {
|
||||
"show": true
|
||||
},
|
||||
},
|
||||
},
|
||||
"rose": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item'
|
||||
},
|
||||
"legend": {
|
||||
"top": 'bottom'
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'pie',
|
||||
"data": [],
|
||||
"radius": "55%",
|
||||
"center": ['50%', '50%'],
|
||||
"roseType": 'area',
|
||||
},
|
||||
},
|
||||
"funnel": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item',
|
||||
"formatter": "{b} : {c}%"
|
||||
},
|
||||
"legend": {
|
||||
"top": 'bottom'
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'funnel',
|
||||
"left": '10%',
|
||||
"top": 60,
|
||||
"bottom": 60,
|
||||
"width": '80%',
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"minSize": '0%',
|
||||
"maxSize": '100%',
|
||||
"sort": 'descending',
|
||||
"gap": 2,
|
||||
"label": {
|
||||
"show": true,
|
||||
"position": 'inside'
|
||||
},
|
||||
"labelLine": {
|
||||
"length": 10,
|
||||
"lineStyle": {
|
||||
"width": 1,
|
||||
"type": 'solid'
|
||||
}
|
||||
},
|
||||
"itemStyle": {
|
||||
"bordercolor": '#fff',
|
||||
"borderwidth": 1
|
||||
},
|
||||
"emphasis": {
|
||||
"label": {
|
||||
"fontSize": 20
|
||||
}
|
||||
},
|
||||
"data": [],
|
||||
},
|
||||
},
|
||||
"gauge": {
|
||||
"color": color,
|
||||
"tooltip": {
|
||||
"formatter": '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '业务指标',
|
||||
"type": 'gauge',
|
||||
"detail": {"formatter": '{value}%'},
|
||||
"data": [{"value": 50, "name": '完成率'}]
|
||||
},
|
||||
},
|
||||
"candle": {
|
||||
"xAxis": {
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {},
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"dataZoom": [{
|
||||
"type": 'inside',
|
||||
"xAxisIndex": [0, 1],
|
||||
"start": 10,
|
||||
"end": 100
|
||||
},
|
||||
{
|
||||
"show": true,
|
||||
"xAxisIndex": [0, 1],
|
||||
"type": 'slider',
|
||||
"bottom": 10,
|
||||
"start": 10,
|
||||
"end": 100
|
||||
}
|
||||
],
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'k',
|
||||
"data": [],
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export default cfe;
|
|
@ -0,0 +1,606 @@
|
|||
/*
|
||||
* uCharts®
|
||||
* 高性能跨平台图表库,支持H5、APP、小程序(微信/支付宝/百度/头条/QQ/360)、Vue、Taro等支持canvas的框架平台
|
||||
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
|
||||
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
|
||||
* 复制使用请保留本段注释,感谢支持开源!
|
||||
*
|
||||
* uCharts®官方网站
|
||||
* https://www.uCharts.cn
|
||||
*
|
||||
* 开源地址:
|
||||
* https://gitee.com/uCharts/uCharts
|
||||
*
|
||||
* uni-app插件市场地址:
|
||||
* http://ext.dcloud.net.cn/plugin?id=271
|
||||
*
|
||||
*/
|
||||
|
||||
// 主题颜色配置:如每个图表类型需要不同主题,请在对应图表类型上更改color属性
|
||||
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
|
||||
|
||||
//事件转换函数,主要用作格式化x轴为时间轴,根据需求自行修改
|
||||
const formatDateTime = (timeStamp, returnType)=>{
|
||||
var date = new Date();
|
||||
date.setTime(timeStamp * 1000);
|
||||
var y = date.getFullYear();
|
||||
var m = date.getMonth() + 1;
|
||||
m = m < 10 ? ('0' + m) : m;
|
||||
var d = date.getDate();
|
||||
d = d < 10 ? ('0' + d) : d;
|
||||
var h = date.getHours();
|
||||
h = h < 10 ? ('0' + h) : h;
|
||||
var minute = date.getMinutes();
|
||||
var second = date.getSeconds();
|
||||
minute = minute < 10 ? ('0' + minute) : minute;
|
||||
second = second < 10 ? ('0' + second) : second;
|
||||
if(returnType == 'full'){return y + '-' + m + '-' + d + ' '+ h +':' + minute + ':' + second;}
|
||||
if(returnType == 'y-m-d'){return y + '-' + m + '-' + d;}
|
||||
if(returnType == 'h:m'){return h +':' + minute;}
|
||||
if(returnType == 'h:m:s'){return h +':' + minute +':' + second;}
|
||||
return [y, m, d, h, minute, second];
|
||||
}
|
||||
|
||||
const cfu = {
|
||||
//demotype为自定义图表类型,一般不需要自定义图表类型,只需要改根节点上对应的类型即可
|
||||
"type":["pie","ring","rose","word","funnel","map","arcbar","line","column","mount","bar","area","radar","gauge","candle","mix","tline","tarea","scatter","bubble","demotype"],
|
||||
"range":["饼状图","圆环图","玫瑰图","词云图","漏斗图","地图","圆弧进度条","折线图","柱状图","山峰图","条状图","区域图","雷达图","仪表盘","K线图","混合图","时间轴折线","时间轴区域","散点图","气泡图","自定义类型"],
|
||||
//增加自定义图表类型,如果需要categories,请在这里加入您的图表类型,例如最后的"demotype"
|
||||
//自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴(矢量x轴)类图表,没有categories,不需要加入categories
|
||||
"categories":["line","column","mount","bar","area","radar","gauge","candle","mix","demotype"],
|
||||
//instance为实例变量承载属性,不要删除
|
||||
"instance":{},
|
||||
//option为opts及eopts承载属性,不要删除
|
||||
"option":{},
|
||||
//下面是自定义format配置,因除H5端外的其他端无法通过props传递函数,只能通过此属性对应下标的方式来替换
|
||||
"formatter":{
|
||||
"yAxisDemo1":function(val, index, opts){return val+'元'},
|
||||
"yAxisDemo2":function(val, index, opts){return val.toFixed(2)},
|
||||
"xAxisDemo1":function(val, index, opts){return val+'年';},
|
||||
"xAxisDemo2":function(val, index, opts){return formatDateTime(val,'h:m')},
|
||||
"seriesDemo1":function(val, index, series, opts){return val+'元'},
|
||||
"tooltipDemo1":function(item, category, index, opts){
|
||||
if(index==0){
|
||||
return '随便用'+item.data+'年'
|
||||
}else{
|
||||
return '其他我没改'+item.data+'天'
|
||||
}
|
||||
},
|
||||
"pieDemo":function(val, index, series, opts){
|
||||
if(index !== undefined){
|
||||
return series[index].name+':'+series[index].data+'元'
|
||||
}
|
||||
},
|
||||
},
|
||||
//这里演示了自定义您的图表类型的option,可以随意命名,之后在组件上 type="demotype" 后,组件会调用这个花括号里的option,如果组件上还存在opts参数,会将demotype与opts中option合并后渲染图表。
|
||||
"demotype":{
|
||||
//我这里把曲线图当做了自定义图表类型,您可以根据需要随意指定类型或配置
|
||||
"type": "line",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"line": {
|
||||
"type": "curve",
|
||||
"width": 2
|
||||
},
|
||||
}
|
||||
},
|
||||
//下面是自定义配置,请添加项目所需的通用配置
|
||||
"pie":{
|
||||
"type": "pie",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"extra": {
|
||||
"pie": {
|
||||
"activeOpacity": 0.5,
|
||||
"activeRadius": 10,
|
||||
"offsetAngle": 0,
|
||||
"labelWidth": 15,
|
||||
"border": true,
|
||||
"borderWidth": 3,
|
||||
"borderColor": "#FFFFFF"
|
||||
},
|
||||
}
|
||||
},
|
||||
"ring":{
|
||||
"type": "ring",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"rotate": false,
|
||||
"dataLabel": true,
|
||||
"legend": {
|
||||
"show": true,
|
||||
"position": "right",
|
||||
"lineHeight": 25,
|
||||
},
|
||||
"title": {
|
||||
"name": "收益率",
|
||||
"fontSize": 15,
|
||||
"color": "#666666"
|
||||
},
|
||||
"subtitle": {
|
||||
"name": "70%",
|
||||
"fontSize": 25,
|
||||
"color": "#7cb5ec"
|
||||
},
|
||||
"extra": {
|
||||
"ring": {
|
||||
"ringWidth":30,
|
||||
"activeOpacity": 0.5,
|
||||
"activeRadius": 10,
|
||||
"offsetAngle": 0,
|
||||
"labelWidth": 15,
|
||||
"border": true,
|
||||
"borderWidth": 3,
|
||||
"borderColor": "#FFFFFF"
|
||||
},
|
||||
},
|
||||
},
|
||||
"rose":{
|
||||
"type": "rose",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"legend": {
|
||||
"show": true,
|
||||
"position": "left",
|
||||
"lineHeight": 25,
|
||||
},
|
||||
"extra": {
|
||||
"rose": {
|
||||
"type": "area",
|
||||
"minRadius": 50,
|
||||
"activeOpacity": 0.5,
|
||||
"activeRadius": 10,
|
||||
"offsetAngle": 0,
|
||||
"labelWidth": 15,
|
||||
"border": false,
|
||||
"borderWidth": 2,
|
||||
"borderColor": "#FFFFFF"
|
||||
},
|
||||
}
|
||||
},
|
||||
"word":{
|
||||
"type": "word",
|
||||
"color": color,
|
||||
"extra": {
|
||||
"word": {
|
||||
"type": "normal",
|
||||
"autoColors": false
|
||||
}
|
||||
}
|
||||
},
|
||||
"funnel":{
|
||||
"type": "funnel",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"extra": {
|
||||
"funnel": {
|
||||
"activeOpacity": 0.3,
|
||||
"activeWidth": 10,
|
||||
"border": true,
|
||||
"borderWidth": 2,
|
||||
"borderColor": "#FFFFFF",
|
||||
"fillOpacity": 1,
|
||||
"labelAlign": "right"
|
||||
},
|
||||
}
|
||||
},
|
||||
"map":{
|
||||
"type": "map",
|
||||
"color": color,
|
||||
"padding": [0,0,0,0],
|
||||
"dataLabel": true,
|
||||
"extra": {
|
||||
"map": {
|
||||
"border": true,
|
||||
"borderWidth": 1,
|
||||
"borderColor": "#666666",
|
||||
"fillOpacity": 0.6,
|
||||
"activeBorderColor": "#F04864",
|
||||
"activeFillColor": "#FACC14",
|
||||
"activeFillOpacity": 1
|
||||
},
|
||||
}
|
||||
},
|
||||
"arcbar":{
|
||||
"type": "arcbar",
|
||||
"color": color,
|
||||
"title": {
|
||||
"name": "百分比",
|
||||
"fontSize": 25,
|
||||
"color": "#00FF00"
|
||||
},
|
||||
"subtitle": {
|
||||
"name": "默认标题",
|
||||
"fontSize": 15,
|
||||
"color": "#666666"
|
||||
},
|
||||
"extra": {
|
||||
"arcbar": {
|
||||
"type": "default",
|
||||
"width": 12,
|
||||
"backgroundColor": "#E9E9E9",
|
||||
"startAngle": 0.75,
|
||||
"endAngle": 0.25,
|
||||
"gap": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"line":{
|
||||
"type": "line",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"line": {
|
||||
"type": "straight",
|
||||
"width": 2,
|
||||
"activeType": "hollow"
|
||||
},
|
||||
}
|
||||
},
|
||||
"tline":{
|
||||
"type": "line",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": false,
|
||||
"boundaryGap":"justify",
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
"data":[
|
||||
{
|
||||
"min":0,
|
||||
"max":80
|
||||
}
|
||||
]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"line": {
|
||||
"type": "curve",
|
||||
"width": 2,
|
||||
"activeType": "hollow"
|
||||
},
|
||||
}
|
||||
},
|
||||
"tarea":{
|
||||
"type": "area",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
"boundaryGap":"justify",
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
"data":[
|
||||
{
|
||||
"min":0,
|
||||
"max":80
|
||||
}
|
||||
]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"area": {
|
||||
"type": "curve",
|
||||
"opacity": 0.2,
|
||||
"addLine": true,
|
||||
"width": 2,
|
||||
"gradient": true,
|
||||
"activeType": "hollow"
|
||||
},
|
||||
}
|
||||
},
|
||||
"column":{
|
||||
"type": "column",
|
||||
"color": color,
|
||||
"padding": [15,15,0,5],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"data":[{"min":0}]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"column": {
|
||||
"type": "group",
|
||||
"width": 30,
|
||||
"activeBgColor": "#000000",
|
||||
"activeBgOpacity": 0.08
|
||||
},
|
||||
}
|
||||
},
|
||||
"mount":{
|
||||
"type": "mount",
|
||||
"color": color,
|
||||
"padding": [15,15,0,5],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"data":[{"min":0}]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"mount": {
|
||||
"type": "mount",
|
||||
"widthRatio": 1.5,
|
||||
},
|
||||
}
|
||||
},
|
||||
"bar":{
|
||||
"type": "bar",
|
||||
"color": color,
|
||||
"padding": [15,30,0,5],
|
||||
"xAxis": {
|
||||
"boundaryGap":"justify",
|
||||
"disableGrid":false,
|
||||
"min":0,
|
||||
"axisLine":false
|
||||
},
|
||||
"yAxis": {
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"bar": {
|
||||
"type": "group",
|
||||
"width": 30,
|
||||
"meterBorde": 1,
|
||||
"meterFillColor": "#FFFFFF",
|
||||
"activeBgColor": "#000000",
|
||||
"activeBgOpacity": 0.08
|
||||
},
|
||||
}
|
||||
},
|
||||
"area":{
|
||||
"type": "area",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"area": {
|
||||
"type": "straight",
|
||||
"opacity": 0.2,
|
||||
"addLine": true,
|
||||
"width": 2,
|
||||
"gradient": false,
|
||||
"activeType": "hollow"
|
||||
},
|
||||
}
|
||||
},
|
||||
"radar":{
|
||||
"type": "radar",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"dataLabel": false,
|
||||
"legend": {
|
||||
"show": true,
|
||||
"position": "right",
|
||||
"lineHeight": 25,
|
||||
},
|
||||
"extra": {
|
||||
"radar": {
|
||||
"gridType": "radar",
|
||||
"gridColor": "#CCCCCC",
|
||||
"gridCount": 3,
|
||||
"opacity": 0.2,
|
||||
"max": 200,
|
||||
"labelShow": true
|
||||
},
|
||||
}
|
||||
},
|
||||
"gauge":{
|
||||
"type": "gauge",
|
||||
"color": color,
|
||||
"title": {
|
||||
"name": "66Km/H",
|
||||
"fontSize": 25,
|
||||
"color": "#2fc25b",
|
||||
"offsetY": 50
|
||||
},
|
||||
"subtitle": {
|
||||
"name": "实时速度",
|
||||
"fontSize": 15,
|
||||
"color": "#1890ff",
|
||||
"offsetY": -50
|
||||
},
|
||||
"extra": {
|
||||
"gauge": {
|
||||
"type": "default",
|
||||
"width": 30,
|
||||
"labelColor": "#666666",
|
||||
"startAngle": 0.75,
|
||||
"endAngle": 0.25,
|
||||
"startNumber": 0,
|
||||
"endNumber": 100,
|
||||
"labelFormat": "",
|
||||
"splitLine": {
|
||||
"fixRadius": 0,
|
||||
"splitNumber": 10,
|
||||
"width": 30,
|
||||
"color": "#FFFFFF",
|
||||
"childNumber": 5,
|
||||
"childWidth": 12
|
||||
},
|
||||
"pointer": {
|
||||
"width": 24,
|
||||
"color": "auto"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"candle":{
|
||||
"type": "candle",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"enableScroll": true,
|
||||
"enableMarkLine": true,
|
||||
"dataLabel": false,
|
||||
"xAxis": {
|
||||
"labelCount": 4,
|
||||
"itemCount": 40,
|
||||
"disableGrid": true,
|
||||
"gridColor": "#CCCCCC",
|
||||
"gridType": "solid",
|
||||
"dashLength": 4,
|
||||
"scrollShow": true,
|
||||
"scrollAlign": "left",
|
||||
"scrollColor": "#A6A6A6",
|
||||
"scrollBackgroundColor": "#EFEBEF"
|
||||
},
|
||||
"yAxis": {
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"candle": {
|
||||
"color": {
|
||||
"upLine": "#f04864",
|
||||
"upFill": "#f04864",
|
||||
"downLine": "#2fc25b",
|
||||
"downFill": "#2fc25b"
|
||||
},
|
||||
"average": {
|
||||
"show": true,
|
||||
"name": ["MA5","MA10","MA30"],
|
||||
"day": [5,10,20],
|
||||
"color": ["#1890ff","#2fc25b","#facc14"]
|
||||
}
|
||||
},
|
||||
"markLine": {
|
||||
"type": "dash",
|
||||
"dashLength": 5,
|
||||
"data": [
|
||||
{
|
||||
"value": 2150,
|
||||
"lineColor": "#f04864",
|
||||
"showLabel": true
|
||||
},
|
||||
{
|
||||
"value": 2350,
|
||||
"lineColor": "#f04864",
|
||||
"showLabel": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"mix":{
|
||||
"type": "mix",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"disabled": false,
|
||||
"disableGrid": false,
|
||||
"splitNumber": 5,
|
||||
"gridType": "dash",
|
||||
"dashLength": 4,
|
||||
"gridColor": "#CCCCCC",
|
||||
"padding": 10,
|
||||
"showTitle": true,
|
||||
"data": []
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"mix": {
|
||||
"column": {
|
||||
"width": 20
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
"scatter":{
|
||||
"type": "scatter",
|
||||
"color":color,
|
||||
"padding":[15,15,0,15],
|
||||
"dataLabel":false,
|
||||
"xAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
"splitNumber":5,
|
||||
"boundaryGap":"justify",
|
||||
"min":0
|
||||
},
|
||||
"yAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"scatter": {
|
||||
},
|
||||
}
|
||||
},
|
||||
"bubble":{
|
||||
"type": "bubble",
|
||||
"color":color,
|
||||
"padding":[15,15,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
"splitNumber":5,
|
||||
"boundaryGap":"justify",
|
||||
"min":0,
|
||||
"max":250
|
||||
},
|
||||
"yAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
"data":[{
|
||||
"min":0,
|
||||
"max":150
|
||||
}]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"bubble": {
|
||||
"border":2,
|
||||
"opacity": 0.5,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default cfu;
|
|
@ -0,0 +1,5 @@
|
|||
# uCharts JSSDK说明
|
||||
1、如不使用uCharts组件,可直接引用u-charts.js,打包编译后会`自动压缩`,压缩后体积约为`120kb`。
|
||||
2、如果120kb的体积仍需压缩,请手到uCharts官网通过在线定制选择您需要的图表。
|
||||
3、config-ucharts.js为uCharts组件的用户配置文件,升级前请`自行备份config-ucharts.js`文件,以免被强制覆盖。
|
||||
4、config-echarts.js为ECharts组件的用户配置文件,升级前请`自行备份config-echarts.js`文件,以免被强制覆盖。
|
|
@ -0,0 +1,201 @@
|
|||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright [yyyy] [name of copyright owner]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
|
@ -0,0 +1,80 @@
|
|||
{
|
||||
"id": "qiun-data-charts",
|
||||
"displayName": "秋云 ucharts echarts 高性能跨全端图表组件",
|
||||
"version": "2.5.0-20230101",
|
||||
"description": "uCharts 新增正负柱状图!支持H5及APP用 ucharts echarts 渲染图表,uniapp可视化首选组件",
|
||||
"keywords": [
|
||||
"ucharts",
|
||||
"echarts",
|
||||
"f2",
|
||||
"图表",
|
||||
"可视化"
|
||||
],
|
||||
"repository": "https://gitee.com/uCharts/uCharts",
|
||||
"engines": {
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": "474119"
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/~qiun",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,84 @@
|
|||

|
||||
|
||||
|
||||
[](https://gitee.com/uCharts/uCharts/stargazers)
|
||||
[](https://gitee.com/uCharts/uCharts/members)
|
||||
[](https://www.apache.org/licenses/LICENSE-2.0.html)
|
||||
[](https://www.npmjs.com/~qiun)
|
||||
|
||||
|
||||
## uCharts简介
|
||||
|
||||
`uCharts`是一款基于`canvas API`开发的适用于所有前端应用的图表库,开发者编写一套代码,可运行到 Web、iOS、Android(基于 uni-app / taro )、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等更多支持 canvas API 的平台。
|
||||
|
||||
## 官方网站
|
||||
|
||||
## [https://www.ucharts.cn](https://www.ucharts.cn)
|
||||
|
||||
## 快速体验
|
||||
|
||||
一套代码编到多个平台,依次扫描二维码,亲自体验uCharts图表跨平台效果!其他平台请自行编译。
|
||||
|
||||

|
||||
|
||||

|
||||
|
||||
## 致开发者
|
||||
|
||||
感谢各位开发者`五年`来对秋云及uCharts的支持,uCharts的进步离不开各位开发者的鼓励与贡献。为更好的帮助各位开发者使用图表工具,我们推出了新版官网,增加了在线定制、问答社区、在线配置等一些增值服务,为确保您能更好的应用图表组件,建议您先`仔细阅读官网指南`以及`常见问题`,而不是下载下来`直接使用`。如仍然不能解决,请到`官网社区`或开通会员后加入`专属VIP会员群`提问将会很快得到回答。
|
||||
|
||||
## 视频教程
|
||||
|
||||
## [uCharts新手入门教程](https://www.bilibili.com/video/BV1qA411Q7se/?share_source=copy_web&vd_source=42a1242f9aaade6427736af69eb2e1d9)
|
||||
|
||||
|
||||
## 社群支持
|
||||
|
||||
uCharts官方拥有5个2000人的QQ群及专属VIP会员群支持,庞大的用户量证明我们一直在努力,请各位放心使用!uCharts的开源图表组件的开发,团队付出了大量的时间与精力,经过四来的考验,不会有比较明显的bug,请各位放心使用。如果您有更好的想法,可以在`码云提交Pull Requests`以帮助更多开发者完成需求,再次感谢各位对uCharts的鼓励与支持!
|
||||
|
||||
#### 官方交流群
|
||||
- 交流群1:371774600(已满)
|
||||
- 交流群2:619841586(已满)
|
||||
- 交流群3:955340127(已满)
|
||||
- 交流群4:641669795(已满)
|
||||
- 交流群5:236294809(只能扫码加入)
|
||||
|
||||

|
||||
|
||||
- 口令`uniapp`
|
||||
|
||||
#### 专属VIP会员群
|
||||
- 开通会员后详见【账号详情】页面中顶部的滚动通知
|
||||
- 口令`您的用户ID`
|
||||
|
||||
## 版权信息
|
||||
|
||||
uCharts始终坚持开源,遵循 [Apache Licence 2.0](https://www.apache.org/licenses/LICENSE-2.0.html) 开源协议,意味着您无需支付任何费用,即可将uCharts应用到您的产品中。
|
||||
|
||||
注意:这并不意味着您可以将uCharts应用到非法的领域,比如涉及赌博,暴力等方面。如因此产生纠纷或法律问题,uCharts相关方及秋云科技不承担任何责任。
|
||||
|
||||
## 合作伙伴
|
||||
|
||||
[](https://www.diygw.com/)
|
||||
[](https://gitee.com/howcode/has-chat)
|
||||
[](https://www.uviewui.com/)
|
||||
[](https://ext.dcloud.net.cn/plugin?id=7088)
|
||||
[](https://ext.dcloud.net.cn/publisher?id=202)
|
||||
[](https://www.firstui.cn/)
|
||||
[](https://ext.dcloud.net.cn/plugin?id=5169)
|
||||
[](https://www.graceui.com/)
|
||||
|
||||
|
||||
## 更新记录
|
||||
|
||||
详见官网指南中说明,[点击此处查看](https://www.ucharts.cn/v2/#/guide/index?id=100)
|
||||
|
||||
|
||||
## 相关链接
|
||||
- [uCharts官网](https://www.ucharts.cn)
|
||||
- [DCloud插件市场地址](https://ext.dcloud.net.cn/plugin?id=271)
|
||||
- [uCharts码云开源托管地址](https://gitee.com/uCharts/uCharts) [](https://gitee.com/uCharts/uCharts/stargazers)
|
||||
- [uCharts npm开源地址](https://www.ucharts.cn)
|
||||
- [ECharts官网](https://echarts.apache.org/zh/index.html)
|
||||
- [ECharts配置手册](https://echarts.apache.org/zh/option.html)
|
||||
- [图表组件在项目中的应用 ReportPlus数据报表](https://www.ucharts.cn/v2/#/layout/info?id=1)
|
|
@ -0,0 +1,2 @@
|
|||
<!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>chargingDetection</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
|
||||
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=./static/index.2da1efab.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=./static/js/chunk-vendors.978fd5e3.js></script><script src=./static/js/index.612c850a.js></script></body></html>
|
|
@ -0,0 +1,3 @@
|
|||
window.g = {
|
||||
API_IP: 'http://172.16.1.146:5000',
|
||||
}
|
|
@ -0,0 +1,18 @@
|
|||
@font-face {
|
||||
font-family: "SourceHanSansCN-Heavy";
|
||||
src: url('./font/SourceHanSansCN-Heavy_0.otf');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "SourceHanSansCN-Bold";
|
||||
src: url('./font/SourceHanSansCN-Bold_0.otf');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "SourceHanSansCN-Regular";
|
||||
src: url('./font/SourceHanSansCN-Regular_0.otf');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
After Width: | Height: | Size: 85 KiB |
After Width: | Height: | Size: 3.3 MiB |
After Width: | Height: | Size: 23 KiB |
After Width: | Height: | Size: 251 KiB |
After Width: | Height: | Size: 5.3 KiB |
After Width: | Height: | Size: 791 B |
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 113 KiB |
After Width: | Height: | Size: 127 KiB |