• liquidFill+pie组合图


    一、图例

    二、学习记录
    1、版本对应:echarts-liquidfill@2对应echarts@4;echarts-liquidfill@3对应echarts@5。
    2、echarts-liquidfill的安装:npm install echarts-liquidFill@2。(echarts用的4的版本)
    3、echarts-liquidfill的引用:require('echarts-liquidFill');
    4、饼图中使用的圆角无效,原因暂不明:itemStyle.borderRadius。(???)

    三、示例

    import * as echarts from 'echarts';
    require('echarts-liquidFill');
    
    
    let ua = function _fun(k) {
        return function (a,b) {
            return  b[k] - a[k];
        }
    }
    let colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'];
    let datum = [
        {value: 600, name: '搜索引擎'},
        {value: 100, name: '直接访问'},
        {value: 250, name: '邮件营销'},
        {value: 150, name: '联盟广告'},
        {value: 200, name: '视频广告'}
    ];
    let llDatum = datum.sort(ua('value'));
    llDatum.forEach((item, index)=>{
        item.value = item.value / 1000;
        item['itemStyle'] = {};
        item['itemStyle']['color'] = colors[index];
    });
    
    let option = {
        grid:{
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            containLabel: true
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['70%', '100%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10, //此处无效???
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: datum.sort(ua('value'))
            },
            {
            type: 'liquidFill',
            shape: 'circle',
            radius: '70%',
            phase: 0,
            period: 'auto',
            color: ['#294D99', '#ff0000', '#1598ED', '#45BDFF'],
            label: {
                position: ['10%', '55%'],
                align: 'left',
                baseline: 'middle',
                formatter: function(params) {
                    console.log('value',params);
                    let str = ''
                    llDatum.forEach((item, index) => {
                        str += item.name + ':' + item.value +'
    ';
                    })
                    return str;
                },
                fontSize: 12,
                color: '#D94854'
            },
            data: llDatum  
        }]
    };
    let myChart = echarts.init(document.getElementById('canvasBox'));
    myChart.setOption(option);
    window.addEventListener("resize", myChart.resize);
    

    四、Liquid Fill Chart API

    data: [], // 数值建议从大到小排序,否则小的会被大的遮挡以致看不到某层;【类型:小数或百分比】
    color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF'],
    center: ['50%', '50%'],
    radius: '50%',
    amplitude: '8%',
    waveLength: '80%',
    phase: 'auto',
    period: 'auto',   //  {number|'auto'|function(value,index)} 定义波浪速度
    direction: 'right', // 定义波浪移动方向
    shape: 'circle',  //`'circle'`, `'rect'`, `'roundRect'`, `'triangle'`, `'diamond'`, `'pin'`, `'arrow'`;
    
    waveAnimation: true,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear',
    animationDuration: 2000,
    animationDurationUpdate: 1000,
    
    outline: {
        show: true,
        borderDistance: 8,
        itemStyle: {
            color: 'none',
            borderColor: '#294D99',
            borderWidth: 8,
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.25)'
        }
    },
    
    backgroundStyle: {
        color: '#E3F7FF'
    },
    
    itemStyle: {
        opacity: 0.95,
        shadowBlur: 50,
        shadowColor: 'rgba(0, 0, 0, 0.4)'
    },
    
    label: {
        show: true,
        color: '#294D99',
        insideColor: '#fff',
        fontSize: 50,
        fontWeight: 'bold',
    
        align: 'center',
        baseline: 'middle',
        position: 'inside'
    },
    
    emphasis: {
        itemStyle: {
            opacity: 0.8
        }
    }
    }
    
  • 相关阅读:
    4.文本编辑器vi的简单实用与指针介绍
    3.理解make命令——编译源文件安装
    2.换一种方式理解linux命令行
    1.linux环境搭建
    Tomcat 何时解压war包
    正则表达式8---再谈小括号
    利用vue-resource模拟百度下拉列表
    那些年iframe的坑(一)
    $nextTick()的理解
    一个超简单的vue商品计算总金额
  • 原文地址:https://www.cnblogs.com/min77/p/15123427.html
Copyright © 2020-2023  润新知