问题描述
我正在使用VueJS和Vue Echarts库来创建数据可视化。
这是Vue Echarts的Polar图的演示:
官方网站:https://ecomfe.github.io/vue-echarts/demo/ GitHub页面:https://github.com/ecomfe/vue-echarts
<template>
<v-chart :options="polar"/>
</template>
<style>
/**
* The default size is 600px×400px,for responsive charts
* you may need to set percentage values as follows (also
* don't forget to provide a size for the container).
*/
.echarts {
width: 100%;
height: 100%;
}
</style>
<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'
export default {
components: {
'v-chart': ECharts
},data () {
let data = []
for (let i = 0; i <= 360; i++) {
let t = i / 180 * Math.PI
let r = Math.sin(2 * t) * Math.cos(2 * t)
data.push([r,i])
}
return {
polar: {
title: {
text: '极坐标双数值轴'
},legend: {
data: ['line']
},polar: {
center: ['50%','54%']
},tooltip: {
trigger: 'axis',axisPointer: {
type: 'cross'
}
},angleAxis: {
type: 'value',startAngle: 0
},radiusAxis: {
min: 0
},series: [
{
coordinateSystem: 'polar',name: 'line',type: 'line',showSymbol: false,data: data
}
],animationDuration: 2000
}
}
}
}
</script>
我想创建饼图而不是极地图。我检查了几个网站,但没有找到结果。
我需要的是: this pie chart
解决方法
签出https://github.com/ecomfe/vue-echarts/blob/master/src/demo/Demo.vue
您需要导入Pie lib,如下所示:
导入'echarts / lib / chart / pie'
位于https://codesandbox.io/s/vue-echarts-pie-xu9wl?file=/src/components/Pie.vue
的代码沙箱示例