kandi background
Explore Kits

echarts | Apache ECharts is a powerful, interactive charting | Chart library

 by   apache TypeScript Version: 5.3.2 License: Apache-2.0

 by   apache TypeScript Version: 5.3.2 License: Apache-2.0

Download this library from

kandi X-RAY | echarts Summary

echarts is a TypeScript library typically used in User Interface, Chart, WebGL, D3 applications. echarts has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.
Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library. 中文官网 | ENGLISH HOMEPAGE.
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • echarts has a medium active ecosystem.
  • It has 50600 star(s) with 18872 fork(s). There are 2029 watchers for this library.
  • There were 4 major release(s) in the last 6 months.
  • There are 2031 open issues and 13405 have been closed. On average issues are closed in 477 days. There are 67 open pull requests and 0 closed requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of echarts is 5.3.2
echarts Support
Best in #Chart
Average in #Chart
echarts Support
Best in #Chart
Average in #Chart

quality kandi Quality

  • echarts has 0 bugs and 0 code smells.
echarts Quality
Best in #Chart
Average in #Chart
echarts Quality
Best in #Chart
Average in #Chart

securitySecurity

  • echarts has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • echarts code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.
echarts Security
Best in #Chart
Average in #Chart
echarts Security
Best in #Chart
Average in #Chart

license License

  • echarts is licensed under the Apache-2.0 License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
echarts License
Best in #Chart
Average in #Chart
echarts License
Best in #Chart
Average in #Chart

buildReuse

  • echarts releases are available to install and integrate.
  • Installation instructions, examples and code snippets are available.
  • It has 130883 lines of code, 0 functions and 1236 files.
  • It has low code complexity. Code complexity directly impacts maintainability of the code.
echarts Reuse
Best in #Chart
Average in #Chart
echarts Reuse
Best in #Chart
Average in #Chart
Top functions reviewed by kandi - BETA

Coming Soon for all Libraries!

Currently covering the most popular Java, JavaScript and Python libraries. See a SAMPLE HERE.
kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.

echarts Key Features

Apache ECharts is a powerful, interactive charting and data visualization library for browser

Build

copy iconCopydownload iconDownload
# Install the dependencies from NPM:
npm install

# Rebuild source code immediately in watch mode when changing the source code.
npm run dev

# Check correctness of TypeScript code.
npm run checktype

# If intending to build and get all types of the "production" files:
npm run release

The unauthenticated git protocol on port 9418 is no longer supported

copy iconCopydownload iconDownload
    - name: Fix up git URLs
      run: echo -e '[url "https://github.com/"]\n  insteadOf = "git://github.com/"' >> ~/.gitconfig
git config --global url."https://github.com/".insteadOf git://github.com/
git config --global url."git@github.com:".insteadOf git://github.com/
-----------------------
    - name: Fix up git URLs
      run: echo -e '[url "https://github.com/"]\n  insteadOf = "git://github.com/"' >> ~/.gitconfig
git config --global url."https://github.com/".insteadOf git://github.com/
git config --global url."git@github.com:".insteadOf git://github.com/
-----------------------
    - name: Fix up git URLs
      run: echo -e '[url "https://github.com/"]\n  insteadOf = "git://github.com/"' >> ~/.gitconfig
