uni使用echarts自定义图标（圆形雷达图）

echarts.vue组件

<template><view><view class="echarts" :id="option.id" :prop="option" :change:prop="echarts.update" @click="echarts.onClick"></view></view>
</template><script>export default {name: 'Echarts',props: {option: {type: Object,required: true}},created() {// 设置随机数idlet t = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'let len = t.lengthlet id = ''for (let i = 0; i < 32; i++) {id += t.charAt(Math.floor(Math.random() * len))}this.option.id = id},methods: {/*** renderjs内的点击事件，回调到父组件* @param {Object} params*/onViewClick(params) {this.$emit('click', params)}}}
</script><script module="echarts" lang="renderjs">import echarts from '@/components/echarts/echarts.min.js'export default {data() {return {chart: null,clickData: null // echarts点击事件的值}},mounted() {this.init();},methods: {/*** 初始化echarts*/init() {// 根据id初始化图表this.chart = echarts.init(document.getElementById(this.option.id))this.update(this.option)// echarts的点击事件this.chart.on('click', params => {// 把点击事件的数据缓存下来this.clickData = params})},/*** 点击事件，可传递到外部* @param {Object} event* @param {Object} instance*/onClick(event, instance) {if (this.clickData) {// 把echarts点击事件相关的值传递到renderjs外instance.callMethod('onViewClick', {value: this.clickData.data,name: this.clickData.name,seriesName: this.clickData.seriesName})// 上次点击数据置空this.clickData = null}},/*** 监测数据更新* @param {Object} option*/update(option) {if (this.chart) {// 因App端，回调函数无法从renderjs外传递，故在此自定义设置相关回调函数if (option) {// tooltipif (option.tooltip) {// 判断是否设置tooltip的位置if (option.tooltip.positionStatus) {option.tooltip.position = this.tooltipPosition()}// 判断是否格式化tooltipif (option.tooltip.formatterStatus) {option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option.tooltip.formatFloat2, option.tooltip.formatThousands)}}}// 设置新的optionthis.chart.setOption(option, option.notMerge)}},/*** 设置tooltip的位置，防止超出画布*/tooltipPosition() {return (point, params, dom, rect, size) => {// 其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小let x = point[0]let y = point[1]let viewWidth = size.viewSize[0]let viewHeight = size.viewSize[1]let boxWidth = size.contentSize[0]let boxHeight = size.contentSize[1]let posX = 0 // x坐标位置let posY = 0 // y坐标位置if (x >= boxWidth) { // 左边放的下posX = x - boxWidth - 1}if (y >= boxHeight) { // 上边放的下posY = y - boxHeight - 1}return [posX, posY]}},/*** tooltip格式化* @param {Object} unit 数值后的单位* @param {Object} formatFloat2 是否保留两位小数* @param {Object} formatThousands 是否添加千分位*/tooltipFormatter(unit, formatFloat2, formatThousands) {return params => {let result = ''unit = unit ? unit : ''for (let i in params) {if (i == 0) {result += params[i].axisValueLabel}let value = '--'if (params[i].data !== null) {value = params[i].data// 保留两位小数if (formatFloat2) {value = this.formatFloat2(value)}// 添加千分位if (formatThousands) {value = this.formatThousands(value)}}// #ifdef H5result += '\n' + params[i].seriesName + '：' + value + ' ' + unit// #endif// #ifdef APP-PLUSresult += '<br/>' + params[i].marker + params[i].seriesName + '：' + value + ' ' + unit// #endif}return result}},/*** 保留两位小数* @param {Object} value*/formatFloat2(value) {let temp = Math.round(parseFloat(value) * 100) / 100let xsd = temp.toString().split('.')if (xsd.length === 1) {temp = (isNaN(temp) ? '0' : temp.toString()) + '.00'return temp}if (xsd.length > 1) {if (xsd[1].length < 2) {temp = temp.toString() + '0'}return temp}},/*** 添加千分位* @param {Object} value*/formatThousands(value) {if (value === undefined || value === null) {value = ''}if (!isNaN(value)) {value = value + ''}let re = /\d{1,3}(?=(\d{3})+$)/glet n1 = value.replace(/^(\d+)((\.\d+)?)$/, function(s, s1, s2) {return s1.replace(re, '$&,') + s2})return n1}}}
</script><style lang="scss" scoped>.echarts {width: 100%;height: 100%;}
</style>

圆形雷达图，可以看echart文档

<template><view><echarts :option="option" style="height: 300px;" @click="echartsClick"></echarts></view>
</template><script>import echarts from '@/components/echarts/echarts.vue'export default {data() {return {option: {},option3: {notMerge: true, // 自定义变量：true代表不合并数据，比如从折线图变为柱形图则需设置为true；false或不写代表合并tooltip: {},radar: {// shape: 'circle',radius: 120, //大小startAngle: 90,splitNumber: 4,shape: 'circle', //圆name: {formatter: '{value}',textStyle: {color: '#72ACD1'}},indicator: [{text: '指标一'},{text: '指标二'},{text: '指标三'}],splitArea: {areaStyle: {color: ['rgba(114, 172, 209, 0.2)'], shadowColor: 'rgba(0, 0, 0, 0.3)',shadowBlur: 10}},axisLine: {lineStyle: {color: 'rgba(255, 255, 255, 0)'}},splitLine: {lineStyle: {color: 'rgba(255, 255, 255, 0.5)'}}},series: [{name: '雷达图',type: 'radar',itemStyle: {normal: {color: '#DFA7A8'}},data: [{value: [60, 5, 0.30],color: 'red',symbol: "circle", //节点样式symbolSize: 7, //节点大小areaStyle: {color: '#6D729C'},lineStyle: {width: 0,color: '#6D729C'}},]}, ]}};},components: {echarts},onLoad() {this.option = this.option3},methods: {/*** 点击事件* @param {Object} params*/echartsClick(params) {console.log('点击数据', params)},}};
</script><style></style>

uni使用echarts自定义图标（圆形雷达图）相关推荐

Echarts数据可视化series-radar雷达图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
android 自定义view: 蛛网/雷达图(三)
本系列自定义View全部采用kt 系统mac android studio: 4.1.3 kotlin version1.5.0 gradle: gradle-6.5-bin.zip 本篇效果: 蛛网 ...
Echarts日常：四角雷达图封装以及名称过长换行处理
项目场景: 要求四角类似正方形的雷达图,名字过长可换行问题描述四角雷达图的关键点就是起始角度的设置属性startAngle: 135,//起始点角度下文中有放置位置背景为圆形四环,通过以 ...
java 雷达图_Android雷达图(蜘蛛网图)，自定义view之雷达图，正五边雷达图，分数图...
最近业务要做分数雷达图,到网上找了很大,原理都差不多,但是要适用自己的业务,还需要微调.下面是我微调后的效果图雷达图蜘蛛网.png 原理很简单 1,确定雷达图中心点的坐标 2,用正三角sin,反三角 ...
Android自定义View：雷达图/蜘蛛网图
运行效果图雷达图结构分析对雷达图进行结构拆分,得到一个清晰的思路,这些结构也就是需要绘制的部分.为了能够有更好的扩展性,我将它们作为可定制的属性暴露出来,以下是结构属性表: 结构相关属性描述 ...
Echarts饼图实现圆形柱图
一.代码简介本次主要是在Vue web项目中,利用Echarts中的饼图组件实现圆形柱状图二.功能预览三.示例代码 <template><div id="echart ...
【前端echatrs图表框架】使用echarts实现雷达图
一个学生在大学四年中所修的所有课程可以分为素质必修课,核心必修课,一般必修课,通识必修课,通识限选课5种,通过雷达图,导入学生在每一种课程的平均绩点,即可清晰地显示一个同学的综合发展情况了. 代码如下 ...
echarts雷达图 echart雷达图雷达图
目录普通雷达图圆形雷达图普通雷达图 var legendData = ['高一(1)班', '高一(2)班']; //图例var indicator = [{text: '二面角的定义',max ...
Android自定义View 多边形能力分析控件，雷达图（蛛网）动态实现
自定义View实现雷达图还是挺简单的,它能让使用让使用者能一目了然的了解各项指标的变动情形以及好坏趋势.使用得最多的便是Path路径,很适合初学者用来练习. 效果图如下: 下面是实体类的属性: pub ...

uni使用echarts自定义图标（圆形雷达图）

uni使用echarts自定义图标（圆形雷达图）相关推荐

最新文章

热门文章