uniapp 搭配 uCharts

在插件市场导入插件到项目中

<view class="charts-box-main">
      <qiun-data-charts 
            type="area"
            :opts="opts"
           :chartData="chartData" />

</view>

data（）{

   chartData: {},

    opts: {
                    color: ["#ED3F36","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
                    padding: [15,15,0,15],
                    enableScroll: false,
                    legend: {
                         show: false,    // 开启图例
                    },
                    xAxis: {
                        disableGrid: true
                    },
                    yAxis: {
                        gridType: "dash",
                        dashLength: 2
                    },
                    extra: {
                        area: {
                            type: "curve",
                            opacity: 0.2,
                            addLine: true,
                            width: 2,
                            gradient: true,
                            activeType: "hollow"
                        }
                    }
                }

}

 onReady() {
      this.getServerData();
 },

methods: {
     getServerData() {
     //模拟从服务器获取数据时的延时
     setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
             let res = {
                  categories: ["2018","2019","2020","2021","2022","2023", "2024"],
                  series: [
                                {
                                    name: "测试图例",
                                    data: [35,8,25,37,4,20, 15]
                                },
                            ]
                        };
                    this.chartData = JSON.parse(JSON.stringify(res));
                }, 500);
            },
        }
    }