echarts-webcomponent option types


Keywords
chart, echarts, elm
License
Apache-2.0
Install
elm-package install kkpoon/elm-echarts 8.0.0

Contributors

kkpoon Niklaus Huang


See all contributors


Documentation

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
        ]
        []

Build the example

To build the example, run

elm make example/Main.elm --output example/main.js

Open example/index.html to view the example page