绘制柱线混搭图：echart源代码修改后接口R语言在Rstudio上实现绘制

于 2019-01-08 10:26:45 发布
阅读量351 收藏 1
点赞数
分类专栏： R语言可视化 文章标签： echart R交互可视化 柱线混搭 R交互
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wengqh/article/details/86063298
版权

目录

相关说明

代码

实现效果

进一步应用

完整代码

显示效果

相关说明

  1. 在echart源代码的基础上将语法对接R语言语法并在rstudio上运行，成为html报告中的一部分
  2. 在代码中添加注释和理解
  3. 进行举一反三的应用；原图为柱形图；也可以转化为条形图；
  4. 该图可应用于同时展示游戏商品两个时间段销售数据及两者的差距；实用性强

代码

library(devtools)
library(recharts)
library(rCharts)

option = list(
    title =list(
        text = '销售数据',
        subtext = '纯属虚构'
    ),
    tooltip = list(
        trigger= 'axis',
        formatter= JS("function (params){
            return params[0].name + ' : '
                   + (params[2].value - params[1].value > 0 ? '+' : '-') 
                   + params[0].value + '<br/>'
                   + params[2].seriesName + ' : ' + params[2].value + '<br/>'
                   + params[3].seriesName + ' : ' + params[3].value + '<br/>'
        }")
    ),
    toolbox= list(
        show = TRUE,
        feature = list(
            mark = list(show= TRUE),
            dataView = list(show= TRUE, readOnly= FALSE),
            magicType = list(show= TRUE, type= c('line', 'bar')),
            restore = list(show= TRUE),
            saveAsImage = list(show= TRUE)
        )
    ),
    legend= list(
        data=c('本周', '上周'),
        selectedMode=FALSE
    ),
    xAxis = list(
        list(
            type = 'category',
            data = c('周一','周二','周三','周四','周五','周六','周日')
        )
    ),
    yAxis = list(
        list(
            type = 'value',
            min = 200,
            max = 450
        )
    ),
    series = list(
        list(
            name='本周',
            type='line',
            data=c(400, 374, 251, 300, 420, 400, 440)
        ),
        list(
            name='上周',
            type='line',
            symbol='none',
            itemStyle=list(
                normal=list(
                  lineStyle= list(
                    width=1,
                    type='dashed'
                  )
                )
            ),
            data=c(320, 332, 301, 334, 360, 330, 350)
        ),
        list(
            name='上周2',
            type='bar',
            stack= '1',
            barWidth= 6,
            itemStyle=list(
                normal=list(
                    color='rgba(0,0,0,0)'#辅助列设置为透明颜色不显示
                ),
                emphasis=list(
                    color='rgba(0,0,0,0)'
                )
            ),
            data=c(320, 332, 251, 300, 360, 330, 350)#辅助列的取数方式:取两个系列的最小值
        ),
        list(
            name='变化',
            type='bar',
            stack= '1',
            data=list(
              80, 42, 
              list(value = 50, itemStyle=list( normal=list(color='red'))),
              list(value = 34, itemStyle=list( normal=list(color='red'))), 
              60, 70, 90
            )
        )
    )
);

echart(option,width=1000,height=500)%>% # 设定图形的宽度和长度
setTheme('macarons', calculable=TRUE)

 

实现效果

  • 有交互效果：指针指到处可现实具体数值；
  • 工具箱有很大作用：可直接查看原始值；可变化图形类型；如线图和柱状图之间的转换
  • 刚使用这个博客，不知道怎么直接将交互图放入博客中；只能截图；截图就没法显示交互效果；后续可研究一下；
标题

进一步应用

  • 若是x轴类型比较多，那就需要将x轴的信息在y轴以条形图形式展示比较好；
  • 步骤：将x轴和y轴兑换；需要修改tooltip的代码；若没有修改，那么提示框的信息显示会出现混乱

提示框源代码：

 tooltip = list(
        trigger= 'axis',
        formatter= JS("function (params){
            return params[0].name + ' : '
                   + (params[2].value - params[1].value > 0 ? '+' : '-') 
                   + params[0].value + '<br/>'
                   + params[2].seriesName + ' : ' + params[2].value + '<br/>'
                   + params[3].seriesName + ' : ' + params[3].value + '<br/>'
        }")
    )

修改后的提示框代码

   tooltip = list(
        trigger= 'axis',
           formatter= JS("function (params){
            return params[0].name + ' : '
                   + (params[0].value - params[1].value > 0 ? '+' : '-') 
                   + params[3].value + '<br/>'
                   + params[0].seriesName + ' : ' + params[0].value + '<br/>'
                   + params[1].seriesName + ' : ' + params[1].value + '<br/>'
        }") # 注意：纵轴和横轴交换之后, formatter里面的params位置需要重新填才能正确显示；
    )

完整代码

option = list(
    title =list(
        text = '销售数据',
        subtext = '纯属虚构'
    ),
     tooltip = list(
        trigger= 'axis',
           formatter= JS("function (params){
            return params[0].name + ' : '
                   + (params[0].value - params[1].value > 0 ? '+' : '-') 
                   + params[3].value + '<br/>'
                   + params[0].seriesName + ' : ' + params[0].value + '<br/>'
                   + params[1].seriesName + ' : ' + params[1].value + '<br/>'
        }") # 注意：纵轴和横轴交换之后, formatter里面的params位置需要重新填才能正确显示；
    ),
    toolbox= list(
        show = TRUE,
        feature = list(
            mark = list(show= TRUE),
            dataView = list(show= TRUE, readOnly= FALSE),
            magicType = list(show= TRUE, type= c('line', 'bar')),
            restore = list(show= TRUE),
            saveAsImage = list(show= TRUE)
        )
    ),
    legend= list(
        data=c('本周', '上周'),
        selectedMode=FALSE
    ),
    yAxis = list(
        list(
            type = 'category',
            data = c('周一','周二','周三','周四','周五','周六','周日')
        )
    ),
    xAxis = list(
        list(
            type = 'value',
            min = 200,
            max = 450
        ) 
    ),
    series = list(
        list(
            name='本周',
            type='line',
            data=c(400, 374, 251, 300, 420, 400, 440)
        ),
        list(
            name='上周',
            type='line',
            symbol='none',
            itemStyle=list(
                normal=list(
                  lineStyle= list(
                    width=1,
                    type='dashed'
                  )
                )
            ),
            data=c(320, 332, 301, 334, 360, 330, 350)
        ),
        list(
            name='上周2',
            type='bar',
            stack= '1',
            barWidth= 6,
            itemStyle=list(
                normal=list(
                    color='rgba(0,0,0,0)'#辅助列设置为透明颜色不显示
                ),
                emphasis=list(
                    color='rgba(0,0,0,0)'
                )
            ),
            data=c(320, 332, 251, 300, 360, 330, 350)#辅助列的取数方式:取两个系列的最小值
        ),
        list(
            name='变化',
            type='bar',
            stack= '1',
            data=list(
              80, 42, 
              list(value = 50, itemStyle=list( normal=list(color='red'))),
              list(value = 34, itemStyle=list( normal=list(color='red'))), 
              60, 70, 90
            )
        )
    )
);

echart(option,width=1000,height=500)%>% # 设定图形的宽度和长度
setTheme('macarons', calculable=TRUE)

显示效果

wengqh
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值