uniapp 微信小程序端echarts扇形图

github地址：https://github.com/yah0130/echarts-wx-uniapp

插件地址：echarts-for-wx - DCloud 插件市场

具体流程参考github或者插件文档

效果图

主要代码：

<template><view><uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec"></uni-ec-canvas></view>
</template><script>import uniEcCanvas from '@/pagesIndex/components/uni-ec-canvas/uni-ec-canvas.vue'import * as echarts from '@/pagesIndex/components/uni-ec-canvas/echarts'let chart = nullexport default {components: {uniEcCanvas},data() {return {ec: {lazyLoad: true},option: {legend: {top: '0%',left: 'center',itemWidth: uni.upx2px(16), // 图例标记的图形宽度。itemHeight: uni.upx2px(16), //  图例标记的图形高度。itemGap: uni.upx2px(22), // 图例每项之间的间隔。textStyle: {color: "#000", // 文字的颜色。fontFamily: "sans-serif", // 文字的字体系列。fontSize: uni.upx2px(12), // 文字的字体大小。lineHeight: uni.upx2px(0), // 行高。},},//柱子颜色设置color: ['#78ce5e', '#fffd5e', '#F88421', '#42B1FF', '#FF5C50', '#B424D5', '#B89775', '#7D4E44','#60AACD', '#97D6F4', '#3E6374', '#812890', '#E66520', '#D2D117', '#60594D', '#FF2C51','#24C91D'],series: [{name: 'Access From',type: 'pie',// radius: '70%',radius: ['30%', '65%'],avoidLabelOverlap: false,data: [{ value: 1048, name: '10.80%' },{ value: 735, name: '20.80%' },{ value: 580, name: '5.80%' },{ value: 1048, name: '30.80%' },{ value: 735, name: '40.80%' },{ value: 580, name: '50.80%' },{ value: 1048, name: '60.80%' },{ value: 735, name: '70.80%' },{ value: 580, name: '80.90%' },{ value: 1048, name: '10.90%' },{ value: 735, name: '20.89%' },{ value: 580, name: '5.90%' },{ value: 1048, name: '30.90%' },{ value: 735, name: '40.90%' },{ value: 580, name: '50.90%' },{ value: 1048, name: '60.90%' },],label: {align: 'center',normal: {formatter: '{c}万',    // position:'inner', //标签的位置color: '#000',textStyle: {fontSize: uni.upx2px(10),},},},labelLine: {normal: {length: 5,length2: 6},}}]}}},onLoad() {this.$nextTick(() => {this.$refs.canvas.init(this.initChart)})},methods: {initChart(canvas, width, height, canvasDpr) {chart = echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: canvasDpr})canvas.setChart(chart)chart.setOption(this.option)console.log('setOption')return chart},}}
</script><style lang="scss">.uni-ec-canvas {width: 50%;height: 500rpx;display: block;}
</style>

uniapp 微信小程序端echarts扇形图相关推荐

uni-app 微信小程序端-AirKiss一键配网
uni-app 微信小程序端-AirKiss一键配网发现网上很多关于微信小程序配网的文章都是微信小程序原生开发,uni-app少之又少.这篇文章就介绍一下怎么在HBuilder X使用airkiss ...
UNIAPP微信小程序使用Echarts
UNIAPP微信小程序使用Echarts 1. 前言最近要在uniapp做的小程序中使用echarts,网上搜了很多教程都很麻烦,这里提供一种简便快捷CV方案. 先说下图表选型的问题,如果你 ...
uniapp - 微信小程序端引入 Echarts 图表及使用详细教程，简单快速的解决方案（拒绝复杂的过程，附带详细的使用示例保姆级教程）
效果图现在各种平台的文章都太乱了,基本上实测无效... 帮你在uniapp开发中,微信小程序平台端使用 echats 图表的详细教程,快速并且简单轻松搞定. 下面是最后的运行结果,随便用的一个图表进 ...
uni-app微信小程序使用ECharts
uni-app搭建的微信小程序项目中使用ECharts, 记录一下自己的使用,以及过程中遇到的问题参考自:uniapp在微信小程序中使用 ECharts_wxh958548129的博客-CSDN博客 ...
微信小程序使用echarts雷达图遇到的坑
最近一个医院的小程序需要使用雷达图来展示,简单总结一下. 1:使用场景:在详情页,根据测试的题目得分画成雷达图,测试的题目会得到2种结果,高危和低危.一种雷达图,但是样式不一样.如果是标题文字颜色不用 ...
移动端h5 层叠轮播图，uniapp微信小程序层叠轮播图，3d轮播图
如果你的项目使用的是jquery的话推荐使用swiper 进行做 https://www.swiper.com.cn/usage/index.html 如果用的是vue3开发的纯h5项目的话,推荐 ...
uniapp(微信小程序)使用ucharts环状图文字重叠
环状图文字折叠文档里未找到设置最小角度的方法 offsetAngle Number 0 起始角度偏移度数,顺时针方向,起点为3点钟位置为0度(比如要设置起点为12点钟位置,即逆时针偏移90度,传入- ...
微信小程序canvas画价格走势图（一）
今天是周二,今天来开一个新坑吧.最近花了整整两个工作日的时间画了一个微信小程序端的价格走势图,现在来分享一下经验. 因为内容比较多,所以打算这次分为多篇博客来写,这样一篇博客的内容就会更少.更清晰.下 ...
uni-app分割线微信小程序端不显示
uni-app分割线微信小程序端不显示文章目录 uni-app分割线微信小程序端不显示问题描述解决方案问题描述做项目时,遇到一个问题: 自定义的分割线组件在web端能显示,在微信小程序端却不 ...

uniapp 微信小程序端echarts扇形图

主要代码：

uniapp 微信小程序端echarts扇形图相关推荐

最新文章

热门文章