echart

basic bar

by johnvaldetine

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="barCirolar" style="height: 290px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;" _echarts_instance_="ec_1542301799994"><div style="position: relative; overflow: hidden; width: 273px; height: 400px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="273" height="400" style="position: absolute; left: 0px; top: -75px; width: 273px; height: 400px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div></div>

JavaScript

var price2017 = "12312332,3";
var price2016 = "23234332,4";
var price2015 = "23423433,3";

var myChart = echarts.init(document.getElementById('barCirolar'));

                            // specify chart configuration item and data
                            var option = {
                                color: ['#ef6e6e'],
                                tooltip: {
                                     formatter: '{c} TL',
                                },
                                grid: {
                                        width: '100%',
                                        left: '0%',
                                        top: '1%',
                                        bottom: '1%',
                                        containLabel: true
                                    },
                                xAxis: {
                                    data: ["2017","2016","2015"]
                                },
                                yAxis: {
                                    axisLine: {show: false},
                                    axisLabel: {show: false},
                                    axisTick: {show: false},
                                    splitLine: {show: false}
                                },
                                series: [{
                                    name: 'Ciro',
                                    type: 'bar',
                                    // data: [5, 20, 36, 10, 10, 20]
                                    data: [
                                            {value: price2017.replace(/,/g, '.'), name: '2017'},
                                            {value: price2016.replace(/,/g, '.'), name: '2016'},
                                            {value: price2015.replace(/,/g, '.'), name: '2015'}
                                            
                                          ],
                                    label: {
                                       ...