lcoco/pages/wallet/model/column-echarts.vue

<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="column"
      :opts="opts"
	  :ontouch="true"
      :chartData="chartData"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {},
      opts: {
        color: ["#FE6915",],
        padding: [15,15,0,5],
        enableScroll: true,
        legend: {
			show:false,
		},
        xAxis: {
		  axisLine:false,
          disableGrid: true,
		  itemCount:5,
		  fontColor:'#999',
		  scrollShow:true,
        },
        yAxis: {
          data: [
            {
              min: 0,
			  fontColor:'#999',
			  disabled:true,
            }
          ]
        },
        extra: {
          column: {
            type: "group",
            width: 8,
            activeBgColor: "#333",
            activeBgOpacity: 0.08
          },
		  tooltip:{
			legendShow:false,
			bgColor:'#333',
			borderRadius:4,
			bgOpacity:1,
		  },
        }
      }
    };
  },
  mounted() {
    // this.getServerData();
  },
  methods: {
    getServerData() {
      let res = {
          categories: ["08:10","12:11","12:12","12:16","19:11","22:11","22:12","22:13"],
          series: [
            {
              name: "收益",
              data: [35,36,31,33,13,34,1,6,]
            },
          ]
        };
      this.chartData = JSON.parse(JSON.stringify(res));
    },
  }
};
</script>

<style scoped>
  .charts-box {
    width: 100%;
    height: 100%;
  }
</style>