Home >Web Front-end >JS Tutorial >How to make beautiful ECharts charts

How to make beautiful ECharts charts

王林Original: 2023-12-17 10:43:351113browse

How to make beautiful ECharts charts, specific code examples are required

ECharts is a JavaScript-based open source visualization library that can be used to create rich charts and visualizations. It provides a wealth of chart types and interactive functions, suitable for data visualization needs in various fields. This article will introduce how to use ECharts to create beautiful charts and give specific code examples.

First, we need to introduce the ECharts library file. You can download the latest version of the library file from the ECharts official website (https://echarts.apache.org/zh/index.html) and then introduce it into the HTML page.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>漂亮的ECharts图表</title>
  <script src="echarts.min.js"></script>
</head>
<body>
  <div id="myChart" style="width: 600px; height: 400px;"></div>
  <script>
    // 在这里编写图表代码
  </script>
</body>
</html>

Next, we can write specific chart code in the <script></script> tag. Below is a simple example showing how to create a histogram.

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

// 指定图表的配置项和数据
var option = {
  title: {
    text: '柱状图示例'
  },
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10]
  }]
};

// 使用配置项显示图表
myChart.setOption(option);

In the above code, we first obtain a chart instance through the echarts.init method, and then set the configuration items and data of the chart through the setOption method. Configuration items can define the title of the chart, the data of the x-axis and y-axis, and the type and data of the series. Taking the above histogram as an example, we set the title of the chart to "Bar Chart Example" through the title configuration item, and set the x-axis data to [' through the xAxis configuration item A', 'B', 'C', 'D', 'E'], the series type is set to histogram through the series configuration item, and the histogram data is set to [5, 20, 36, 10, 10].

In addition to bar charts, ECharts also supports multiple chart types such as line charts, scatter charts, pie charts, and radar charts. Below are some common charting code examples.

Line chart example:

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

var option = {
  title: {
    text: '折线图示例'
  },
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E'],
    axisLabel: {
      rotate: 45 // 旋转x轴标签
    }
  },
  yAxis: {},
  series: [{
    name: '数据',
    type: 'line',
    data: [5, 20, 36, 10, 10]
  }]
};

myChart.setOption(option);

Pie chart example:

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

var option = {
  title: {
    text: '饼图示例'
  },
  series: [{
    name: '数据',
    type: 'pie',
    data: [
      {value: 5, name: 'A'},
      {value: 20, name: 'B'},
      {value: 36, name: 'C'},
      {value: 10, name: 'D'},
      {value: 10, name: 'E'}
    ]
  }]
};

myChart.setOption(option);

Radar chart example:

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

var option = {
  title: {
    text: '雷达图示例'
  },
  radar: {
    indicator: [
      {name: 'A', max: 10},
      {name: 'B', max: 10},
      {name: 'C', max: 10},
      {name: 'D', max: 10},
      {name: 'E', max: 10}
    ]
  },
  series: [{
    name: '数据',
    type: 'radar',
    data: [
      {value: [5, 8, 9, 7, 6], name: '数据1'},
      {value: [3, 6, 7, 5, 4], name: '数据2'}
    ]
  }]
};

myChart.setOption(option);

Through the above example code, we can according to different needs To create different types of charts, and beautify the style of the charts by adjusting configuration items, such as setting titles, axis styles, adding legends, etc.

To summarize, making a beautiful ECharts chart requires the following steps:

Introduce the ECharts library file.
Create a chart instance, usually using the echarts.init method to pass in an HTML element as a container.
Set the configuration items and data of the chart, define the style of the chart and display data.
Use the setOption method to apply the configuration item to the chart instance and display the chart.

By constantly trying and adjusting configuration items, you can create more beautiful and personalized ECharts charts. I wish you can realize the beautiful chart you imagined as soon as possible!

The above is the detailed content of How to make beautiful ECharts charts. For more information, please follow other related articles on the PHP Chinese website!

JavaScript echarts html apache https

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use pictogram bar chart to display data in EChartsNext article：How to use pictogram bar chart to display data in ECharts

See more

How to make beautiful ECharts charts

Related articles