canvas echarts作图 Day2

今天主要做了一个南丁格尔图，即分离的扇形图；
demo链接：https://github.com/long861/echarts_ml/tree/master/echarts_ml
今日demo位于view/two.ejs中
废话不多说，上demo
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
        <%= title %>
    </title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <script src="/javascripts/jquery.min.js"></script>
    <script src="/javascripts/echarts.js"></script>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        .content {
            width: 60%;
            margin: 50px auto;
            border: solid 1px #a0a0a0;
            border-radius: 5px;
        }

        #main {
            widows: 1000px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div class="content">
        <div id="main"></div>
    </div>
</body>
<script>
    var myEchart = echarts.init(document.getElementById('main'));
    var options = {
        backgroundColor: '#2c343c', //设置此标签的背景颜色
        title: {
            text: '宣传渠道',
            textStyle: { color: '#fff' }
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)" //{a}：系列名。{b}：数据名。{c}：数据值。{d}：百分比。
        },
        legend: {
            x: 'right',//位置
            orient: 'vertical',//data竖直排布
            data: ['视频广告', '联盟广告', '邮件营销', '直接访问', '搜索引擎'],
            textStyle: { color: '#fff' }
        },
        series: {
            name: '宣传渠道',
            type: 'pie',
            radius: '50%', //饼图的半径 //['50%','70%'] 将会形成两个同心圆，数据在外圈同心圆展示
            data: [
                { value: 235, name: '视频广告' },
                { value: 274, name: '联盟广告' },
                { value: 310, name: '邮件营销' },
                { value: 335, name: '直接访问' },
                { value: 400, name: '搜索引擎' }
            ],
            //去除roseType属性即为普通的饼状图
            roseType: 'area',  //是否展示为南丁格尔图，通过半径区分数据大小，可选值：'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
            label: { //饼图图形上的文本标签，可用于说明图形的一些数据信息
                normal: { //可以包含文本的一些设置，如颜色，大小，字体粗细等
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.3)',
                        fontSize: 14, //字体大小 不加计量单位；
                        position: 'inside'//标签的位置。可选值：'inner' 同 'inside'饼图扇区内部。'outside'：默认值，饼图扇区外侧，'center'：在饼图中心位置。
                        
                    }
                },
                formatter: '{b}: {c}'
            },
            labelLine: {//标签的视觉引导线样式在 label 位置 设置为'outside'的时候会显示视觉引导线。
                normal: {
                    smooth: true, //是否平滑视觉引导线，默认不平滑，可以设置成 true 平滑显示，也可以设置为 0 到 1 的值，表示平滑程度。
                    lineStyle: {//引导线样式，颜色(color),宽度(width),线的类型(type)['solid'(实线)(默认)/'dashed'(虚线)/'dotted'(密集虚线)]
                        color: 'rgba(255, 255, 255, 0.3)',
                        type: 'solid'
                    }
                }
            },
            // itemStyle: { //图形样式。
            //     normal: {
            //         color: '#c23531', //颜色
            //         shadowBlur: 200, //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
            //         shadowColor: 'rgba(0, 0, 0, 0.5)', //阴影颜色。
            //         borderColor:'blue' //图形的描边颜色
            //     }
            // }
        }
    }
    myEchart.setOption(options);
</script>

</html>
效果图：
canvas echarts作图 Day2

猜你喜欢
