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目录如下:
uni-ec-canvs目录如下

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