supervons / react-native-echarts-pro

A React-Native charts based on Apache ECharts, support various charts and map.
https://supervons.github.io/react-native-echarts-pro-docs/
MIT License
216 stars 33 forks source link

设置graphic属性 图片不显示 在官网能正常显示 #53

Closed zengyuehao closed 2 years ago

zengyuehao commented 2 years ago

`

import React, {useEffect, useRef, useState} from 'react'; import { View, StyleSheet } from 'react-native';

import ECharts from "react-native-echarts-pro";

import * as echarts from 'echarts'

function GaugeChart(props) { //构造函数 const [option, setOption] = useState({}) const chartRef = useRef(null)

useEffect(() => {
    const defOp = {
        graphic: {
            elements: [{
                type: "image",
                style: {
                    image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F27%2F20150927124837_KeRUL.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651219937&t=cd810aaa55f2b18881793b0d577aac9d",//你的图片地址
                    width: 100,
                    height: 100,
                },
                left: "center",
                top: "center",
            }],
        },
        series: [
            {
                type: 'pie',
                name: '',
                radius: ['94%', '100%'],
                data: [
                    { value: 0, name: '' },
                ],
                itemStyle: {
                    borderWidth: 0,
                    color: '#BFDCFF'
                },
                label: {
                    show: false
                },
                emphasis: {
                    disabled: true
                }
            },
            {
                name: 'Pressure',
                type: 'gauge',
                startAngle: 90,
                endAngle: -270,
                radius: "94%",
                axisTick: {
                    show: false
                },
                pointer: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                anchor: {
                    show: false
                },
                axisLabel: {
                    show: false,

                },
                label: {
                    show: false
                },
                title: {
                    show: false
                },
                progress: {
                    show: true,
                    width: 3,
                    itemStyle: {
                        borderWidth: 0,
                        color: '#0072FF'
                    }
                },
                detail: {
                    show: false
                },
                axisLine: {
                    show: false,
                },
                // detail: {
                //     valueAnimation: true,
                //     formatter: '{value}'
                // },
                data: [
                    {
                        value: 50,
                    }
                ]
            }
        ]
    }
    setOption(defOp)
}, [])

return (
    <ECharts
        ref={chartRef}
        option={option}
        height={85}
    />
)

}

const styles = StyleSheet.create({});

export default GaugeChart

`

zengyuehao commented 2 years ago

"react-native": "0.67.1", "react-native-webview": "11.15.0", "react-native-echarts-pro": "1.8.3",

supervons commented 2 years ago

你这图片地址有点问题,转了太多次。

我使用这个地址是可以正常显示的:

https://pic.zsucai.com/files/2013/0719/sugger3.jpg