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-charts
        type="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>

将前面的epots改成opts即可。Easy.

相关推荐
戒不掉的伤怀几秒前
【Navicat 连接MySQL时出现错误1251:客户端不支持服务器请求的身份验证协议;请考虑升级MySQL客户端】
服务器·数据库·mysql
cv高级工程师YKY6 分钟前
服务器 - - QPS与TPS介绍
数据库
guojl11 分钟前
深度解读jdk8 HashMap设计与源码
java
nbsaas-boot14 分钟前
高可扩展属性建模设计:架构师的全局思考与落地方案
数据库
guojl16 分钟前
深度解读jdk8 ConcurrentHashMap设计与源码
java
爱上语文33 分钟前
Redis基础(5):Redis的Java客户端
java·开发语言·数据库·redis·后端
A~taoker39 分钟前
taoker的项目维护(ng服务器)
java·开发语言
HGW6891 小时前
基于 Elasticsearch 实现地图点聚合
java·elasticsearch·高德地图
hi星尘1 小时前
深度解析:Java内部类与外部类的交互机制
java·开发语言·交互
陈敬雷-充电了么-CEO兼CTO1 小时前
推荐算法系统系列>推荐数据仓库集市的ETL数据处理
大数据·数据库·数据仓库·数据挖掘·数据分析·etl·推荐算法