This is a EChart chart option types collection and a helper to use EChart WebComponent.
Please watch this video about Elm and Web Components by Richard Feldman
Install the webcomponent and the dependencies from bower
bower install --save echarts-webcomponentAdd 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-echartsCode
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
]
[]