uniapp-秋云图表 ucharts echarts 对比与关系-编程知识

uniapp-秋云图表 ucharts echarts 对比与关系

科普：

秋云图表库，包含二种配置属性对应二种js配置文件。

一种是：echarts.js,
一种是： ucharts。

二者的配置属性不一样！

ucharts和echarts对比

ucharts和echarts都是用于数据可视化的开源JavaScript库，它们有一些相似之处，也有一些不同之处。

相似之处：

都支持多种图表类型和交互式操作。
都能够使用简单、易懂的API来生成图表。
都具有良好的文档和社区支持。

不同之处：

ucharts是面向移动端的数据可视化库，具有更轻量、更快速的特点，适合于移动设备上的数据可视化；而echarts则更适合于PC端和大屏幕的数据可视化。
ucharts依赖于canvas绘制图表，echarts则利用SVG技术绘制图表，因此echarts的图表在视觉效果上更加细致、清晰，而ucharts则更加流畅。
ucharts整体风格较为简单，echarts在视觉设计上更加花哨。

qiun-data-charts 配置echarts

增加：主要是 eopts 配置

<qiun-data-charts :chartData="chartDataPie" :echartsH5="true" :echartsApp="true"
background="none" :eopts="eopts" />

eopts: {color: ["#3287f7", "#ffb87c", "#7cdeb9", "#f26f84", "#6fccf0", "#a16af0"],legend: {show: false}},chartDataPie: {"series": [{'type': 'pie',radius: '55%',label: {normal: {formatter: "{b}:\n{c}\n{d}%", //百分比之后换行显示文字color: '#555'},color: '#555'},data: [{"name":"一班","value":50},{"name":"二班","value":30},{"name":"三班","value":20},{"name":"四班","value":18},{"name":"五班","value":8}]}]},

qiun-data-charts 配置echarts

增加：主要是 opts 配置

<template><view class="charts-box"><view class="chart-title">洗涤费趋势</view><qiun-data-chartstype="column":opts="opts":chartData="chartData"/></view>
</template><script>
export default {data() {return {chartData: {},// opts:opts uCharts配置opts: {xAxis: {disableGrid: true},yAxis: {disableGrid: true,data: [{min: 0}]},extra: {column: {type: "group"}}}};},onReady() {this.getServerData();},methods: {getServerData() {setTimeout(() => {//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接let res = {categories: ["2016", "2017", "2018", "2019", "2020", "2021"],series: [{name: "目标值",data: [35, 36, 31, 33, 13, 34]}]};this.chartData = JSON.parse(JSON.stringify(res));}, 500);},}
};
</script><style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {width: 100%;height: 300px;border-radius: 10px;border: 1rpx solid black;padding: 15rpx;background-color: #fff;
}
.chartsview{/*border-radius: 15rpx;*//*background-color: #fff;*/
}.chart-title {text-align: center;background-color: #bfc;
}
</style>