echarts第一次用

￡神魔★判官ぃ 2023-06-08 04:47 5阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70][]

上图为公司要求做的效果，做一个饼状图。这里记录一下第一次用的代码

<template>
      <div id="echart_two"></div>
    </template>
    
    <script>
     var echarts = require('echarts');
     export default {
        mounted(){
           var myChart_two = echarts.init(document.getElementById('echart_two'));
           myChart_two.setOption({
                tooltip: {
                    trigger: 'item',//触发类型:item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
                    formatter: "{a} <br/>{b}: {c} ({d}%)"//提示框浮层内容格式器,这里为字符串模板格式
                },
                legend: {
                    orient: 'vertical',//图例列表的布局朝向
                    x: 'left',
                    data:['访客','员工'],
                    textStyle: {
                        color: 'white'
                    }
                },
                color:['#8fbaeb', 'yellow'],//这里可以设置图标的颜色
                series: [
                    {
                        name:'签到人数',
                        type:'pie',//这里为图标的类型
                        radius: ['60%', '80%'],//饼图的半径,数组的第一项是内半径，第二项是外半径
                        avoidLabelOverlap: false,//是否启用防止标签重叠策略，默认开启
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: { //高亮的扇区和标签样式
                                show: true,
                                textStyle: {
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: true
                            }
                        },
                        data:[
                            {value:400, name:'访客'},
                            {value:200, name:'员工'}
                        ]
                    }
                ]
            });
        }
     }
    </script>

基本上第一次用到的就这些，先记录这些~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]: /images/20230531/ec33129e8ad2416e8abf3edea6ae4aaf.png