图表 xEchart

在线预览

在线模拟尺寸:

介绍

是百度图表6.0.0,全量版本传递正常的百度对象数据且需要将数据JSON.stringify化图表文档：https://echarts.apache.org/zh/index.html 编译微信版本：https://echarts.apache.org/zh/builder.html 微信版本请使用1.1.18下dmeo qita/echarts.esm.min.js文件。或者自己下载Echart下载注意的是：如果你的配置中函数函数，需要自己转换为字符串【如果是微信端建议直接传对象，不要转为字符串这样兼容性更好。】比如：函数对象请参考我demo页面的示例规则分平台写否则无法实现函数对象。

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径


@/uni_modules/tmx-ui/components/x-echart/x-echart.uvue

使用


<x-echart></x-echart>

Props 属性

名称	说明	类型	默认值
width	`容器宽`	`string`	`'auto'`
height	`容器高`	`string`	`'250px'`
opts	`hbx sdk4.76+后建议不要使用此属性，请改用ref方法setOptions`	`string`	`''`

Events 事件

名称	参数	说明
init	`-`	当图表初始化完成后触发，此时可以使用ref或者参数chart来来设置图表数据了。

Slots 插槽

名称	说明	数据

Ref 方法

名称	参数	返回值	说明
setOptions	`data: union` - `小程序是object,非小程序是json序列化的字符串。`	`-`	设置图表数据，小程序可以直接传图表对象数据。非小程序，需要序列化为字符串再赋值。
getImg	-	`-`	暂未开放
setEcharts	`ins: Echart` - `微信专用函数。Echart实例`	`-`	设置图表实例
eventJsCall	-	`-`	-
cahrtActions	`funName: string` - `第一个参数是方法名如：resize` `args: string` - `方法参数` `arg: null` - `固定为null`	`-`	chart对象函数操作

示例文件路径

json


/pages/qita/echart

示例源码

uvue

vue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
			<navigation-bar :background-color="xThemeConfigNavBgColor"
				:front-color="xThemeConfigNavFontColor"></navigation-bar>
		</page-meta>
		<!-- #endif -->
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">图表 Echart</x-text>
			<x-text color="#999999">
				是百度图表6.0.0,全量版本
			</x-text>
		</x-sheet>
		<x-sheet dark-color="#dcdcdc">
			<x-echart ref="echart" @init="oninit" ></x-echart>
			<x-button :block="true" @click="changeData">改变数据</x-button>
			<x-button class="mt-20" :block="true" @click="addEchartsclick">注册click事件(不要重复注册)</x-button>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b ">测试饼图</x-text>
		</x-sheet>
		<x-sheet dark-color="#dcdcdc">
			<x-echart ref="echart2" height="300px" @init="initPie" ></x-echart>
		</x-sheet>
		<view style="height:50px"></view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup lang="ts">
	const echart = ref<XEchartComponentPublicInstance | null>(null)
	const echart2 = ref<XEchartComponentPublicInstance | null>(null)
	// #ifdef MP-WEIXIN
	import * as echarts from "./echarts.esm.min.js"
	// #endif

	onReady(() => {
		// #ifdef MP
		let ele = echart.value!
		let ele2 = echart2.value!
		ele.setEcharts(echarts)
		ele2.setEcharts(echarts)
		// #endif
	})
	function addEchartsclick() {
		let ele = echart.value!
		ele.cahrtActions("click", "", (data : any) => {
			console.log(data)
			if (data!=null&& typeof data == 'object') {
				uni.showModal({
					title: "提醒",
					content: JSON.stringify(data! as UTSJSONObject),
					showCancel: false
				})
			}
		})
	}

	function changeData() {
		let opts = {
			title: {
				text: 'xui'
			},
			legend: {
				data: ['xui']
			},
			xAxis: {
				data: ['衬衫', '羊毛衫', '裤子', '高跟鞋', '袜子', '1高跟鞋']
			},
			yAxis: {},
			series: [
				{
					name: 'xui',
					type: 'bar',
					data: [100, 50, 20, 70, 40, 600]
				}
			]
		} as UTSJSONObject

		// #ifdef MP
		echart.value?.setOptions?.(opts)
		// #endif
		// #ifndef MP
		echart.value?.setOptions?.(JSON.stringify(opts))
		// #endif
		
		
		let ele = echart.value!
		ele.cahrtActions('resize', '', null)
	}
	function initPie() {
		let option = {
			title: {
				text: 'Referer of a Website',
				subtext: 'Fake Data',
				left: 'center'
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				left: 'left'
			},
			series: [
				{
					name: 'Access From',
					type: 'pie',
					radius: '50%',
					data: [
						{ value: 1048, name: 'Search Engine' },
						{ value: 735, name: 'Direct' },
						{ value: 580, name: 'Email' },
						{ value: 484, name: 'Union Ads' },
						{ value: 300, name: 'Video Ads' }
					],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		} as UTSJSONObject;

		// #ifdef MP
		echart2.value?.setOptions?.(option)
		// #endif
		// #ifndef MP
		echart2.value?.setOptions?.(JSON.stringify(option))
		// #endif
	}

	function oninit() {
		let opts = {
			title: {
				text: 'ECharts示例'
			},
			tooltip: {},
			legend: {
				data: ['销量']
			},
			xAxis: {
				data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
			},
		
			yAxis: {},
			series: [
				{
					name: '销量',
					type: 'bar',
					data: [5, 20, 36, 10, 10, 20]
				}
			]

		} as UTSJSONObject
		// #ifdef MP
		echart.value?.setOptions?.(opts)
		// #endif
		// #ifndef MP
		echart.value?.setOptions?.(JSON.stringify(opts))
		// #endif
	}
</script>

<style lang="scss">

</style>

图表 xEchart ​

介绍 ​

平台兼容 ​

文件路径 ​

使用 ​

Props 属性 ​

Events 事件 ​

Slots 插槽 ​

Ref 方法 ​

示例文件路径 ​

示例源码 ​