git config --global url."https://github.com/".insteadOf git://github.com/
git config --global url."git@github.com:".insteadOf git://github.com/
-----------------------
git config --global url."https://".insteadOf git://
-----------------------
[remote "upstream"]
    url = git://github.com/curlconverter/curlconverter.git
    fetch = +refs/heads/*:refs/remotes/upstream/*
[remote "upstream"]
    url = git@github.com:curlconverter/curlconverter.git
    fetch = +refs/heads/*:refs/remotes/upstream/*
-----------------------
[remote "upstream"]
    url = git://github.com/curlconverter/curlconverter.git
    fetch = +refs/heads/*:refs/remotes/upstream/*
[remote "upstream"]
    url = git@github.com:curlconverter/curlconverter.git
    fetch = +refs/heads/*:refs/remotes/upstream/*
-----------------------
git config --global url."https://github".insteadOf git://github
Unhandled rejection Error: Command failed: /usr/bin/git submodule update -q --init --recursive
warning: templates not found /tmp/pacote-git-template-tmp/git-clone-a001527f
fatal: remote error:
  The unauthenticated git protocol on port 9418 is no longer supported.
Please see https://github.blog/2021-09-01-improving-git-protocol-security-github/ for more information.
fatal: clone of 'git://github.com/jquery/sizzle.git' into submodule path '/root/.npm/_cacache/tmp/git-clone-19674e32/src/sizzle' failed
Failed to clone 'src/sizzle'. Retry scheduled
warning: templates not found /tmp/pacote-git-template-tmp/git-clone-a001527f
-----------------------
git config --global url."https://github".insteadOf git://github
Unhandled rejection Error: Command failed: /usr/bin/git submodule update -q --init --recursive
warning: templates not found /tmp/pacote-git-template-tmp/git-clone-a001527f
fatal: remote error:
  The unauthenticated git protocol on port 9418 is no longer supported.
Please see https://github.blog/2021-09-01-improving-git-protocol-security-github/ for more information.
fatal: clone of 'git://github.com/jquery/sizzle.git' into submodule path '/root/.npm/_cacache/tmp/git-clone-19674e32/src/sizzle' failed
Failed to clone 'src/sizzle'. Retry scheduled
warning: templates not found /tmp/pacote-git-template-tmp/git-clone-a001527f
-----------------------
    insteadOf = ssh://
    insteadOf = git://
-----------------------
    insteadOf = ssh://
    insteadOf = git://

Error: Node Sass does not yet support your current environment

copy iconCopydownload iconDownload
npm uninstall node-sass --save
npm install sass --save
sudo npm install -g n
sudo n 14
npm uninstall node-sass --save
npm install node-sass --save
-----------------------
npm uninstall node-sass --save
npm install sass --save
sudo npm install -g n
sudo n 14
npm uninstall node-sass --save
npm install node-sass --save
-----------------------
npm uninstall node-sass --save
npm install sass --save
sudo npm install -g n
sudo n 14
npm uninstall node-sass --save
npm install node-sass --save

Use Ajax Json Data to Chart

copy iconCopydownload iconDownload
let array = [];
for (const i in response.data) {
   array.push(response.data[i].DAY);
}
[11, 12]
-----------------------
let array = [];
for (const i in response.data) {
   array.push(response.data[i].DAY);
}
[11, 12]

Custom background for area's chart

copy iconCopydownload iconDownload
var myChart = echarts.init(document.getElementById('main'));

echarts.registerTransform(ecStat.transform.clustering);
const data = [
  [3.275154, 2.957587],
  [-3.344465, 2.603513],
  [0.355083, -3.376585],
  [1.852435, 3.547351],
  [-2.078973, 2.552013],
  [-0.993756, -0.884433],
  [2.682252, 4.007573],
  [-3.087776, 2.878713],
  [-1.565978, -1.256985],
  [2.441611, 0.444826],
  [-0.659487, 3.111284],
  [-0.459601, -2.618005],
  [2.17768, 2.387793],
  [-2.920969, 2.917485],
  [-0.028814, -4.168078],
  [3.625746, 2.119041],
  [-3.912363, 1.325108],
  [-0.551694, -2.814223],
  [2.855808, 3.483301],
  [-3.594448, 2.856651],
  [0.421993, -2.372646],
  [1.650821, 3.407572],
  [-2.082902, 3.384412],
  [-0.718809, -2.492514],
  [4.513623, 3.841029],
  [-4.822011, 4.607049],
  [-0.656297, -1.449872],
  [1.919901, 4.439368],
  [-3.287749, 3.918836],
  [-1.576936, -2.977622],
  [3.598143, 1.97597],
  [-3.977329, 4.900932],
  [-1.79108, -2.184517],
  [3.914654, 3.559303],
  [-1.910108, 4.166946],
  [-1.226597, -3.317889],
  [1.148946, 3.345138],
  [-2.113864, 3.548172],
  [0.845762, -3.589788],
  [2.629062, 3.535831],
  [-1.640717, 2.990517],
  [-1.881012, -2.485405],
  [4.606999, 3.510312],
  [-4.366462, 4.023316],
  [0.765015, -3.00127],
  [3.121904, 2.173988],
  [-4.025139, 4.65231],
  [-0.559558, -3.840539],
  [4.376754, 4.863579],
  [-1.874308, 4.032237],
  [-0.089337, -3.026809],
  [3.997787, 2.518662],
  [-3.082978, 2.884822],
  [0.845235, -3.454465],
  [1.327224, 3.358778],
  [-2.889949, 3.596178],
  [-0.966018, -2.839827],
  [2.960769, 3.079555],
  [-3.275518, 1.577068],
  [0.639276, -3.41284]
];
var CLUSTER_COUNT = 6;
var DIENSIION_CLUSTER_INDEX = 2;
var COLOR_ALL = [
  '#37A2DA',
  '#e06343',
  '#37a354',
  '#b55dba',
  '#b5bd48',
  '#8378EA',
  '#96BFFF'
];
var pieces = [];
for (var i = 0; i < CLUSTER_COUNT; i++) {
  pieces.push({
    value: i,
    label: 'cluster ' + i,
    color: COLOR_ALL[i]
  });
}
//-----------Your require----------
const Setopacity = 0.3;
const centerCoord = [0, 0];
const markAreaData = [
  // First quadrant
  [
    {
      coord: [centerCoord[0], centerCoord[1]],
      itemStyle: {
        color: 'Green',
        opacity: Setopacity
      }
    },
    {
      coord: [Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER]
    }
  ],
  // Second quadrant
  [
    {
      coord: [-6, 6],
      itemStyle: {
        color: 'red',
        opacity: Setopacity
      }
    },
    {
      coord: [centerCoord[0], centerCoord[1]]
    }
  ],
  // Third quadrant
  [
    {
      coord: [-6 - 6],
      itemStyle: {
        color: 'orange',
        opacity: Setopacity
      }
    },
    {
      coord: [centerCoord[0], centerCoord[1]]
    }
  ],
  // Forth quadrant
  [
    {
      coord: [centerCoord[0], centerCoord[1]],
      itemStyle: {
        color: 'blue',
        opacity: Setopacity
      }
    },
    {
      coord: [Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER]
    }
  ]
];

var option = {
  dataset: [
    {
      source: data
    },
    {
      transform: {
        type: 'ecStat:clustering',
        // print: true,
        config: {
          clusterCount: CLUSTER_COUNT,
          outputType: 'single',
          outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX
        }
      }
    }
  ],
  tooltip: {
    position: 'top'
  },
  visualMap: {
    type: 'piecewise',
    top: 'middle',
    min: 0,
    max: CLUSTER_COUNT,
    left: 10,
    splitNumber: CLUSTER_COUNT,
    dimension: DIENSIION_CLUSTER_INDEX,
    pieces: pieces
  },
  grid: {
    left: 120
  },
  xAxis: {},
  yAxis: {},
  series: {
    type: 'scatter',
    encode: { tooltip: [0, 1] },
    symbolSize: 15,
    itemStyle: {
      borderColor: '#555'
    },
    datasetIndex: 1,
    markArea: {
      data: markAreaData //here
    }
  }
};

myChart.setOption(option);
<!DOCTYPE html>
    <html lang="Zh-TW">
    <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-stat@1.2.0/dist/ecStat.js"></script>
    <meta charset="utf-8">
    </head>
    <body>
<div id="main" style="width:1000px;height:500px;"></div>
    </body>
    </html>
-----------------------
var myChart = echarts.init(document.getElementById('main'));

echarts.registerTransform(ecStat.transform.clustering);
const data = [
  [3.275154, 2.957587],
  [-3.344465, 2.603513],
  [0.355083, -3.376585],
  [1.852435, 3.547351],
  [-2.078973, 2.552013],
  [-0.993756, -0.884433],
  [2.682252, 4.007573],
  [-3.087776, 2.878713],
  [-1.565978, -1.256985],
  [2.441611, 0.444826],
  [-0.659487, 3.111284],
  [-0.459601, -2.618005],
  [2.17768, 2.387793],
  [-2.920969, 2.917485],
  [-0.028814, -4.168078],
  [3.625746, 2.119041],
  [-3.912363, 1.325108],
  [-0.551694, -2.814223],
  [2.855808, 3.483301],
  [-3.594448, 2.856651],
  [0.421993, -2.372646],
  [1.650821, 3.407572],
  [-2.082902, 3.384412],
  [-0.718809, -2.492514],
  [4.513623, 3.841029],
  [-4.822011, 4.607049],
  [-0.656297, -1.449872],
  [1.919901, 4.439368],
  [-3.287749, 3.918836],
  [-1.576936, -2.977622],
  [3.598143, 1.97597],
  [-3.977329, 4.900932],
  [-1.79108, -2.184517],
  [3.914654, 3.559303],
  [-1.910108, 4.166946],
  [-1.226597, -3.317889],
  [1.148946, 3.345138],
  [-2.113864, 3.548172],
  [0.845762, -3.589788],
  [2.629062, 3.535831],
  [-1.640717, 2.990517],
  [-1.881012, -2.485405],
  [4.606999, 3.510312],
  [-4.366462, 4.023316],
  [0.765015, -3.00127],
  [3.121904, 2.173988],
  [-4.025139, 4.65231],
  [-0.559558, -3.840539],
  [4.376754, 4.863579],
  [-1.874308, 4.032237],
  [-0.089337, -3.026809],
  [3.997787, 2.518662],
  [-3.082978, 2.884822],
  [0.845235, -3.454465],
  [1.327224, 3.358778],
  [-2.889949, 3.596178],
  [-0.966018, -2.839827],
  [2.960769, 3.079555],
  [-3.275518, 1.577068],
  [0.639276, -3.41284]
];
var CLUSTER_COUNT = 6;
var DIENSIION_CLUSTER_INDEX = 2;
var COLOR_ALL = [
  '#37A2DA',
  '#e06343',
  '#37a354',
  '#b55dba',
  '#b5bd48',
  '#8378EA',
  '#96BFFF'
];
var pieces = [];
for (var i = 0; i < CLUSTER_COUNT; i++) {
  pieces.push({
    value: i,
    label: 'cluster ' + i,
    color: COLOR_ALL[i]
  });
}
//-----------Your require----------
const Setopacity = 0.3;
const centerCoord = [0, 0];
const markAreaData = [
  // First quadrant
  [
    {
      coord: [centerCoord[0], centerCoord[1]],
      itemStyle: {
        color: 'Green',
        opacity: Setopacity
      }
    },
    {
      coord: [Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER]
    }
  ],
  // Second quadrant
  [
    {
      coord: [-6, 6],
      itemStyle: {
        color: 'red',
        opacity: Setopacity
      }
    },
    {
      coord: [centerCoord[0], centerCoord[1]]
    }
  ],
  // Third quadrant
  [
    {
      coord: [-6 - 6],
      itemStyle: {
        color: 'orange',
        opacity: Setopacity
      }
    },
    {
      coord: [centerCoord[0], centerCoord[1]]
    }
  ],
  // Forth quadrant
  [
    {
      coord: [centerCoord[0], centerCoord[1]],
      itemStyle: {
        color: 'blue',
        opacity: Setopacity
      }
    },
    {
      coord: [Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER]
    }
  ]
];

var option = {
  dataset: [
    {
      source: data
    },
    {
      transform: {
        type: 'ecStat:clustering',
        // print: true,
        config: {
          clusterCount: CLUSTER_COUNT,
          outputType: 'single',
          outputClusterIndexDimension: DIENSIION_CLUSTER_INDEX
        }
      }
    }
  ],
  tooltip: {
    position: 'top'
  },
  visualMap: {
    type: 'piecewise',
    top: 'middle',
    min: 0,
    max: CLUSTER_COUNT,
    left: 10,
    splitNumber: CLUSTER_COUNT,
    dimension: DIENSIION_CLUSTER_INDEX,
    pieces: pieces
  },
  grid: {
    left: 120
  },
  xAxis: {},
  yAxis: {},
  series: {
    type: 'scatter',
    encode: { tooltip: [0, 1] },
    symbolSize: 15,
    itemStyle: {
      borderColor: '#555'
    },
    datasetIndex: 1,
    markArea: {
      data: markAreaData //here
    }
  }
};

myChart.setOption(option);
<!DOCTYPE html>
    <html lang="Zh-TW">
    <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-stat@1.2.0/dist/ecStat.js"></script>
    <meta charset="utf-8">
    </head>
    <body>
<div id="main" style="width:1000px;height:500px;"></div>
    </body>
    </html>

Change the legend in highcharts heatmap to show instead of a color bar, a set of fixed icons with hide and show on click

copy iconCopydownload iconDownload
  colorAxis: {
    dataClasses: [{
      from: 0,
      to: 50
    }, {
      ...
    }, {
      ...
    }],
    ...
  }

Convert json data to object

copy iconCopydownload iconDownload
const result = {}
const arr = [{"name":"ERP Developer","value":2},{"name":"Software Engineer","value":2},{"name":"Dot Net Developer","value":2},{"name":"Apex Developer","value":0},{"name":"test","value":1}]

arr.forEach(row => {
    for (let i in row) {
    if (result[i]) {
        result[i].push(row[i])
    } else {
        result[i] = [row[i]]
    }
  }
})
console.log(result)
-----------------------
const response = [
  {"name":"ERP Developer","value":2},
  {"name":"Software Engineer","value":2},
  {"name":"Dot Net Developer","value":2},
  {"name":"Apex Developer","value":0},
  {"name":"test","value":1}
];

const mapped = response.reduce(
  (acc,x) => {
    acc.name.push(  x.name  );
    acc.Value.push( x.value );
    return acc;
  },
  { name: [], Value: [] }
);

Is it possible to rotate whole echarts Instance in Apache ECharts?

copy iconCopydownload iconDownload
   var option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      startAngle: 15,
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

var myChart2 = echarts.init(document.getElementById('main2'));
myChart2.setOption(option);

function rotate() {
    var Angle=document.getElementById("range").value;
    myChart2.setOption({
    series: [{
    startAngle:Angle,
    }]
   }); 
};
    <html lang="Zh-TW">
    <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
    <meta charset="utf-8">
    </head>
    <body>
        <label class="col-lg-3 control-label">rotate</label>
        <div class="col-lg-6"><input type="range" class="form-control" min="0" max="360" value="10" oninput="rotate('range')" id="range"></div>
    <div id="main2" style="width:100%;height:600px;"></div
      </body>
    </html>
-----------------------
   var option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      startAngle: 15,
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

var myChart2 = echarts.init(document.getElementById('main2'));
myChart2.setOption(option);

function rotate() {
    var Angle=document.getElementById("range").value;
    myChart2.setOption({
    series: [{
    startAngle:Angle,
    }]
   }); 
};
    <html lang="Zh-TW">
    <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
    <meta charset="utf-8">
    </head>
    <body>
        <label class="col-lg-3 control-label">rotate</label>
        <div class="col-lg-6"><input type="range" class="form-control" min="0" max="360" value="10" oninput="rotate('range')" id="range"></div>
    <div id="main2" style="width:100%;height:600px;"></div
      </body>
    </html>

How to group weekly data in it respective months and plot using Apache Echarts

copy iconCopydownload iconDownload
getDateOfWeek(week: number, year: number): string {
  let date = (1 + (week - 1) * 7);
  let dateOfYear = new Date(year, 0, date)
  let month = dateOfYear.toLocaleString('pt-BR', { month: 'short' });
  month = month.charAt(0).toUpperCase() + month.slice(1).replace('.', '')
  return month;
}
options: {
 ...,
  axisLabel: {
    formatter: (param: number) => {
      return this.getDateOfWeek(param, 2021)
    },
  },
  ...,
}
firstWeek = '2021-01-01'
secondWeek = '2021-01-08'
-----------------------
getDateOfWeek(week: number, year: number): string {
  let date = (1 + (week - 1) * 7);
  let dateOfYear = new Date(year, 0, date)
  let month = dateOfYear.toLocaleString('pt-BR', { month: 'short' });
  month = month.charAt(0).toUpperCase() + month.slice(1).replace('.', '')
  return month;
}
options: {
 ...,
  axisLabel: {
    formatter: (param: number) => {
      return this.getDateOfWeek(param, 2021)
    },
  },
  ...,
}
firstWeek = '2021-01-01'
secondWeek = '2021-01-08'
-----------------------
getDateOfWeek(week: number, year: number): string {
  let date = (1 + (week - 1) * 7);
  let dateOfYear = new Date(year, 0, date)
  let month = dateOfYear.toLocaleString('pt-BR', { month: 'short' });
  month = month.charAt(0).toUpperCase() + month.slice(1).replace('.', '')
  return month;
}
options: {
 ...,
  axisLabel: {
    formatter: (param: number) => {
      return this.getDateOfWeek(param, 2021)
    },
  },
  ...,
}
firstWeek = '2021-01-01'
secondWeek = '2021-01-08'
-----------------------
xAxis: [
  {
    type: "category",
    boundaryGap: false,
    data: this.generateData(false, 51),
    axisLabel: {
      formatter: (param) => {
        return this.getMonthFromWeek(param, 2021);
      }
    },
    show: false
  },
  {
    position: "bottom",
    type: "category",
    data: [
      "Jan",
      "Fev",
      "Mar",
      "Abr",
      "Mai",
      "Jun",
      "Jul",
      "Ago",
      "Set",
      "Out",
      "Nov",
      "Dez"
    ],
    xAxisIndex: 2
  }
],

How do you use ECharts' formatter to specify international number formats?

copy iconCopydownload iconDownload
formatter: function(params){
   let label = params.value[1] // this is my y column
   return label.toLocaleString()
}

Pylint integration with Jenkins build running on dynamic kubernetes pods as agents

copy iconCopydownload iconDownload
podTemplate(containers: [
    containerTemplate(name: 'maven', image: 'maven:3.8.1-jdk-8', command: 'sleep', args: '99d'),
    containerTemplate(name: 'golang', image: 'golang:1.16.5', command: 'sleep', args: '99d')
  ]) {

    node(POD_LABEL) {
        stage('Get a Maven project') {
            git 'https://github.com/jenkinsci/kubernetes-plugin.git'
            container('maven') {
                stage('Build a Maven project') {
                    sh 'mvn -B -ntp clean install'
                }
            }
        }

        stage('Get a Golang project') {
            git url: 'https://github.com/hashicorp/terraform.git', branch: 'main'
            container('golang') {
                stage('Build a Go project') {
                    sh '''
                    mkdir -p /go/src/github.com/hashicorp
                    ln -s `pwd` /go/src/github.com/hashicorp/terraform
                    cd /go/src/github.com/hashicorp/terraform && make
                    '''
                }
            }
        }

    }
}

Community Discussions

Trending Discussions on echarts
  • Why yAxis axisLabel align left is resulting position label inside the bar in Apache ECharts
  • The unauthenticated git protocol on port 9418 is no longer supported
  • Error: Node Sass does not yet support your current environment
  • Use Ajax Json Data to Chart
  • Custom background for area's chart
  • Show tooltip in ECharts given all input values null
  • Change the legend in highcharts heatmap to show instead of a color bar, a set of fixed icons with hide and show on click
  • Convert json data to object
  • Is it possible to rotate whole echarts Instance in Apache ECharts?
  • How to group weekly data in it respective months and plot using Apache Echarts
Trending Discussions on echarts

QUESTION

Why yAxis axisLabel align left is resulting position label inside the bar in Apache ECharts

Asked 2022-Mar-29 at 04:40

The expetacion result is like this post: How to set labels align left in Horizontal Bar using chart.js? but it's implemented in Apache ECharts

Any idea?

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

var options = {
  color: ["#3398DB"],
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  grid: {},
  xAxis: [{
    type: "value",
  }],
  yAxis: [{
    type: "category",
    axisLabel: {
      align: 'left',
      margin: 40
    },
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  }],
  series: [{
    name: "直接访问",
    type: "bar",
    barWidth: "60%",
    data: [10, 52, 200, 334, 390, 330, 220]
  }]
};

myChart.setOption(options);
#main {
  height: 400px;
}
<div id="main"></div>
<p>Test</p>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>

ANSWER

Answered 2022-Mar-24 at 16:42

You can set margin for axisLabel, to make the labels visible. Updated your code snippet

Source https://stackoverflow.com/questions/69749058

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install echarts

Build echarts source code:. Execute the instructions in the root directory of the echarts: (Node.js is required). Then the "production" files are generated in the dist directory. More custom build approaches can be checked in this tutorial: Create Custom Build of ECharts please.

Support

If you wish to debug locally or make pull requests, please refer to the contributing document.

DOWNLOAD this Library from

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

Explore Related Topics

Share this Page

share link
Reuse Pre-built Kits with echarts
Compare Chart Libraries with Highest Support
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

  • © 2022 Open Weaver Inc.