https://github.com/kkpoon/elm-echarts

echarts chart option in elm
https://github.com/kkpoon/elm-echarts

chart echarts elm

Last synced: 19 days ago
JSON representation

echarts chart option in elm

• Host: GitHub
• URL: https://github.com/kkpoon/elm-echarts
• Owner: kkpoon
• License: bsd-3-clause
• Created: 2017-02-07T07:47:20.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2021-11-18T16:29:52.000Z (about 3 years ago)
• Last Synced: 2023-08-08T20:39:29.844Z (over 1 year ago)
• Topics: chart, echarts, elm
• Language: Elm
• Homepage: http://package.elm-lang.org/packages/kkpoon/elm-echarts
• Size: 36.1 KB
• Stars: 5
• Watchers: 4
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# elm-echarts

This is a [EChart](http://echarts.baidu.com/) chart option types

collection and a helper to use

[EChart WebComponent](https://github.com/kkpoon/echarts-webcomponent).

## Why Web Component?

Please watch [this](https://www.youtube.com/watch?v=ar3TakwE8o0&t=1s)

video about Elm and Web Components by Richard Feldman

## How to use?

Install the webcomponent and the dependencies from [bower](https://bower.io/)

```shell

bower install --save echarts-webcomponent

```

Add the following to your `.html` file

```html

  

    

    

    

    

    

    

    

  

  

    

  

```

Install `elm-echarts`

```shell

elm package install elm-echarts

```

Code

```elm

let

    title =

        { defaultTitleOption

            | text = Just "Website Traffic Sources"

            , subtext = Just "Demo Data"

            , left = Just "center"

        }

    tooltip =

        { defaultTooltipOption

            | formatter = Just "{a} 
{b} : {c} ({d}%)"

        }

    legend =

        { defaultLegendOption

            | orient = Just ECharts.Style.Vertical

            , left = Just "left"

            , data =

                Just <|

                    List.map

                        (\name ->

                            { name = name

                            , icon = ""

                            , textStyle = defaultTextStyleOption

                            }

                        )

                        [ "Direct", "EDM", "WebAds", "VideoAds", "Search Engine" ]

        }

    series =

        { defaultPieSeriesOption

            | radius = Just ( "0", "55%" )

            , center = Just ( "50%", "60%" )

            , data =

                Just

                    [ { value = 335, name = "Direct" }

                    , { value = 310, name = "EDM" }

                    , { value = 234, name = "WebAds" }

                    , { value = 135, name = "VideoAds" }

                    , { value = 1548, name = "Search Engine" }

                    ]

            , itemStyle =

                Just

                    { emphasis =

                        Just

                            { shadowBlur = Just 10

                            , shadowOffsetX = Just 0

                            , shadowColor = Just "rgba(0, 0, 0, 0.5)"

                            }

                    }

        }

    pieChart =

        PieChart

            ({ defaultPieChartOption

                | title = Just title

                , tooltip = Just tooltip

                , legend = Just legend

                , series = Just [ series ]

             }

            )

    chartOption =

        toJsonString pieChart

in

    node "echarts-webcomponent"

        [ style [ ( "width", "400px" ), ( "height", "300px" ) ]

        , attribute "option" chartOption

        ]

        []

```