uniapp 秋云

uniapp 使用秋云uCharts图表组件、echarts图表组件

一、uniapp 使用秋云uCharts图表组件

1、我们的项目是依赖uniapp的vue-cli项目

操作：将uni_modules目录复制到src目录，即src/uni_modules。

2、页面中直接调用即可，无需在页面中注册组件qiun-data-charts。注意：父元素class='charts-box’这个样式需要有宽高。

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

3、图标数据格式，官方文档：秋云uCharts图表组件

chartData:{
  categories:['2016','2017','2018','2019','2020','2021'],
  series:[
    {
      name:'目标值',
      data:[35, 36, 31, 33, 13, 34]
    },
    {
      name:'完成量',
      data:[18, 27, 21, 24, 6, 28]
    }
  ]
}

提示：可以通过在线生成工具（秋云uCharts图表组件），粘贴到uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js中，形成各个图表类型的默认配置，相同的图表类型不同的配置，可通过组件上:opts传递不同属性即可覆盖默认配置。

二、uniapp 使用echarts图表插组件

1、微信小程序端

适用uni-app 微信小程序端的echarts图表组件下载：

1）下载上面的echarts组件，并置于项目的src/components目录下，即src/components/uni-ec-canvas。

2）在需要使用的页面引入并使用，图表配置看官方文档：Documentation - Apache ECharts

示例：

<view style="height: 600rpx;margin-top: 30rpx;" v-if="canInit">
  <uni-ec-canvas :onInit="initChart" />
</view>

<script>
import UniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from '@/components/uni-ec-canvas/echarts.js'
 
export default {
  components: {
	UniEcCanvas
  },
  data() {
    return {
      // 图表数据，请求服务器获取，配置图表时使用
      chartData: {
        categories: [],
        series: []
      },
      // 控制图表渲染时机，解决异步请求数据再渲染图表出现的问题
      canInit: false
    }
  },
  methods: {
    // 在此处配置图表
    initChart (canvas, width, height, dpr) {
	  const chart = echarts.init(canvas, null, {
	    width: width,
		height: height,
		devicePixelRatio: dpr // new
	  });
	  canvas.setChart(chart);
      console.log(123,this.chartData)
	  var option = {
        tooltip: {
          trigger: 'axis',
          // 是否将 tooltip 框限制在图表的区域内
          confine: true
        },
        xAxis: {
          type: 'category',
          nameLocation: 'middle',
		  axisTick: {
		    alignWithLabel: true
		  },
          // data: ["A线温", "B线温", "C线温", "D线温", "漏电流"]
          data: this.chartData.categories
        },
        yAxis: {
          type: 'value'
        },
        legend: {
            // data: ["A线温", "B线温", "C线温", "D线温", "漏电流"]
        },
        series: this.chartData.series
      };
	  chart.setOption(option);
	  return chart;
	}
  }
}
 
</script>

3）微信小程序端的页面效果：

需要注意的点：前端需要请求服务器拿到数据再渲染图表，所以可能会出现渲染时机的问题。

我的解决办法是在包裹图表组件的外层view加上v-if=“canInit”，当请求数据成功后，使canInit=true，渲染图表。

2、App端和H5端（echarts版本为 V5）

适用uni-app App端和H5端的echarts图表组件下载：

1）下载上面的echarts组件，并置于项目的src/components目录下，即src/components/Echarts。

2）在需要使用的页面引入并使用，图表配置看官方文档：Documentation - Apache ECharts

示例：

<view class="title-box">
  <view class="title">电费占比</view>
</view>
<view class="echarts-box">
  <Echarts :option="option" style="width: 750rpx; height: 600rpx;"></Echarts>
</view>

<script>
import Echarts from '@/components/Echarts/index.vue'
 
export default {
  components: {
	Echarts
  },
  data() {
    return {
      // 配置图表
      option: {}
    }
  },
  onLoad() {
    this.initChart()
  },
  methods: {
    initChart() {
        this.option = {
        // 自定义变量：true代表不合并数据，比如从折线图变为柱形图则需设置为true；false或不写代表合并
        notMerge: true,
        title: {
          subtext: '单位：元',
          right: '2%'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          bottom: 10,
          left: 'center',
          itemHeight:12,
          itemWidth:12,
          itemGap:16,
          icon:'circle',
          textStyle:{
            color:'rgba(0,0,0,0.9)'
          }
        },
        graphic: [{ // 环形图中间添加文字
          type: 'text', // 通过不同top值可以设置上下显示
          left: 'center',
          top: '47%',
          style: {
              text: '395.71',
              textAlign: 'center',
              fill: '#0098FF', // 文字的颜色
              fontSize: 30
          }
        }],
        color: ['#1AB3FF','#20CC5C','#FF661A','#C40000','#FF6600','#70B603','#0099FF','#FFCC33'],
        series: [
          {
            name: '电费占比',
            type: 'pie',
            // radius: '50%',
            // radius: ['35%', '60%'],
            radius: ['45%', '65%'],
            data: [
              { value: 200.3, name: '尖期电费' },
              { value: 188.2, name: '峰期电费' },
              { value: 201.25, name: '平期电费' },
              { value: 102.5, name: '谷期电费' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              formatter: '{c}  {d}%',
              overflow: 'break',
              color:'rgba(0,0,0,0.9)'
            }
          }
        ]
      }
    }
  }
}
 
</script>

3）效果预览