详解echartssvg

echartssvg是一种基于JavaScript的开源可视化图表库，它提供了非常丰富的功能，支持折线图、柱状图、饼图等多种类型的图表，同时在数据可视化方面也提供了很多特性，例如动态交互效果和丰富的数据过滤功能。这篇文章将从多个方面对echartssvg做详细的阐述，帮助读者更好地理解和使用echartssvg。

一、基础图表绘制

1、echartssvg使用基于DOM的绘图，所有的图表都是在页面上通过SVG元素生成的，所以当需要绘制某个特定类型的图表时，首先需要引入对应的脚本文件。

<script src="echarts.min.js"></script>

2、初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

其中，main为HTML代码中指定的容器，后续绘制的图表都会在该容器内生成。

3、配置绘图信息：在echartssvg中，图表的样式和数据都通过配置项来设置，通过将配置项作为参数传入echarts实例的setOption函数中就可以显示相应的图表类型。例如，要绘制一个柱状图，可以使用如下代码设置相应的配置项：

var option = {
    title: {
        text: '某地区蒸发量和降水量'
    },
    tooltip: {},
    legend: {
        data:['蒸发量','降水量']
    },
    xAxis: {
        data: ["一月","二月","三月","四月","五月","六月"]
    },
    yAxis: {},
    series: [{
        name: '蒸发量',
        type: 'bar',
        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7]
    }, {
        name: '降水量',
        type: 'bar',
        data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7]
    }]
};

myChart.setOption(option);

以上代码将绘制一个带有标题、提示信息和数据标签的柱状图，并按照指定的x轴和y轴数据进行展示。

二、数据的形式与呈现

1、对于图表的数据形式，echartssvg提供了非常灵活的支持。

其支持的数据形式包括JSON和数组两种，具体的格式可以去echarts官网查看。例如，在柱状图中，数据可以按照下面的格式进行存储：

var data = [
    {value:335, name:'直接访问'},
    {value:310, name:'邮件营销'},
    {value:234, name:'联盟广告'},
    {value:135, name:'视频广告'},
    {value:1548, name:'搜索引擎'}
];

2、对于数据的呈现方式，echartssvg则提供了很多灵活的方案。例如，在饼图中，可以通过设置某个数据项的饼图半径来使其在样式上突出显示。下面的代码片段展示了如何使用这个特性实现数据的可视化：

