echarts饼图的简单样式简记

最新推荐文章于 2024-09-02 15:14:11 发布

不知名It水手

最新推荐文章于 2024-09-02 15:14:11 发布

阅读量456

点赞数

分类专栏： echarts图表样式文章标签： echarts

本文链接：https://blog.csdn.net/ITyiy/article/details/118250287

版权

echarts图表样式专栏收录该内容

6 篇文章 0 订阅

订阅专栏

echarts饼图样式记录

饼图

//初始化饼图
var mychart

option = {
    legend: {    //图例组件
        orient: 'vertical',  //水平布局
        right: '40',   //距离右边的位置
        top: 'middle',  //距离顶部的样式
        icon:'rect',    //
        itemHeight: 12, // icon高度
        itemGap: 40,  //间距
        textStyle: {      //设置图例的 文字样式
            color: '#fff',
            fontSize:16
        },
        formatter: function (name) {        //通过回调自定义显示的样式
            var index = legendData.indexOf(name);
            var a = name.split(':')[0]
            return a
        }
        //没有formatter时采用默认形式 如下
        //data:['吃饭','睡觉','喝水']
    },
    toolbox: {   //工具栏： 导出图片 数据视图 动态类型切换 数据区域缩放 重置等5个工具
        show: true,
        feature: {
           // mark: { show: true },
           // dataView: { show: true, readOnly: false },
            //restore: { show: true },
         //   saveAsImage: { show: true }    //
        }
    },
    series: [
        {
            name: '面积模式',
            type: 'pie',
            radius: [80, 150],  //第一项是内半径 第二项是外半径 通过这个可以控制饼图大小
            center: ['40%', '50%'],  //位置
            roseType: 'area',   //area  radius
            itemStyle: {
                borderRadius: 5
            },
            data: ['20','40','60'],
            color: ['#E56E6E', '#00C0DD', '#2CBA83', '#FEB763'],
            labelLine: {  //视觉引导线
                normal: {
                    lineStyle: {       //改变标示线的颜色
                        color: '#fff'
                    }
                }
            },
            label: {
                normal: {
                   textStyle: {       //改变标示线的颜色
                        color: '#fff'
                    }
                }
            }
        },
    ]
};
mychart = echarts.init(document.getElementById('pie-data'));
mychart.setOption(option);
}

根据页面大小重布局图表

//重布局大小

        setTimeout(function () {
            window.onresize = function () {
                myChart.resize();
            }
        }, 200)

轮播展示高亮数据

//轮播展示

        var currentIndex = -1;
        if (option.series.length !== 0) {
            timer = setInterval(function () {

                var dataLen = option.series[0].data.length;
                // 取消之前高亮的图形
                myChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0, //表示series中的第几个data数据循环展示
                    dataIndex: currentIndex
                });
                currentIndex = (currentIndex + 1) % dataLen; //+1表示每次跳转一个
                // 高亮当前图形
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                });
                // 显示 tooltip
                myChart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: currentIndex
                })
            }, 2000);
        }