Closed zengyuehao closed 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
"react-native": "0.67.1", "react-native-webview": "11.15.0", "react-native-echarts-pro": "1.8.3",
你这图片地址有点问题,转了太多次。
我使用这个地址是可以正常显示的:
https://pic.zsucai.com/files/2013/0719/sugger3.jpg
`
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)
}
const styles = StyleSheet.create({});
export default GaugeChart
`