Commit ca779ad8 by sunchao

sfp->保单利率bug修复

parent 25e8e81d
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
id += t.charAt(Math.floor(Math.random() * len)) id += t.charAt(Math.floor(Math.random() * len))
} }
this.option.id = id this.option.id = id
}, },
methods: { methods: {
/** /**
......
...@@ -177,7 +177,7 @@ ...@@ -177,7 +177,7 @@
}, },
registerIn(){ registerIn(){
const params = { const params = {
invitation_code:this.invitation_code, inviterInvitationCode:this.invitation_code,
...this.form ...this.form
} }
console.log(params) console.log(params)
......
...@@ -142,7 +142,8 @@ ...@@ -142,7 +142,8 @@
</view> </view>
</form> </form>
<!--测算结果-- v-show="resultFlag"--> <!--测算结果-- v-show="resultFlag"-->
<view class="result_wrapper" v-if="resultFlag"> <!-- <view class="result_wrapper" v-if="resultFlag"> -->
<view class="result_wrapper">
<view class="suggestInfo"> <view class="suggestInfo">
<view class="title"> <view class="title">
<view> <view>
...@@ -160,20 +161,21 @@ ...@@ -160,20 +161,21 @@
</radio-group> </radio-group>
</view> </view>
<view style="height: 450rpx;width: 500rpx;border: 1rpx solid #c3c1c1;"> <view style="height: 450rpx;width: 500rpx;border: 1rpx solid #c3c1c1;">
<div id="myEcharts"> <!-- <view id="myEcharts"></view> -->
<l-echart ref="chart" @finished="init"></l-echart>
</div>
</view> </view>
<!-- <view class="linechart"> <!-- <view class="linechart">
<echarts ref="echart" :option="option" style="height: 300px;"></echarts> <Echarts ref="echart" :option="option" style="height: 300px;"></Echarts>
</view> --> </view> -->
<view style="text-align: center;color: #c3c1c1;font-size: 22rpx;" > <view style="text-align: center;color: #c3c1c1;font-size: 22rpx;" >
差额 = 可实现的 - 你想要的 差额 = 可实现的 - 你想要的
</view> </view>
<view class="resultSummaryContent"> <view class="resultSummaryContent">
<view v-if="resultInfos.code == 'B001' || resultInfos.code =='B002'" style="display: flex;align-items: center;"> <view v-if="resultInfos.code == 'B001' || resultInfos.code =='B002'" style="display: flex;align-items: center;">
<view style="margin-right: 8rpx;"> <!-- <view style="display: flex;align-items: center;"> -->
<img src="../../static/images/happy.png" alt="" srcset=""> <view style="margin-right: 16rpx;">
<image src="../../static/images/happy.png" mode="widthFix"></image>
</view> </view>
<view> <view>
<view>恭喜您!</view> <view>恭喜您!</view>
...@@ -181,8 +183,9 @@ ...@@ -181,8 +183,9 @@
</view> </view>
</view> </view>
<view v-if="resultInfos.code == 'A001' || resultInfos.code =='A002'" style="display: flex;align-items: center;"> <view v-if="resultInfos.code == 'A001' || resultInfos.code =='A002'" style="display: flex;align-items: center;">
<view style="margin-right: 8rpx;"> <!-- <view style="display: flex;align-items: center;"> -->
<img src="../../static/images/sad.png" alt="" srcset=""> <view style="margin-right: 16rpx;">
<image src="../../static/images/sad.png" mode="widthFix"></image>
</view> </view>
<view> <view>
<view>很遗憾!</view> <view>很遗憾!</view>
...@@ -207,8 +210,8 @@ ...@@ -207,8 +210,8 @@
</view> </view>
<view class="line" v-for="houseItem in housePurchasePrices"> <view class="line" v-for="houseItem in housePurchasePrices">
<view class="line_title">{{getResultTitle(houseItem.priceType)}} <view class="line_title">{{getResultTitle(houseItem.priceType)}}
<img src="../../static/images/can.png" alt="" v-show="houseItem.fvDifference <= 0"> <image src="../../static/images/can.png" v-show="houseItem.fvDifference <= 0" mode="widthFix"></image>
<img src="../../static/images/cannot.png" alt="" v-show="houseItem.fvDifference > 0"> <image src="../../static/images/cannot.png" v-show="houseItem.fvDifference > 0" mode="widthFix"></image>
</view> </view>
<view class="content"> <view class="content">
<view class="left"> <view class="left">
...@@ -218,7 +221,7 @@ ...@@ -218,7 +221,7 @@
现值:{{numberConverter(houseItem.pvPriceRealization)}} 现值:{{numberConverter(houseItem.pvPriceRealization)}}
</view> --> </view> -->
</view> </view>
<img src="../../static/images/vs.png" alt=""> <image src="../../static/images/vs.png" mode="widthFix"></image>
<view class="right"> <view class="right">
<view class="realizable">你想要的</view> <view class="realizable">你想要的</view>
<view>{{housePurchaseInfo.nyear}}年后:{{formatFloat(houseItem.fvPriceDesired/10000)}}万元</view> <view>{{housePurchaseInfo.nyear}}年后:{{formatFloat(houseItem.fvPriceDesired/10000)}}万元</view>
...@@ -268,7 +271,9 @@ ...@@ -268,7 +271,9 @@
import api from '../../api/api'; import api from '../../api/api';
import common from '../../common/common'; import common from '../../common/common';
import dataHandling from "../../util/dataHandling"; import dataHandling from "../../util/dataHandling";
import { nanoid } from "nanoid"; import { nanoid } from "nanoid";
// import Echarts from '../../components/echarts/echarts'
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
export default{ export default{
data(){ data(){
...@@ -331,7 +336,30 @@ import { nanoid } from "nanoid"; ...@@ -331,7 +336,30 @@ import { nanoid } from "nanoid";
}, },
housePurchasePrices:[], housePurchasePrices:[],
resultFlag:false, resultFlag:false,
planningParams:{} planningParams:{},
option:{
legend: {},
grid: {
left: '20%', // 调整这个属性
},
xAxis: {
data: [1,2,3],
axisTick:{//坐标轴刻度相关设置。
show: false,
},
},
yAxis: {},
series: [
{
name:'',
data: [3,2,1],
type: 'bar',
label:{
show:true,
position:'inside'
}
}
]}
} }
}, },
components:{ components:{
...@@ -339,11 +367,18 @@ import { nanoid } from "nanoid"; ...@@ -339,11 +367,18 @@ import { nanoid } from "nanoid";
planningParameters, planningParameters,
foot, foot,
commonHead, commonHead,
// Echarts
LEchart
}, },
onLoad(){ onLoad(){
this.provCityQry(); this.provCityQry();
}, },
methods:{ methods:{
init() {
this.$refs.chart.init(echarts, chart => {
chart.setOption(this.option);
});
},
checkToken(){ checkToken(){
api.checkToken().then(res=>{ api.checkToken().then(res=>{
if(res['success']){}else{ if(res['success']){}else{
...@@ -432,7 +467,7 @@ import { nanoid } from "nanoid"; ...@@ -432,7 +467,7 @@ import { nanoid } from "nanoid";
// 3是首付 // 3是首付
// 4是总贷款 // 4是总贷款
// 基于准备好的dom,初始化echarts实例 // 基于准备好的dom,初始化echarts实例
this.myChart = echarts.init(document.getElementById('myEcharts')); // this.myChart = echarts.init(document.getElementById('myEcharts'));
// 绘制图表 // 绘制图表
let list1; let list1;
let showLists; let showLists;
...@@ -458,7 +493,7 @@ import { nanoid } from "nanoid"; ...@@ -458,7 +493,7 @@ import { nanoid } from "nanoid";
} }
} }
} }
this.myChart.setOption({ this.option = {
legend: {}, legend: {},
grid: { grid: {
left: '20%', // 调整这个属性 left: '20%', // 调整这个属性
...@@ -481,7 +516,31 @@ import { nanoid } from "nanoid"; ...@@ -481,7 +516,31 @@ import { nanoid } from "nanoid";
} }
} }
] ]
}); }
// this.myChart.setOption({
// legend: {},
// grid: {
// left: '20%', // 调整这个属性
// },
// xAxis: {
// data: dataOption,
// axisTick:{//坐标轴刻度相关设置。
// show: false,
// },
// },
// yAxis: {},
// series: [
// {
// name:'',
// data: showLists,
// type: 'bar',
// label:{
// show:true,
// position:'inside'
// }
// }
// ]
// });
}, },
provCityQry(){ provCityQry(){
api.provCityQry({insurerId:888}).then((res)=>{ api.provCityQry({insurerId:888}).then((res)=>{
...@@ -689,6 +748,9 @@ import { nanoid } from "nanoid"; ...@@ -689,6 +748,9 @@ import { nanoid } from "nanoid";
} }
}, },
mounted() { mounted() {
this.$refs.chart.init(echarts, chart => {
chart.setOption(this.option);
});
this.checkToken(); this.checkToken();
} }
} }
...@@ -766,6 +828,9 @@ import { nanoid } from "nanoid"; ...@@ -766,6 +828,9 @@ import { nanoid } from "nanoid";
box-shadow: 3px 1px 4px 0 rgb(0 0 0 / 25%); box-shadow: 3px 1px 4px 0 rgb(0 0 0 / 25%);
margin: 20px 0; margin: 20px 0;
font-size: 18px; font-size: 18px;
uni-image{
width: 68rpx!important;
}
} }
.seriesNo{ .seriesNo{
width: 0; width: 0;
...@@ -795,7 +860,7 @@ import { nanoid } from "nanoid"; ...@@ -795,7 +860,7 @@ import { nanoid } from "nanoid";
text-align: center; text-align: center;
padding: 10rpx 0; padding: 10rpx 0;
margin-left: -10rpx; margin-left: -10rpx;
img{ image{
position: absolute; position: absolute;
right: 0; right: 0;
max-width: 17%; max-width: 17%;
...@@ -821,7 +886,7 @@ import { nanoid } from "nanoid"; ...@@ -821,7 +886,7 @@ import { nanoid } from "nanoid";
margin: 10rpx; margin: 10rpx;
} }
} }
img{ image{
max-width: 15%; max-width: 15%;
} }
.right{ .right{
......
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
<text style="margin-left: 10rpx;">减保取现</text> <text style="margin-left: 10rpx;">减保取现</text>
</view> </view>
</view> </view>
<view class="tips"> <view class="tips" style="z-index: -1;">
<text>(如有减保取现,请点击右侧按钮填写减保领取信息)</text> <text>(如有减保取现,请点击右侧按钮填写减保领取信息)</text>
</view> </view>
</view> </view>
...@@ -234,8 +234,8 @@ ...@@ -234,8 +234,8 @@
foot, foot,
commonHead commonHead
}, },
onLoad() { onLoad(option) {
if(dataHandling.getQueryString('isBack') == 1){ if(option.isBack == 1){
const calcuteData = uni.getStorageSync('calcuteData') ? JSON.parse(uni.getStorageSync('calcuteData')) : null; const calcuteData = uni.getStorageSync('calcuteData') ? JSON.parse(uni.getStorageSync('calcuteData')) : null;
if(calcuteData){ if(calcuteData){
this.irrAndSimpleCalcuteParam.paymentPeriod = calcuteData.paymentPeriod; this.irrAndSimpleCalcuteParam.paymentPeriod = calcuteData.paymentPeriod;
......
## 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
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;
}
}
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',
'font'
];
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 => {
if (style === 'font' && fontSizeReg.test(value)) {
const match = fontSizeReg.exec(value);
ctx.setFontSize(match[1]);
return;
}
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) {
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 = 12;
if (font) {
fontSize = parseInt(font.match(/([\d\.]+)px/)[1])
}
fontSize /= 2;
return {
width: strLen(text) * fontSize
};
}
}
}
_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}) {
// echarts.setCanvasCreator(() => canvas);
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(){
return canvas
}
})
}
}
\ No newline at end of file
// #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
}
export function wrapTouch(event) {
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 = wx.getSystemInfoSync().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)
})
}
\ No newline at end of file
{
"id": "lime-echart",
"displayName": "百度图表 echarts",
"version": "0.6.5",
"description": "echarts 全端兼容,一款使echarts图表能跑在uniapp各端中的插件",
"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"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"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"
}
}
}
}
}
\ No newline at end of file
# echarts 图表 <span style="font-size:16px;">👑👑👑👑👑 <span style="background:#ff9d00;padding:2px 4px;color:#fff;font-size:10px;border-radius: 3px;">全端</span></span>
> 一个基于 JavaScript 的开源可视化图表库 [查看更多 站点1](https://limeui.qcoon.cn/#/echart) | [查看更多 站点2](http://liangei.gitee.io/limeui/#/echart) <br>
> 基于 echarts 做了兼容处理,更多示例请访问 [uni示例 站点1](https://limeui.qcoon.cn/#/echart-example) | [uni示例 站点2](http://liangei.gitee.io/limeui/#/echart-example) | [官方示例](https://echarts.apache.org/examples/zh/index.html) <br>
> Q群:1046793420 <br>
## 平台兼容
| H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
| --- | ---------- | ------------ | ---------- | ---------- | --------- | ---- |
| √ | √ | √ | √ | √ | √ | √ |
## 安装
- 第一步、在uniapp 插件市场 找到 [百度图表](https://ext.dcloud.net.cn/plugin?id=4899) 导入
- 第二步、安装 echarts 或者直接使用插件内的echarts.min文件
```cmd
pnpm add echarts
-or-
npm install echarts
```
**注意**
* 🔔 必须使用hbuilderx 3.4.8-alpha及以上
* 🔔 echarts 5.3.0及以上
* 🔔 如果是 `cli` 项目需要主动 `import` 插件
```js
import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
export default {
components: {LEchart}
}
```
## 代码演示
### 基础用法
```html
<view><l-echart ref="chart" @finished="init"></l-echart></view>
```
```js
// 如果你使用插件内提供的echarts.min
// 也可以自行去官网下载自定义覆盖
// 这种方式仅限于vue2
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
//---or----------------------------------
// 如果你使用 npm 安装了 echarts --------- 使用以下方式
// 引入全量包
import * as echarts from 'echarts'
//---or----------------------------------
// 按需引入 开始
import * as echarts from 'echarts/core';
import {LineChart, BarChart} from 'echarts/charts';
import {TitleComponent,TooltipComponent,GridComponent, DatasetComponent, TransformComponent, LegendComponent } from 'echarts/components';
// 标签自动布局,全局过渡动画等特性
import {LabelLayout,UniversalTransition} from 'echarts/features';
// 引入 Canvas 渲染器,注意引入 CanvasRenderer 是必须的一步
import {CanvasRenderer} from 'echarts/renderers';
// 注册必须的组件
echarts.use([
LegendComponent,
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LineChart,
BarChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
]);
//-------------按需引入结束------------------------
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]
}
]
},
};
},
// 组件能被调用必须是组件的节点已经被渲染到页面上
// 1、在页面mounted里调用,有时候mounted 组件也未必渲染完成
mounted() {
// init(echarts, theme?:string, opts?:{}, chart => {})
// echarts 必填, 非nvue必填,nvue不用填
// theme 可选,应用的主题,目前只支持名称,如:'dark'
// opts = { // 可选
// locale?: string // 从 `5.0.0` 开始支持
// }
// chart => {} , callback 必填,返回图表实例
this.$refs.chart.init(echarts, chart => {
chart.setOption(this.option);
});
},
// 2、或者使用组件的finished事件里调用
methods: {
init() {
this.$refs.chart.init(echarts, chart => {
chart.setOption(this.option);
});
}
}
}
```
## 数据更新
- 使用 `ref` 可获取`setOption`设置更新
```js
this.$refs.chart.setOption(data)
```
## 图表大小
- 在有些场景下,我们希望当容器大小改变时,图表的大小也相应地改变。
```js
// 默认获取容器尺寸
this.$refs.chart.resize()
// 指定尺寸
this.$refs.chart.resize({width: 375, height: 375})
```
## 常见问题
- 微信小程序 `2d` 只支持 真机调试2.0
- 微信开发工具会出现canvas不跟随页面的情况,真机不影响
- toolbox 不支持 `saveImage`
- echarts 5.3.0 的 lines 不支持 trailLength,故需设置为 `0`
- dataZoom H5不要设置 `showDetail`
## Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --------------- | -------- | ------- | ------------ | ----- |
| custom-style | 自定义样式 | `string` | - | - |
| type | 指定 canvas 类型 | `string` | `2d` | |
| is-disable-scroll | 触摸图表时是否禁止页面滚动 | `boolean` | `false` | |
| beforeDelay | 延迟初始化 (毫秒) | `number` | `30` | |
| enableHover | PC端使用鼠标悬浮 | `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` |
## 打赏
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。
![输入图片说明](https://static-6d65bd90-8508-4d6c-abbc-a4ef5c8e49e7.bspapp.com/image/222521_bb543f96_518581.jpeg "微信图片编辑_20201122220352.jpg")
![输入图片说明](https://static-6d65bd90-8508-4d6c-abbc-a4ef5c8e49e7.bspapp.com/image/wxplay.jpg "wxplay.jpg")
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
<!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>
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).uni=n()}(this,(function(){"use strict";try{var e={};Object.defineProperty(e,"passive",{get:function(){!0}}),window.addEventListener("test-passive",null,e)}catch(e){}var n=Object.prototype.hasOwnProperty;function i(e,i){return n.call(e,i)}var t=[];function o(){return window.__dcloud_weex_postMessage||window.__dcloud_weex_}var r=function(e,n){var i={options:{timestamp:+new Date},name:e,arg:n};if(o()){if("postMessage"===e){var r={data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(r):window.__dcloud_weex_.postMessage(JSON.stringify(r))}var a={type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(a):window.__dcloud_weex_.postMessageToService(JSON.stringify(a))}if(!window.plus)return window.parent.postMessage({type:"WEB_INVOKE_APPSERVICE",data:i,pageId:""},"*");if(0===t.length){var d=plus.webview.currentWebview();if(!d)throw new Error("plus.webview.currentWebview() is undefined");var s=d.parent(),w="";w=s?s.id:d.id,t.push(w)}if(plus.webview.getWebviewById("__uniapp__service"))plus.webview.postMessageToUniNView({type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}},"__uniapp__service");else{var u=JSON.stringify(i);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE",'",').concat(u,",").concat(JSON.stringify(t),");"))}},a={navigateTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("navigateTo",{url:encodeURI(n)})},navigateBack:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delta;r("navigateBack",{delta:parseInt(n)||1})},switchTab:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("switchTab",{url:encodeURI(n)})},reLaunch:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("reLaunch",{url:encodeURI(n)})},redirectTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("redirectTo",{url:encodeURI(n)})},getEnv:function(e){o()?e({nvue:!0}):window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};r("postMessage",e.data||{})}},d=/uni-app/i.test(navigator.userAgent),s=/Html5Plus/i.test(navigator.userAgent),w=/complete|loaded|interactive/;var u=window.my&&navigator.userAgent.indexOf("AlipayClient")>-1;var g=window.swan&&window.swan.webView&&/swan/i.test(navigator.userAgent);var c=window.qq&&window.qq.miniProgram&&/QQ/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var v=window.tt&&window.tt.miniProgram&&/toutiaomicroapp/i.test(navigator.userAgent);var m=window.wx&&window.wx.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var p=window.qa&&/quickapp/i.test(navigator.userAgent);var f=window.ks&&window.ks.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var l=window.tt&&window.tt.miniProgram&&/Lark|Feishu/i.test(navigator.userAgent);var _=window.jd&&window.jd.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);for(var E,b=function(){window.UniAppJSBridge=!0,document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady",{bubbles:!0,cancelable:!0}))},h=[function(e){if(d||s)return window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener("DOMContentLoaded",e):window.plus&&w.test(document.readyState)?setTimeout(e,0):document.addEventListener("plusready",e),a},function(e){if(m)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.wx.miniProgram},function(e){if(c)return window.QQJSBridge&&window.QQJSBridge.invoke?setTimeout(e,0):document.addEventListener("QQJSBridgeReady",e),window.qq.miniProgram},function(e){if(u){document.addEventListener("DOMContentLoaded",e);var n=window.my;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(g)return document.addEventListener("DOMContentLoaded",e),window.swan.webView},function(e){if(v)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(p){window.QaJSBridge&&window.QaJSBridge.invoke?setTimeout(e,0):document.addEventListener("QaJSBridgeReady",e);var n=window.qa;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(f)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.ks.miniProgram},function(e){if(l)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(_)return window.JDJSBridgeReady&&window.JDJSBridgeReady.invoke?setTimeout(e,0):document.addEventListener("JDJSBridgeReady",e),window.jd.miniProgram},function(e){return document.addEventListener("DOMContentLoaded",e),a}],y=0;y<h.length&&!(E=h[y](b));y++);E||(E={});var B="undefined"!=typeof uni?uni:{};if(!B.navigateTo)for(var S in E)i(E,S)&&(B[S]=E[S]);return B.webView=E,B}));
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment