vue3+Highcharts实现柱状图

最新推荐文章于 2024-06-26 09:45:57 发布

00秃头小宝贝

最新推荐文章于 2024-06-26 09:45:57 发布

阅读量858

点赞数 8

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_72929120/article/details/135136144

版权

1.效果图

2.准备工作

npm install --save highcharts

//main.js
// 引入charts
import Highcharts from 'highcharts';
// 使用3d图还需要引入下面的
import Highcharts3d from 'highcharts/highcharts-3d';
// 调用3d图表
Highcharts3d(Highcharts);


//页面还需引入
import Highcharts from 'highcharts';

3.html

父组件

import threeDPie from '@/components/threeDPie.vue' 
import threeDTwoPie from '@/components/threeDTwoPie.vue' 



<div class="pie-chart">
                                <threeDPie></threeDPie>
                                <threeDTwoPie></threeDTwoPie>
</div>

子组件


<template>
    <div>
        <div id="pie"
             style="height:120px;width:120px;"></div>
    </div>
</template>

<script setup>
import Highcharts from 'highcharts';
 import {onMounted,defineProps} from 'vue';
var init = () =>{
    Highcharts.chart('pie', {
        accessibility: {
        enabled: false
    },
    chart: {
        type: 'pie',
        options3d: {
            enabled: true,
            alpha: 50
        },
        margin: [0, 0, 0, 0],
        //将白色背景颜色设置成透明
        backgroundColor: 'rgba(0,0,0,0)'
    },
    plotOptions: {
        pie: {
            innerSize: 60,
            depth: 20, //鼠标厚度
            dataLabels: {
            enabled: false, //是否显示饼图的线形tip
          
            align: "center",
          // position:'center',
        }, 
        }
    },
    // 去掉默认标题
    title: {
          text: ''
        },
        //去掉右下角网址链接,禁用版本信息
     credits: {
          
          enabled: false,
        },

    series: [{
        name: 'Medals',
        data: [
            ['Norway', 16],
            ['Germany', 12],
            ['USA', 8],
            ['Sweden', 8],
            ['Netherlands', 8],
            ['ROC', 6],
            ['Austria', 7],
            ['Canada', 4],
            ['Japan', 3]

        ]
    }]
});

}
onMounted(()=>{
    init();
})
</script>
<style scoped>
</style>


<template>
    <div>
        <div id="pie1"
             style="height:120px;width:120px;"></div>
    </div>
</template>

<script setup>
import Highcharts from 'highcharts';
import {onMounted,defineProps} from 'vue';
var init = () =>{
    Highcharts.chart('pie1', {
        accessibility: {
        enabled: false
    },
    chart: {
        type: 'pie',
        options3d: {
            enabled: true,
            alpha: 50
        },
        margin: [0, 0, 0, 0],
        //将白色背景颜色设置成透明
        backgroundColor: 'rgba(0,0,0,0)'
    },
    plotOptions: {
        pie: {
            innerSize: 60,
            depth: 20, //鼠标厚度
            dataLabels: {
            enabled: false, //是否显示饼图的线形tip
            align: "center",
          // position:'center',
        }, 
        }
    },
    // 去掉默认标题
    title: {
          text: ''
        },
        //去掉右下角网址链接,禁用版本信息
     credits: {
          
          enabled: false,
        },

    series: [{
        name: 'Medals',
        data: [
            ['Norway', 16],
            ['Germany', 12],
            ['USA', 8],
            ['Sweden', 8],
            ['Netherlands', 8],
            ['ROC', 6],
            ['Austria', 7],
            ['Canada', 4],
            ['Japan', 3]

        ]
    }]
});

}
onMounted(()=>{
    init();
})
</script>
<style scoped>
</style>