网站设计宽度尺寸,wordpress 仿微博模板,现在app用什么开发,网页代码编辑器有哪些软件1.ucharts准备
有两种使用方式#xff1a;一种是在uni的插件市场下载#xff08;组件化开发#xff09;。一种是手动引入ucharts包。官方都封装好组件了#xff0c;我们不用岂不是浪费。
直接去dcloud插件市场#xff08;DCloud 插件市场#xff09;找#xff0c;第一… 1.ucharts准备
有两种使用方式一种是在uni的插件市场下载组件化开发。一种是手动引入ucharts包。官方都封装好组件了我们不用岂不是浪费。
直接去dcloud插件市场DCloud 插件市场找第一个是ucharts第二个是echarts。
不考虑小程序的话echarts更好功能丰富文档工具免费。
ucharts体积要小非常多但是工具要会员差点意思而且网传bug会多一点但我没遇到。
ucharts文档uCharts官网 - 秋云uCharts跨平台图表库 2.体积问题
ucharts的里static下放了echarts的文件导致体积比较大可以删了。忘了要不要改qiun-data-charts里的引入地址如果要改的话项目会有报错提示。
以下酌情优化
因为我的uni_modules里包比较多导致主包体积有点大所以我又将ucharts给提取到分包里并且删除了不需要的文件。同时把qiun-data-charts里的引入地址改一下注意有两处引入要改。
如果开发中不需要改u-charts源码的话可以用u-charts.min.js同样改一下上述引入地址再把u-charts.js删了体积会更小。 3.使用
完整代码在下面根据自己的理解写了点注释。
跟平常使用组件一样如果没有像我一样把ucharts的提到分包就不需要引入和定义直接用。
ucharts把图表配置和渲染数据分开了chartData里放渲染数据opts里放图表配置。
type就是定义这是什么图标柱状图条形图之类的。
import qiunDataCharts from ./components/qiun-data-charts/qiun-data-charts.vue;
components:{qiunDataCharts},
//
view stylewidth:100%; height:280rpx;qiun-data-charts :chartDatachartData backgroundnone typebar :optsopts/
/view templateviewview classchartview classchart-itemview classform-title车间在制品/view!-- 车间在制品 --view classboardview stylewidth:100%; height:280rpx;qiun-data-charts :chartDatachartData backgroundnone typebar :optsopts//view/view/viewview classchart-itemview classform-title各工步在制品/view!-- 各工步在制品 --view classboardview stylewidth:100%; height:520rpx;qiun-data-charts :chartDataworkDatabackgroundnone typecolumn :optsworkopt//view/view/view/view/view
/templatescriptimport qiunDataCharts from ./components/qiun-data-charts/qiun-data-charts.vue;export default {data() {return {chartData: {},opts: {},workData: {},workopt: {}};},components:{qiunDataCharts},onShow() {this.initWork()this.initCar()},methods: {// 工步initWork(){this.workData {categories: [自动焊接,系统返修,层压,层压测试,层压外观检,包装,装机],series: [{name: 1车间,data: [35,36,31,33,13,34,14]},{name: 2车间,data: [18,27,21,24,6,28,37]},{name: 3车间,data: [18,27,21,24,6,28,23]},{name: 4车间,data: [18,27,21,24,6,28,19]}]},this.workopt {color: [#105fa3,#62bf8f,#c56d15,#c62d32,#73C0DE,#3CA272,#FC8452,#9A60B4,#ea7ccc],padding: [15,15,0,5],enableScroll: false,legend: {show: true,//显示说明文本块fontColor: #ffffff,//说明文本块颜色},dataLabel: false,//柱状体上方不显示数字xAxis: {rotateLabel: true,rotateAngle: 50,lineHeight: 50,axisLineColor: #ffffff,//轴线颜色fontColor: #ffffff,//x轴刻字颜色disableGrid: true,// format: xAxisDemo3},yAxis: {gridColor: #ffffff,//横向网格线颜色data: [{axisLineColor: #ffffff,//轴线颜色fontColor: #ffffff,//y轴刻字颜色min: 0}]},extra: {column: {type: group,width: 6,seriesGap: 2,//一个刻度中多个柱的间距activeBgColor: #000000,activeBgOpacity: 0.08,}}}},// 车间initCar(){this.chartData {categories: [1车间,2车间,3车间,4车间],series: [{name: 完成量,data: [38,47,51,24]}]},this.opts {color: [#1890FF,#91CB74],padding: [15,30,0,5],enableScroll: false,legend: {fontColor: #ffffff,//说明文本块颜色},dataLabel: false,//柱状体上方不显示数字xAxis: {axisLineColor: #ffffff,//轴线颜色gridColor: #ffffff,//纵坐标颜色fontColor: #ffffff,//x轴刻字颜色boundaryGap: justify,disableGrid: false,min: 0,axisLine: false,max: 80},yAxis: {data: [{type: categories,axisLineColor: #ffffff,//轴线颜色fontColor: #ffffff,//y轴刻字颜色}]},extra: {bar: {type: group,width: 9,meterBorde: 1,meterFillColor: #FFFFFF,activeBgColor: #000000,activeBgOpacity: 0.08,linearType: custom,barBorderCircle: true,seriesGap: 2,categoryGap: 2}}}},},}
/scriptstyle langscss
.chart{padding: 0 10rpx;background: #3a3d5c;.chart-item{margin: 8rpx 0;padding: 20rpx;background: #202437;}.form-title{margin: 10rpx 0 26rpx;font-size: 30rpx;color: #fff;text-align: center;}}
/style
