|
发表于 2022-4-8 14:02:05
|
显示全部楼层
图表绘制
- <template>
- <div
- ref="id"
- :id="id"
- :style="wh"
- />
- </template>
- <script>
- export default {
- props: {
- data: Array,
- id: String,
- },
- data() {
- return {
- myChart: null,
- wh: {
- width: '100%',
- height: '300px',
- },
- };
- },
- watch: {
- data(val) {
- if (val) {
- this.data = val;
- this.initCarts();
- }
- },
- },
- methods: {
- initCarts() {
- const echarts = require('echarts');
- // 基于准备好的dom,初始化echarts实例
- this.myChart = echarts.init(document.getElementById(this.id), 'macarons');
- // 绘制图表
- this.myChart.setOption({
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b}: {c} ({d}%)',
- },
- grid: {
- top: '0',
- left: '0',
- containLabel: true,
- },
- legend: {
- bottom: 'bottom',
- },
- series: [
- {
- name: '数量',
- type: 'pie',
- radius: ['15%', '50%'],
- avoidLabelOverlap: false,
- center: ['50%', '35%'],
- label: {
- normal: {
- show: false,
- formatter: '{b}:{d}% ',
- },
- emphasis: {
- show: false,
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)',
- },
- },
- labelLine: {
- normal: {
- show: false,
- },
- },
- data: this.data,
- itemStyle: {
- normal: {
- // eslint-disable-next-line
- color: function (params) {
- const colorList = [
- '#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80',
- '#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
- '#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
- '#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089',
- ];
- return colorList[params.dataIndex];
- },
- },
- },
- },
- ],
- });
- },
- },
- };
- </script>
- <style scoped>
- </style>
复制代码
|
|