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

news2024/11/17 20:45:51

科普：

秋云图表库，包含二种配置属性对应二种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>