在uniapp中使用qiun-data-charts组件

在uniapp中使用qiun-data-charts组件

官网地址

使用步骤

1.引入插件：先在插件市场使用插件导入到项目里 秋云uCharts图表组件

2.点击使用HbuilderX导入插件，选择项目导入该插件 确定

3.页面中直接使用，无需引入。

<!-- 折线图 -->
      <view id="box">
      //qiun-data-charts就是你下载的那个组件,放在项目里使用:opts里的内容是我用来控制图表展示数据的，
      //这里默认有滚动条，不用可以删除掉enableScroll: true
        <qiun-data-charts
          type="demotype"//代表折线统计图
          :chartData="chartsDataLine4"//数据
          background="none"
          :ontouch="true"
          canvasId="scrolllineid"
          :canvas2d="false"
          id="charts"
          :opts="{ enableScroll: true, xAxis: { scrollShow: true, itemCount: 5, disableGrid: true } }"
        />
      </view>

4.在return里定义

export default {
  data(){
   return{
     chartsDataLine4: {
        categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
        series: [
          {
            name: '成交量A',
            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],
          },
        ],
      },
  }
 }
}

5.样式 （折线图的宽高必须设置 要不然不显示）

#box {
  width: 100%;
  height: 460rpx;
}
#charts {
  width: 100%;
  height: 100%;
}

效果图