我想用Highcharts制作一个圆环图,但是我在将这个图表转换成堆叠形式时遇到了麻烦。Vue.js代码如下:
<template>
<div>
<b-col md="12" style="margin-top: 40px">
<highcharts :options="pieChartOptions"></highcharts>
</b-col>
</div>
</template>
<script>
import axios from 'axios'
import {mapActions} from "vuex";
import Highcharts from "highcharts";
import {Chart} from 'highcharts-vue'
import DashboardTable from "../../components/DashboardTable/DashboardTable";
import Widget from '@/components/Widget/Widget';
export default {
name:"TestChart",
components: {
DashboardTable, Widget,
highcharts: Chart
},
data(){
return{
pieChartOptions:{
colors: ['#01BAF2', '#71BF45', '#FAA74B', '#B37CD2'],
chart: {
type: 'pie'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
title: {
text: 'Coffee'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.0f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {y} %'
},
showInLegend: true
}
},
series: [{
name: 'Types',
colorByPoint: true,
innerSize: '75%',
data: [{
name: 'Filtre',
y: 68.1,
}, {
name: 'Türk',
y: 11.0
}, {
name: 'Latte',
y: 11.2
}, {
name: 'Espresso',
y: 9.7
}]
}]
}
}
},
}
</script>
<style>
</style>
数据图表数据类型:
多层甜甜圈图的ElasticSearch,请点击这里.
尝试在“name”和“y”后添加发音,但没有成功。另外,我需要在挂载(或任何方法)中添加子类别吗?如果你对此有任何想法,我期待你的帮助。
1条答案
按热度按时间vptzau2j1#
要 在 Highcharts 中 创建 这样 的 图表 , 可以 使用 sunburst 系列 类型 :
中 的 每 一 个
或 具有 指定
size
和innerSize
的 两 个 饼 图 系列 :格式