已解决,采用renderjs方案解决,uniapp部分代码如下:
<template>
<view class="content" id="content">
<view @click="svgs.onClick" :prop="option" :change:prop="svgs.updateSvgs" id="svgs" class="svgs"></view>
<button @click="changeOption">更新数据</button>
</view>
</template>
<script>
export default {
data() {
return {
option: {
status: false
}
}
},
onLoad() {
console.log(this.option.status)
},
methods: {
changeOption() {
const data = this.option.series[0].data
// 随机更新示例数据
data.forEach((item, index) => {
data.splice(index, 1, Math.random() * 40)
})
},
onViewClick(options) {
console.log(options)
}
}
}
</script>
<script module="svgs" lang="renderjs">
let myChart
export default {
mounted() {
if (typeof window.svgs === 'function') {
this.initSvgs()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录,其相对路径相对于 www 计算
script.src = 'static/svg.js'
script.onload = this.initSvgs.bind(this)
document.head.appendChild(script)
}
},
methods: {
initSvgs() {
let that = this;
var draw = SVG().addTo('#svgs').size(315, 190);
var rect = draw.rect('100%', '100%').attr({ fill: '#f06' });
draw.path('M142.817,69.875 C142.498,63.851 146.538,60.373 154.76,60.373 C165.471,60.373 166.731,62.568 167.25,67.75 C168.052,75.759 163.499,82.112 163.499,85.629 C163.499,89.1455 171.692,130.955 155.574,131.701 C139.4555,132.447 147.601,89.8835 147.601,85.7275 C147.6005,81.5715 143.1355,75.899 142.8165,69.875 Z').attr({fill: '#eef5fe'}).click(function() {
that.option.status = !that.option.status;
if(that.option.status){
this.fill({ color: '#cbe0fd' })
}else{
this.fill({ color: '#eef5fe' })
}
})
},
updateSvgs(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
},
onClick(event, ownerInstance) {
// 调用 service 层的方法
// ownerInstance.callMethod('onViewClick', {
// test: 'test'
// })
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.svgs {
width: 750rpx;
height: 600rpx;
background-color: pink;
}
</style>
--------------------------------------------------svgjs在线地址:https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@latest/dist/svg.min.js
2 个回复
大凤凰 (作者)
已解决,采用renderjs方案解决,uniapp部分代码如下:
<template>
<view class="content" id="content">
<view @click="svgs.onClick" :prop="option" :change:prop="svgs.updateSvgs" id="svgs" class="svgs"></view>
<button @click="changeOption">更新数据</button>
</view>
</template>
<script>
export default {
data() {
return {
option: {
status: false
}
}
},
onLoad() {
console.log(this.option.status)
},
methods: {
changeOption() {
const data = this.option.series[0].data
// 随机更新示例数据
data.forEach((item, index) => {
data.splice(index, 1, Math.random() * 40)
})
},
onViewClick(options) {
console.log(options)
}
}
}
</script>
<script module="svgs" lang="renderjs">
let myChart
export default {
mounted() {
if (typeof window.svgs === 'function') {
this.initSvgs()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录,其相对路径相对于 www 计算
script.src = 'static/svg.js'
script.onload = this.initSvgs.bind(this)
document.head.appendChild(script)
}
},
methods: {
initSvgs() {
let that = this;
var draw = SVG().addTo('#svgs').size(315, 190);
var rect = draw.rect('100%', '100%').attr({ fill: '#f06' });
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
--------------------------------------------------svgjs在线地址:https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@latest/dist/svg.min.js
4***@qq.com - 程序猿小白
请问app端svg绘制,具体是怎么解决的呢,有代码可以参考一下吗