uniapp-微信小程序-echarts用法

uniapp微信小程序中使用echarts详解

最新推荐文章于 2024-10-18 11:19:22 发布

原创最新推荐文章于 2024-10-18 11:19:22 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #小程序

本文介绍如何在uniapp的微信小程序中使用echarts，包括如何控制echarts文件体积，引用特定js文件，以及如何查看和定制echarts选项。提供了官方文档链接和示例代码。

uniapp-微信小程序-echarts用法。
目前在uni-ec-canvas文件夹内的echarts_all 是所有echarts的js。而echarts.js 只包含了饼图的构建，是为了控制文件的体积大小
若进行js的切换，一定要命名为echarts.js 。官网文档地址为： https://gitee.com/sc0314/xcx_echarts#%E4%BD%BF%E7%94%A8
而ec.options的文档请参考echarts的文档。官网地址为： https://echarts.apache.org/examples/zh/index.html
控制版本大小的构建请移步于 https://echarts.apache.org/examples/zh/index.html 步骤为：官网-下载-下载-在线定制
代码：

<template>
  <view v-if="ec.option">
    <uni-ec-canvas
      class="uni-ec-canvas"
      id="line-chart"
      canvas-id="multi-charts-line"
      :ec="ec"
    ></uni-ec-canvas>
  </view>
</template>
<script>
// 目前在uni-ec-canvas文件夹内的echarts_all 是所有echarts的js。而echarts.js 只包含了饼图的构建，是为了控制文件的体积大小
//若进行js的切换，一定要 命名为echarts.js 。 官网文档地址为： https://gitee.com/sc0314/xcx_echarts#%E4%BD%BF%E7%94%A8
//而ec.options的文档请参考echarts的文档。官网地址为： https://echarts.apache.org/examples/zh/index.html
//控制版本大小的构建请移步于 https://echarts.apache.org/examples/zh/index.html  步骤为：官网-下载-下载-在线定制
import uniEcCanvas from "../uni-ec-canvas/uni-ec-canvas.vue";
export default {
  data() {
    return {
      ec: {},
    };
  },
  components: { uniEcCanvas },
  onLoad() {
    this.getdata();
  },
  methods: {
    getdata(res) {
      let option = {
        title: {
          text: "我的统计",
          subtext: "通过率统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "我的数据",
            type: "pie",
            radius: "50%",
            data: [
              { value: 0, name: "通过概率" },
              { value: 0, name: "其他" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      option.series[0].data[0].value = +res.data.rate.slice(
        0,
        res.data.rate.length - 1
      );
      option.series[0].data[1].value =
        100 - res.data.rate.slice(0, res.data.rate.length - 1);
      this.ec.option = option;
    },
  },
};
</script>

下载好的uni-ec-canvs目录如下：