网站设计 推广百度搜索引擎原理
项目场景：
提示：这里简述项目相关背景：
1：插件市场查找
在微信小程序的项目中，有时候需要一些图形图标，这样看着更直观一些，在hbuildx中的插件市场中可以看到使用最多的是秋云 ucharts echarts 高性能跨全端图表组件
2：选择兼容性的版本下载
点击进入这个插件后下载最新那个（需要看广告或者打赏才可以-我选的是看广告）
3：下载插件
然后弹窗提示，可以选择下载插件并导入hbuildx
4：根据浏览器提示打开hbuildx导入
然后浏览器回有新弹窗提示
5：成功导入
选择打开hbulidx，导入到使用的那个项目
成功导入
插件描述
提示：这里描述:
1：插件的示例
插件的示例地址是 uCharts官网 - 秋云uCharts跨平台图表库 示例下面可以查看代码
2：配置文档
案例：
提示：这里是案例：
1：组件（含模拟数据）
<template><view class="charts-box"><qiun-data-charts type="line":opts="opts":chartData="chartData"/></view>
</template><script>
export default {data() {return {chartData: {},//您可以通过修改 config-ucharts.js文件中下标为 ['line']的节点来配置全局默认参数，//如都是默认参数，此处可以不传 opts 。实际应用过程中 opts //只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，//达到页面简洁的需求。opts: {color:["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],fontColor:"#fff",//图表字体颜色--不包含x轴padding: [15,10,0,15],enableScroll: false,//legend: {show: true,//显示//图例相对画布的显示位置，可选值'bottom''top''left''right'position:"top",//图例位置对齐方向，可选值：'center''left''right''top''bottom'float: "left",lineHeight:20,//行高margin:10,padding:10,},xAxis: {disableGrid: true,fontColor:"#fff",//x轴字体颜色},yAxis: {gridType: "dash",dashLength: 2},extra: {line: {type: "curve",width: 2,activeType: "hollow"}}}};},onReady() {this.getServerData();},methods: {getServerData() {//模拟从服务器获取数据时的延时setTimeout(() => {//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接let res = {categories: ["2018","2019","2020","2021","2022","2023"],series: [{name: "成交量A",// lineType: "dash",data: [35,8,25,37,4,20]},{name: "成交量B",data: [70,40,65,100,44,68]},{name: "成交量C",data: [100,80,95,150,112,132]},{name: "成交量D",data: [90,89,75,140,112,90]},{name: "成交量E",data: [87,30,65,160,112,111]},]};this.chartData = JSON.parse(JSON.stringify(res));}, 500);},}
};
</script><style scoped>/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */.charts-box {width: 100%;height: 600rpx;}
</style>2：使用
<view class=""><ChartLine></ChartLine>
</view>import ChartLine from '@/components/chartLine/index.vue'components: {ChartLine,
},
3：效果
