创新互联ECharts教程：ECharts个性化图表样式的实现

Echarts 绘制南丁格尔图

Echarts 可以自定义配置选项；

Echarts 设置数据图形的样式可以从三个层级入手，分别是：全局、系列和数据。

下面我们使用 Echarts 来实现如下的一个南丁格尔图：

点击编辑实例》》

开始绘制南丁格尔图

与第一节绘制的图表样式不同，本节我们要绘制的是饼图（第一节是柱状图）。

饼图是根据明显的扇形弧度的不同来表达不同类目的数据占据的总数的百分比。相比于柱状图，饼图的数据格式更加简单，它数值是一维的，无需给出类目。

饼图不在直角坐标系上实现，自然也不需要 xAxis 和 yAxis。

利用下述代码绘制出一个简单的饼图：

myChart.setOption({
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data:[
                {value:235, name:'视频广告'},
                {value:274, name:'联盟广告'},
                {value:310, name:'邮件营销'},
                {value:335, name:'直接访问'},
                {value:400, name:'搜索引擎'}
            ]
        }
    ]
})

图形显示结果：

点击编辑实例》》

ECharts 中的数据项既可以只设成数值，也可以设为一个包含有名称、该数据图形的样式配置、标签配置的对象，具体见 data 文档。

比如上述代码中的 data 属性值是一个包含 name 和 value 属性的对象，而不像第一节里那样每一项都是单个数值。

ECharts 中的饼图也支持通过设置 roseType 显示成南丁格尔图，操作如下：

roseType: 'angle'

显示出的南丁格尔图通过半径表示数据的大小：

点击编辑实例》》

Echarts 配置阴影

建立好一个基本的南丁格尔图后，我们可以为其添加一些通用的样式，例如阴影、透明度、颜色、边框颜色、边框宽度等。

Echarts 的这些样式通常都是在系列的 itemStyle 中设置的。

下面来看看 Echarts 中阴影样式的配置：

itemStyle: {
    normal: {
        // 阴影的大小
        shadowBlur: 200,
        // 阴影水平方向上的偏移
        shadowOffsetX: 0,
        // 阴影垂直方向上的偏移
        shadowOffsetY: 0,
        // 阴影颜色
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
}

加上阴影后显示的效果如下：

点击编辑实例》》

在 itemStyle 中有 normal 和 emphasis 两个选项，normal 选项显示的是正常展示下的样式，emphasis 是当鼠标 hover 时候的高亮样式。

上述示例里使用的是 normal ，是在正常的样式下加阴影，如果想要配置为在鼠标 hover 的时候突出阴影，可以使用下述代码：

itemStyle: {
    emphasis: {
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
}

Echarts 设置深色背景和浅色标签

接下来我们通过修改背景颜色和文本颜色来把上述实例的主题变为深色主题。

因为背景色是全局的，所以直接在 option 下设置 backgroundColor 就可以了，具体操作如下：

setOption({
    backgroundColor: '#2c343c'
})

背景色设置完成后，同样将文本的样式设置为全局的 textStyle，具体操作如下：

setOption({
    textStyle: {
        color: 'rgba(255, 255, 255, 0.3)'
    }
})

如果不想设置全局的文本样式，也可以分别对每个系列进行设置，每个系列的文本设置在 label.normal.textStyle，操作如下：

label: {
    normal: {
        textStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        }
    }
}

最后，我们将实例中的饼图的标签的视觉引导线的颜色设置为浅色，操作如下：

labelLine: {
    normal: {
        lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
        }
    }
}

最终的饼图效果显示如下：

点击编辑实例》》

注意：label 和 labelLine 的样式有 normal 和 emphasis 两个状态，这与 itemStyle 相同。

Echarts 设置扇形的颜色

我们还可以根据实际需要对饼图中扇形的颜色进行设置，同样，扇形颜色的设置是在 itemStyle 中，操作如下：

itemStyle: {
    normal: {
        // 设置扇形的颜色
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
}

效果显示如下：

点击编辑实例》》

现在已经很接近我们要实现的效果了，接下来我们来实现图形的层次感和空间感。

ECharts 中每个扇形颜色的可以通过分别设置 data 下的数据项实现，操作如下：

data: [{
    value:400,
    name:'搜索引擎',
    itemStyle: {
        normal: {
            color: '#c23531'
        }
    }
}, ...]

其实我们可以使用一种更快捷的方式来体现明暗度的变化，即通过 visualMap 组件将数值的大小映射到明暗度，操作如下：

visualMap: {
    // 不显示 visualMap 组件，只用于明暗度的映射
    show: false,
    // 映射的最小值为 80
    min: 80,
    // 映射的最大值为 600
    max: 600,
    inRange: {
        // 明暗度的范围是 0 到 1
        colorLightness: [0, 1]
    }
}

我们得到的最终效果如下图所示：

点击编辑实例》》

以下是一个南丁格尔图简单示例：



    
    cdcxhl.com(www.cdcxhl.com)

尝试一下

本文题目：创新互联ECharts教程：ECharts个性化图表样式的实现
路径分享：http://www.mswzjz.cn/qtweb/news46/393096.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：贝锐智能

贝锐智能技术为您推荐以下文章