uniapp小程序echarts插件----秋云 ucharts echarts 高性能跨全端图表组件

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

首先下载地址如下秋云 ucharts echarts 高性能跨全端图表组件，如果是用uni_modules的形式引入的话，可以在页面上直接使用，不用再import引入,下面是一个示例，切记此插件和scroll-view不可以同时使用，不然会出现图表随滚动条滚动的情况

<template>
 	<view style="height:300px">
	     <qiun-data-charts style="height:100%" type="column" :loadingType="0" :eopts="columneopts" :opts="options"
	       :chartData=" chartsDataColumn1" :echartsH5="true" :echartsApp="true" @complete="complete" />
    </view>
</template>
<script>
	export default {
    data() {
      return {
        //以下配置是个人配置，详细配置可以去查看官网的
        columneopts: {
          xAxis: {
            axisLabel: {
              color: '#666666'
            }
          },
          seriesTemplate: {
            itemStyle: {
              normal: {
                barBorderRadius: [30, 30, 0, 0]
              },

            },
            barMaxWidth: 20
          },
          grid: {
            left: 10,
            right: 10
          },
        },
        options: {
          yAxis: {
            show: false
          },
          legend: {
            show: false
          },
          radiusAxis: {
            nameTextStyle: {
              barBorderRadius: [20, 20, 0, 0],
            }
          },

          extra: {
            column: {
              "width": 20,
              barBorderRadius: [30, 30, 0, 0]

            },
            bar: {
              linearType: 'custom',
              barBorderCircle: true
            }
          },
          seriesTemplate: {
            itemStyle: {
              normal: {
                barBorderRadius: "[30, 30, 0, 0]"
              }
            }
          }
        },
        chartsDataColumn1: {},
   	 }   
   },
   onLoad() {
      this.getEcharts()
   },
   methods:{
   complete(e) {
        console.log("渲染完成事件", e);
      },
	 // 获取echarts数据
      getEcharts() {
        this.chartsDataColumn1.series = [];//如果数据要切换更新，这里必须置空
     
            this.chartsDataColumn1 = {
              categories: ["专属粉丝", "普通粉丝", "潜在粉丝"],
              series: [{
                name: "粉丝数量",
                data: [34, 12, 1],
                color: '#FF7979',
                style: "curve"
              }],
            }
      }
  },
}
</script>