linyuling520 opened a new issue #16728:
URL: https://github.com/apache/echarts/issues/16728
### Version
4.9.0
### Link to Minimal Reproduction
_No response_
### Steps to Reproduce
// ##### chart.vue
<template>
<view class="content">
<view
:prop="echartInfo"
:change:prop="echarts.updateEcharts"
:id="id"
:class="id"
style="width: 100%; height: 100%"
></view>
</view>
</template>
<script>
export default {
props: {
echartInfo: {
type: Object,
default: () => ({})
},
id: {
type: String,
default: () => 'echart'
}
}
};
</script>
<script module="echarts" lang="renderjs">
import echarts from 'echarts';
import liquidfill from 'echarts-liquidfill';
let myChart
export default {
mounted() {
this.initEcharts()
},
methods: {
initEcharts() {
let option = this.echartInfo
let id = this.id
myChart = echarts.init(document.getElementById(id))
// 观测更新的数据在 view 层可以直接访问到
myChart.setOption(option)
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
myChart.setOption(newValue)
}
}
}
</script>
<style>
.content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
// ###### index.vue
<template>
<div class="minitor-container">
<div class="minitor">
<echart :echartInfo="echartInfo" id="echart"></echart>
</div>
<div class="minitor1">
<echart :echartInfo="echartInfo1" id="echart1"></echart>
</div>
</div>
</template>
<script>
import echart from '@/components/chart.vue';
export default {
components: {
echart
},
props: {
soc: {
type: Number,
default: 0
}
},
computed: {
echartInfo: function () {
return {
series: [
{
type: 'liquidFill',
radius: '78%',
center: ['50%', '50%'],
color: ['#0ff', '#0ff', '#0ff'], // 水波
data: [0.5, 0.5, 0.5], // data个数代表波浪数
label: {
normal: {
show: false
}
},
backgroundStyle: {
borderWidth: 1,
color: 'transparent'
},
outline: {
show: true,
itemStyle: {
borderColor: '#0ff',
borderWidth: 2
},
borderDistance: 3
}
}
]
};
}
},
data() {
return {
echartInfo1: {
notMerge: true,
series: [
{
name: '内线',
type: 'custom',
coordinateSystem: 'none',
renderItem: (params, api) => {
return {
type: 'arc',
shape: {
cx: 172 / 2,
cy: 200 / 2,
r: Math.min(172, 200) / 2.3,
startAngle: ((0 + this.angle) * Math.PI) / 180,
endAngle: ((90 + this.angle) * Math.PI) / 180
},
style: {
stroke: '#0ff',
fill: 'transparent',
lineWidth: 3.5
},
silent: true
};
},
data: [0]
},
{
name: '内线',
type: 'custom',
coordinateSystem: 'none',
renderItem: (params, api) => {
return {
type: 'arc',
shape: {
cx: 172 / 2,
cy: 200 / 2,
r: Math.min(172, 200) / 2.3,
startAngle: ((180 + this.angle) * Math.PI) / 180,
endAngle: ((270 + this.angle) * Math.PI) / 180
},
style: {
stroke: '#0ff',
fill: 'transparent',
lineWidth: 3.5
},
silent: true
};
},
data: [0]
},
{
name: '外线',
type: 'custom',
coordinateSystem: 'none',
renderItem: (params, api) => {
return {
type: 'arc',
shape: {
cx: 172 / 2,
cy: 200 / 2,
r: Math.min(172, 200) / 2.1,
startAngle: ((270 + -this.angle) * Math.PI) / 180,
endAngle: ((40 + -this.angle) * Math.PI) / 180
},
style: {
stroke: '#0ff',
fill: 'transparent',
lineWidth: 3.5
},
silent: true
};
},
data: [0]
},
{
name: '外线',
type: 'custom',
coordinateSystem: 'none',
renderItem: (params, api) => {
return {
type: 'arc',
shape: {
cx: 172 / 2,
cy: 200 / 2,
r: Math.min(172, 200) / 2.1,
startAngle: ((90 + -this.angle) * Math.PI) / 180,
endAngle: ((220 + -this.angle) * Math.PI) / 180
},
style: {
stroke: '#0ff',
fill: 'transparent',
lineWidth: 3.5
},
silent: true
};
},
data: [0]
},
{
name: '线头点',
type: 'custom',
coordinateSystem: 'none',
renderItem: (params, api) => {
const x0 = 172 / 2,
y0 = 200 / 2,
r = Math.min(172, 200) / 2.1,
point = this.getCirlPoint(x0, y0, r, 90 + -this.angle);
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 5
},
style: {
stroke: '#0ff', // 绿
fill: '#0ff'
},
silent: true
};
},
data: [0]
},
{
name: '线头点',
type: 'custom',
coordinateSystem: 'none',
renderItem: (params, api) => {
const x0 = 172 / 2,
y0 = 200 / 2,
r = Math.min(172, 200) / 2.1,
point = this.getCirlPoint(x0, y0, r, 270 + -this.angle);
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 5
},
style: {
stroke: '#0ff', // 绿
fill: '#0ff'
},
silent: true
};
},
data: [0]
}
]
},
timer: null,
angle: 0
};
},
mounted() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
this.timer = setInterval(() => {
this.draw();
}, 100);
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
methods: {
draw() {
this.angle = this.angle + 3;
this.echartInfo1 = {
notMerge: true,
series: [
{
name: '内线',
type: 'custom',
coordinateSystem: 'none',
renderItem: (params, api) => {
return {
type: 'arc',
shape: {
cx: 172 / 2,
cy: 200 / 2,
r: Math.min(172, 200) / 2.3,
startAngle: ((0 + this.angle) * Math.PI) / 180,
endAngle: ((90 + this.angle) * Math.PI) / 180
},
style: {
stroke: '#0ff',
fill: 'transparent',
lineWidth: 3.5
},
silent: true
};
},
data: [0]
},
{
name: '内线',
type: 'custom',
coordinateSystem: 'none',
renderItem: (params, api) => {
return {
type: 'arc',
shape: {
cx: 172 / 2,
cy: 200 / 2,
r: Math.min(172, 200) / 2.3,
startAngle: ((180 + this.angle) * Math.PI) / 180,
endAngle: ((270 + this.angle) * Math.PI) / 180
},
style: {
stroke: '#0ff',
fill: 'transparent',
lineWidth: 3.5
},
silent: true
};
},
data: [0]
},
{
name: '外线',
type: 'custom',
coordinateSystem: 'none',
renderItem: (params, api) => {
return {
type: 'arc',
shape: {
cx: 172 / 2,
cy: 200 / 2,
r: Math.min(172, 200) / 2.1,
startAngle: ((270 + -this.angle) * Math.PI) / 180,
endAngle: ((40 + -this.angle) * Math.PI) / 180
},
style: {
stroke: '#0ff',
fill: 'transparent',
lineWidth: 3.5
},
silent: true
};
},
data: [0]
},
{
name: '外线',
type: 'custom',
coordinateSystem: 'none',
renderItem: (params, api) => {
return {
type: 'arc',
shape: {
cx: 172 / 2,
cy: 200 / 2,
r: Math.min(172, 200) / 2.1,
startAngle: ((90 + -this.angle) * Math.PI) / 180,
endAngle: ((220 + -this.angle) * Math.PI) / 180
},
style: {
stroke: '#0ff',
fill: 'transparent',
lineWidth: 3.5
},
silent: true
};
},
data: [0]
},
{
name: '线头点',
type: 'custom',
coordinateSystem: 'none',
renderItem: (params, api) => {
const x0 = 172 / 2,
y0 = 200 / 2,
r = Math.min(172, 200) / 2.1,
point = this.getCirlPoint(x0, y0, r, 90 + -this.angle);
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 5
},
style: {
stroke: '#0ff', // 绿
fill: '#0ff'
},
silent: true
};
},
data: [0]
},
{
name: '线头点',
type: 'custom',
coordinateSystem: 'none',
renderItem: (params, api) => {
const x0 = 172 / 2,
y0 = 200 / 2,
r = Math.min(172, 200) / 2.1,
point = this.getCirlPoint(x0, y0, r, 270 + -this.angle);
return {
type: 'circle',
shape: {
cx: point.x,
cy: point.y,
r: 5
},
style: {
stroke: '#0ff', // 绿
fill: '#0ff'
},
silent: true
};
},
data: [0]
}
]
};
},
getCirlPoint(x0, y0, r, angle) {
const x1 = x0 + r * Math.cos((angle * Math.PI) / 180),
y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
return {
x: x1,
y: y1
};
}
}
};
</script>
<style lang="scss" scoped>
.minitor-container {
width: 50%;
height: 400rpx;
background-color: #fff;
position: relative;
.minitor {
position: absolute;
width: 100%;
height: 400rpx;
}
.minitor1 {
position: absolute;
width: 100%;
height: 400rpx;
}
}
</style>
### Current Behavior
在h5端运行 custom图表和liquidfill图表正常显示
### Expected Behavior
期望APP端也能运行custom系列图表
### Environment
```markdown
- OS:
- Browser:
- Framework:
uniapp+renderjs+echarts+echarts-liquidfill
echarts version: 4.9.0
echarts-liquidfill version: 2.0.6
HbuilderX version: 3.3.13
```
### Any additional comments?
_No response_
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
echarts-bot[bot] commented on issue #16728: URL: https://github.com/apache/echarts/issues/16728#issuecomment-1076024957 @linyuling520 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗 <details><summary><b>TRANSLATED</b></summary><br> **TITLE** [Bug] uniapp echarts custom series h5 can display custom graphics but not on the app side </details> -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org For queries about this service, please contact Infrastructure at: users@infra.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org For additional commands, e-mail: commits-help@echarts.apache.org