Skip to content

Latest commit

 

History

History
119 lines (101 loc) · 3.22 KB

README.md

File metadata and controls

119 lines (101 loc) · 3.22 KB

elm-echarts

This is a EChart chart option types collection and a helper to use EChart WebComponent.

Why Web Component?

Please watch this video about Elm and Web Components by Richard Feldman

How to use?

Install the webcomponent and the dependencies from bower

bower install --save echarts-webcomponent

Add the following to your .html file

<html>
  <head>
    <!-- your other header tags -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <script src="bower_components/custom-elements/custom-elements.min.js"></script>
    <script src="bower_components/echarts/dist/echarts.min.js"></script>
    <link rel="import" href="bower_components/echarts-webcomponent/echarts-webcomponent.html" />
    <!-- your other header tags -->
  </head>
  <body>
    <!-- your body -->
  </body>
</html>

Install elm-echarts

elm package install elm-echarts

Code

let
    title =
        { defaultTitleOption
            | text = Just "Website Traffic Sources"
            , subtext = Just "Demo Data"
            , left = Just "center"
        }

    tooltip =
        { defaultTooltipOption
            | formatter = Just "{a} <br/>{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
        ]
        []