echarts第一次用

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

<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>

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

发布了110 篇原创文章 · 获赞 9 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/Lemontree_fu/article/details/102585289