第一步，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>
</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": "完成量",
"color": "#FFFFFF"
"name": "成交量A",
"data": [3521, 811, 2511, 343, 432, 2012],
]
methods: {
</script>
<style>
.content {
display: flex;
flex-direction: column;
flex: 1;
.charts-box {
width: 100%;
height: 300px;
</style>