Open JakeRed opened 5 years ago
weex-chart之前已经集成了,但是采用g2的语法写不出完整饼图,代码:
<template> <div class="fill"> <common_title title="" class="fill horizontal"></common_title> <div> <chart ref="c1" width="416" height="218" style="width:416px;height:218px;"></chart> </div> </div> </template> <script> import {api, toast, util, app, dialog, user} from '../util/module.js'; let GM = require('../components/chart')('g2'); const globalEvent = weex.requireModule('globalEvent'); const navigator = weex.requireModule('navigator'); export default { components: { common_title: require('../components/common_title.vue'), chart: require('../components/chart.vue') }, data() { return { screenHeight: 750 / weex.config.env.deviceWidth * weex.config.env.deviceHeight - 42, data: [ {a: '1', b: 0.3, c: '1'}, {a: '1', b: 0.3, c: '2'}, {a: '1', b: 0.4, c: '3'} ], chart: null } }, created() { globalEvent.addEventListener("back_pressed", () => { navigator.pop({animated: true}, null); }); }, mounted() { this.tempUI(); }, methods: { tempUI: function () { GM.Global.pixelRatio = 2; this.chart = new GM.Chart({ id: 'c1' },this.$refs.c1.$refs.wxc_gcanvas.ref, this.$refs.c1); this.chart.source(this.data); this.chart.coord('polar', { transposed: true, inner: 0.6 }); this.chart.axis(false); this.chart.intervalStack().position('a*b').color('c'); this.chart.render(); } } } </script> <style scoped> .fill { width: 750px; } .chart { width: 750px; height: 600px; background-color: #ff7901; } .vertical { flex-direction: column; } .horizontal { flex-direction: row; } </style>
显示1/4圆环在div右下角
weex-chart之前已经集成了,但是采用g2的语法写不出完整饼图,代码: