echarts -- each column in the histogram corresponds to the legend, and "%" is added to the value and ordinate customization

Briefly describe the requirements:

1. The content of each column is corresponding to the legend, and the color of the corresponding column is consistent with the legend;
2. '%' should be added to both the vertical coordinate and the upper value of the column;
3. The legend is displayed on the right, involving the location setting;

Look at the picture below. Is it the histogram you want?

Next, go straight to the code

!!! Focus on comments in code

Don't forget to introduce echarts.min.js and jquery.min.js!!!

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
<body style="background:#000;">
    <div id="bar" style="width:500px;height: 250px;"></div>
    <script type="text/javascript">
    var bar_data = [12,23,34,43,33,23,11,22,6]; //Analog data
    var chart = echarts.init(document.getElementById('bar'));
    var option = {
        tooltip : {
            formatter: '{a}:{c}%'//a is the name value of each data in the series, and c is the data value
        legend: {
            orient: 'vertical', // 'horizontal'
            data:['Direct access','Mail marketing','Alliance advertising','Video advertising','Search Engines','Baidu','Google','Bing Ying','Other'],
            textStyle: {  // Column content style
                color: '#fff',  // Font color
            x: '70%',//Legend position. Set right. It is found that the legend and text position are reversed. Just set a value
            y: 'center'//Center along Y axis
        grid: {
            left: '3%',
            right: '30%',
            top: '3%',
            containLabel: true
        xAxis : [ //Abscissa
                type : 'category',
                data : [''],
                axisLine: {
                    lineStyle: {
                        color: "#fff",//Abscissa line color
        yAxis : [ //Ordinate
                type : 'value',
                axisLabel: {
                    formatter: '{value}%',//Add a percent sign to the Y-axis value
                axisLine: {
                    lineStyle: {
                        color: "#fff",//Ordinate line color
        color:['#0287f8','#269cff','#58b1fc','#2fb6f6','#03cdfa','#3ed9fc','#05f6f6','#47fefe','#7dfcfc','#a9ffff'],//Color of histogram
        series : [
            {name:'Direct access'},
            {name:'Mail marketing'},
            {name:'Alliance advertising'},
            {name:'Video advertising'},
            {name:'Search Engines'},
            {name:'Bing Ying'},

    for(var i = 0; i< option.series.length; i++){
        var style = { //Define the style of the histogram
            normal: {
                label: {
                    show: true,
                    position: 'top', //Display value above column
                    formatter: '{c}%' //Value plus% '
        option.series[i].type = 'bar'; //Each data is specified as' bar '
        option.series[i].itemStyle = style; // Style added to each data in series
        option.series[i].data = [bar_data[i]]; //data assignment in series


If you have any questions, please leave a message to me~~

Tags: Javascript JQuery Google

Posted on Mon, 04 Nov 2019 12:32:38 -0800 by deepakagrawal1982