好的网站推荐一个,商城网站有免费建设的吗,福州专业网站制作,深圳装修公司招聘装修项目经理问题#xff1a;没有报错但是图表不出来
【 调试了半天圆环图表没有不出来。是因为没有明示设置宽度与高度】 /* 请根据实际需求修改父元素尺寸#xff0c;组件自动识别宽高 */ .charts-box { width: 100%; height: 300px; } 最终效果 先导入ucharts到项目
uniapp的项目…问题没有报错但是图表不出来
【 调试了半天圆环图表没有不出来。是因为没有明示设置宽度与高度】 /* 请根据实际需求修改父元素尺寸组件自动识别宽高 */ .charts-box { width: 100%; height: 300px; } 最终效果 先导入ucharts到项目
uniapp的项目导入参考 uniapp 导入ucharts图表插件 H5项目 使用echarts eopts配置-CSDN博客
导入之后创建下面的ringEchart.vue
源码
templateview classNamecharts-boxu-gap height30 bg-color#bfc/u-gapview classcharts-box!-- 演示动态改变eopts --qiun-data-charts typering :opts{legend:{position:bottom}} :eoptsringOpts :chartDatachartsDataPie2:echartsH5true :echartsApptrue//viewu-gap height30 bg-color#bfc/u-gapview classcharts-boxqiun-data-charts typering :chartDataRing2 :echartsH5true :echartsApptruebackgroundnone :eoptseopts2//viewu-button clickresetDataTEST/u-button/view
/templatescript
import UGap from /uview-ui/components/u-gap/u-gap.vue;
import UButton from /uview-ui/components/u-button/u-button.vue;export default {components: {UButton, UGap},data() {return {ringOpts: {color: [#FF00FF, #AAFF11],legend: {show: false}},chartsDataPie2: {},eopts2: {tooltip: {trigger: item},extra: {pie: {offsetAngle: -45,ringWidth: 100,labelWidth: 15}},legend: {top: 5%,left: center}},Ring2: {series: [{name: Access From,// type: pie,radius: [40%, 70%],avoidLabelOverlap: false,label: {show: false,position: center},emphasis: {label: {show: true,fontSize: 40,fontWeight: bold}},labelLine: {show: false},data: [{value: 1048, name: Search Engine},{value: 735, name: Direct},{value: 580, name: Email},{value: 484, name: Union Ads},{value: 300, name: Video Ads}]}]},};},onLoad() {console.log(|--onLoad)},onReady() {setTimeout(() {//1. 获取数据this.getServerData();}, 1000);},mounted() {console.log(|--mounted)this.getServerData();},methods: {resetData() {this.Ring2 {series: [{name: Access From,// type: pie,radius: [40%, 70%],avoidLabelOverlap: false,label: {show: false,position: center},emphasis: {label: {show: true,fontSize: 40,fontWeight: bold}},labelLine: {show: false},data: [{value: 1048, name: Search Engine},{value: 735, name: Direct},{value: 580, name: Email},{value: 484, name: Union Ads},{value: 300, name: Video Ads}]}]}this.eopts2.series this.Ring2console.log(this.Ring2)},getServerData() {//模拟从服务器获取数据时的延时let PieA {series: [{data: [{name: 一班,value: 50}, {name: 二班,value: 30}, {name: 三班,value: 20}, {name: 四班,value: 18}, {name: 五班,value: 8}]}]}// this.chartsDataPie2 JSON.parse(JSON.stringify(PieA))this.chartsDataPie2 { series: [{data: [{name: 一班,value: 50}, {name: 二班,value: 30}, {name: 三班,value: 20}, {name: 四班,value: 18}, {name: 五班,value: 8}]}]}},}
};
/scriptstyle scoped
/* 请根据实际需求修改父元素尺寸组件自动识别宽高 */
.charts-box {width: 100%;height: 300px;
}
/style
