XD-DENG / ECharts2Shiny

To insert interactive charts from ECharts into R Shiny applications (在R Shiny app中插入ECharts可交互图形)
https://CRAN.R-project.org/package=ECharts2Shiny
GNU General Public License v2.0
130 stars 47 forks source link

Add line width, scatter size, point type and line type feature #21

Closed XD-DENG closed 8 years ago

XD-DENG commented 8 years ago

For line charts, example ECharts code:

option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },

    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'邮件营销',
            type:'line',

            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',

            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',

            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
           itemStyle:{normal:{lineStyle: {width:5}}},
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            itemStyle:{normal:{lineStyle: {width:0.5}}},
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]

};
XD-DENG commented 8 years ago

For scatter plots, we can use symbolSize:20 to set the size of scatters.

XD-DENG commented 8 years ago

Addressed with commit 02f85c8b2eb277d54db1855106046e0c2bec7d29

XD-DENG commented 8 years ago

We can also change the type of line in lines charts,

example code

option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },

    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'视频广告',
            type:'line',
            itemStyle:{normal:{lineStyle: {width:5, type:'dotted'}}},
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
           itemStyle:{normal:{lineStyle: {width:2, type:'solid'}},},
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            itemStyle:{normal:{lineStyle: {width:5, type:'dashed'}}},
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]

};
XD-DENG commented 8 years ago
screen shot 2016-07-21 at 10 22 50 pm

In scatter plots, we can change the type of points

XD-DENG commented 8 years ago

address again with commit 0c773eeef64b5351299e33ec3a290a729f5cafea