在uniapp+vue cli中使用lime-echart图表，关于使用异步数据_lime-echartuniapp

import {TitleComponent,TooltipComponent,GridComponent, DatasetComponent, TransformComponent, LegendComponent } from ‘echarts/components’;
// 标签自动布局，全局过渡动画等特性
import {LabelLayout,UniversalTransition} from ‘echarts/features’;
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 是必须的一步
import {CanvasRenderer} from ‘echarts/renderers’;

// 按需引入 注册必须的组件
echarts.use([
LegendComponent,
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LineChart,
BarChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
]);

        引入lime-echart组件


        将l-chart组件添加到components文件夹中，在项目页面中添加组件。

3.示例

html

<template>
    <view>
        <l-echart ref="chartRef"></l-echart>
    </view>
</template>

script

import {ref} from 'vue';
import { onLoad} from "@dcloudio/uni-app";
import LEchart from "@/components/l-echart/l-echart.vue";
import * as echarts from "echarts";

const chartRef=ref(null)

onLoad(()=>{
    getDataList().then(()=>{
        initChart(data)
    })
})

//向后台获取数据
function getDataList(){
    return new Promise((resolve,reject)=>{
        //TODO
        //你的请求
    })
}

//初始化图表
function initChart(data){
     if (data.length == 0) return;
  chartRef.value.init(echarts, chart => {
    chart.setOption(getOption(data));
  });
}

// 获取图表选项设置
function getOption(){
      var option = {
        color: ["#F19C91", "#F3D48C", "#F4DFAD"],
        series: [
      {
        name: "form",
        type: "pie",
        minAngle: 30,
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 2,
          borderRadius: 5,
        },
        radius: [30, 60],
        data: data,
        label: {
          position: "inner",
          formatter: function (v) {
            // console.log(v);
            return `{value|${v.percent.toFixed(0)}%}`;
          },
          minMargin: 5,
          edgeDistance: 0,
          lineHeight: 15,
          rich: {
            value: {
              fontFamily: "SourceHanSansCN Bold",
              fontSize: 10,
              color: "#fff",
            },
          },
        },
      }
    ],


### 最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。



![名不虚传！字节技术官甩出的"保姆级"数据结构与算法笔记太香了](https://img-blog.csdnimg.cn/img_convert/a3e940acdcd55765852a8bfe54482664.png)