第一步，HBuilder导入其示例。运行打卡。
第二步，pages文件夹下新建一个test文件夹，test文件夹下新建一个testOne.vue文件。
第三步，pages.json中pages数组里这个页面放最前面。
{
"path": "pages/test/testOne",
"style": {
"navigationBarTitleText": "秋云高性能跨全端图表组件test"
}
},
第四步，把我这个代码拷贝进去。就知道怎么配置啦~。
科普：秋云包含二种配置属性对应二种js配置文件。一种是echarts.js,一种是ucharts。二者的配置属性不一样！
1，如果是echarts.则在标签中加入此属性。
。
然后在epots对象中可加入对图表的x轴，y轴,legend等等内容的配置。以下是对x轴的标签进行旋转的属性配置。啊，真是挺麻烦的嵌套呢（*゜ー゜*）
2， 如果是uChart.js 那就。将前面的epots改成opts即可。wow~ ⊙o⊙ 这么简单？那不可能啊。
参考文档（真实版）：https://demo.ucharts.cn/#/ eCharts类型的话可以直接看echarts的配置文档。此文档中有uCharts的配置项~需要的可看。
需要内拖动的可使用uCharts。还有其他的~我也要慢慢研究。
<template>
<view class="content">
<qiun-title-bar title="柱状图+动态更新数据x1" />
<view class="charts-box">
<qiun-data-charts type="column" :chartData="chartsDataColumn1" :echartsH5="true" :echartsApp="true"
:eopts="eopts" />
</view>
</view>
</template>
<script>
export default {
data() {
return {
eopts: {
"xAxis": {
"axisLabel": {
"color": '#666666',
"rotate": 60
},
},
},
chartsDataColumn1: {
"categories": ["2016", "2017", "2018", "2019", "2020",
"2021"
],
enableScroll: true, //开启图表拖拽功能
"series": [{
"name": "目标值",
"data": [3115, 3116, 3212, 3322, 1223, 3223],
"stack": "one",
"barWidth": "40%",
"label": {
"position": "inside",
"color": "#FFFFFF",
"textStyle": {
"color": "#FF5566",
"font-size": 8,
"overflow": "truncate"
}
},
},
{
"name": "完成量",
"data": [3115, 3116, 3212, 3322, 1223, 3223],
"stack": "one",
"barWidth": "40%",
"label": {
"position": "inside",
"color": "#FFFFFF"
}
},
{
"name": "成交量A",
"data": [3521, 811, 2511, 343, 432, 2012],
"barWidth": "40%",
},
]
}
}
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
flex: 1;
}
.charts-box {
width: 100%;
height: 300px;
}
</style>