var option = {
    title : {
        text: '南丁格尔玫瑰图',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} 
{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'bottom',
        data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true, 
                type: ['pie', 'funnel'],
                option: {
                    funnel: {
                        x: '25%',
                        width: '50%',
                        funnelAlign: 'center',
                        max: 1548
                    }
                }
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    series : [
        {
            name:'半径模式',
            type:'pie',
            radius : [20, 110],
            center : ['25%', 200],
            roseType : 'radius',
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            lableLine: {
                normal:{
                    show:false
                },
                emphasis: {
                    show:true
                }
            },
            data:[
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
                {value:20, name:'rose5'},
                {value:35, name:'rose6'},
                {value:30, name:'rose7'},
                {value:40, name:'rose8'}
            ]
        }
    ]
};
                    
myChart.setOption(option);

以上代码会绘制一个具有特殊点阵效果的玫瑰图，其中不同的数据序列通过不同的半径表示，展示了一种全新的数据视图。

三、功能扩展和插件使用

1、自定义图表——echartssvg支持对图表进行自定义设计，从而可以实现更加个性化的数据图像呈现。例如，可以使用以下代码定义一个新的饼状图，并将之用于指定数据的可视化展示：

echarts.extendChartView({
    type: 'customPie',
    init: function () {
        this._layers = [];
    },
    render: function (seriesModel, ecModel, api) {
        var data = seriesModel.getData();
        var angle = 0;
        var start = 0;
        var cx = seriesModel.get('center')[0];
        var cy = seriesModel.get('center')[1];
        var radius = seriesModel.get('radius');
        var width = radius.length > 1 ? radius[1] - radius[0] : 0;
        var height = radius.length > 1 ? radius[1] - radius[0] : 0;
        while (start < data.size()) {
            var end = start + 1;
            var color = data.getItemModel(end).get('color');
            var items = [];
            while (end < data.size() && data.getItemModel(end).get('color') === color) {
                items.push(this.getItem(area));
                end++;
            }
            var sliceLayer = this.getLayer({
                scissor: [seriesModel.get('clockwise'), angle],
                zlevel: seriesModel.get('zlevel'),
                z: seriesModel.get('z'),
                style: {
                    fill: color,
                    lineWidth: 1,
                    stroke: seriesModel.get('borderColor')
                },
                position: [cx, cy],
                scale: [width, height],
                rotation: angle
            });
            items.forEach(function (item) {
                sliceLayer.add(item);
            });
            angle += Math.PI * 2 * (end - start) / data.size();
            start = end;
        }
        var topLayer = this.getLayer({
            scissor: seriesModel.get('clockwise') ? [-1, 1] : [1, -1]
        });
        if (seriesModel.get('itemStyle.normal.borderWidth') > 0) {
            topLayer.shapeList.push(new RegularShape({
                zlevel: seriesModel.get('zlevel'),
                z: seriesModel.get('z'),
                style: {
                    stroke: seriesModel.get('itemStyle.normal.borderColor'),
                    lineWidth: seriesModel.get('itemStyle.normal.borderWidth'),
                    fill: null
                },
                shape: {
                    cx: cx,
                    cy: cy,
                    r: radius[0] + width / 2,
                    n: 4
                },
                position: [cx, cy],
                scale: [width, height],
                rotation: 0
            }));
        }
        topLayer.add(this.getLayer({
            type: 'sector',
            scissor: seriesModel.get('clockwise') ? [-1, 1] : [1, -1],
            zlevel: seriesModel.get('zlevel'),
            z: seriesModel.get('z'),
            style: {
                fill: 'transparent',
                stroke: seriesModel.get('borderColor'),
                lineWidth: 1
            },
            shape: {
                cx: cx,
                cy: cy,
                r0: radius[0],
                r: radius[1],
                startAngle: 0,
                endAngle: Math.PI * 2
            },
            position: [cx, cy],
            scale: [width, height],
            rotation: 0
        }));
    },
    dispose: function () {
        this._layers = null;
    }
});

echarts.registerVisual(echarts.util.curry(
    // 回调函数
    function (defaulter, providerName, ecModel, api) {
        var seriesModels = ecModel.getSeriesByType(providerName);
        if (!seriesModels || !seriesModels.length) {
            return;
        }
        var pipelineContext = seriesModels[0].pipelineContext;
        var data = pipelineContext.dataset;
        if (!data.count()) {
            return;
        }
        api.dispatchAction({
            type: 'selectDataRange',
            from: 'series:' + seriesModels[0].id,
            range: [0, data.count() - 1]
        });
    },
    null, 'pie'));
    
var option = {
    series: [{
        type: 'customPie',
        select: {
            mode: 'single'
        },
        center: ['50%', '50%'],
        radius: [10, '50%'],
        itemStyle: {
            normal: {
                borderWidth: 2
            }
        },
        data: [
            {name: 'A', value: 12},
            {name: 'B', value: 23},
            {name: 'C', value: 56},
            {name: 'D', value: 9}
        ]
    }]
};

myChart.setOption(option);

使用以上代码即可创建一个带有自定义特效的饼状图，并根据定义的数据显示信息对图表进行绘制。

2、使用echarts插件——随着echartssvg的推广，已经出现了很多的基于它的插件。在使用echartssvg时，可以通过引入这些插件来实现更多的特性，并增强echartssvg的表现力。例如，引入echarts-wordcloud插件，就可以轻松地在echartssvg中绘制词云图，进而方便地展示各种关键字统计数据。

<!-- 引入echarts-wordcloud库 -->
<script src="./echarts-wordcloud.min.js"></script>

<!--在页面中加入展示区域-->
<div id="wordCloud" style="height:400px;"></div>

<!-- 使用wordCloud绘制词云图 -->
<script>
    var chart = echarts.init(document.getElementById('wordCloud'));
    var option = {
        series: [{
            type: 'wordCloud',
            shape: 'cardioid',
            top: '50%',
            width: '100%',
            height: '100%',
            rotationRange: [0, 0],
            rotationStep: 45,
            gridSize: 5,
            sizeRange: [12, 50],
            textStyle: {
                normal: {
                    fontFamily: '微软雅黑',
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                }
            },
            data: [
                {
                    name: "Jay",
                    value: 666
                },
                {
                    name: "Chou",
                    value: 888
                },
                {
                    name: "Joe",
                    value: 224
                },
                {
                    name: "Sunny",
                    value: 300
                },
                {
                    name: "Enya",
                    value: 99
                },
                {
                    name: "Blue",
                    value: 22
                }
            ]
       }]
    };
    chart.setOption(option);
<