本文主要是介绍在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",},},},}],### 最后编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。这篇关于在uniapp+vue cli中使用lime-echart图表，关于使用异步数据_lime-echartuniapp的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
