梗概
- 一个用于显示图表的第三方库
基本概念
- child::echarts 数据集与数据转换
- child::echarts 事件
使用指南
- 先在某一个dom元素内挂载一个图表
- 对于该图表, 设置图标的数据及参数
实例
官网示例
playground
Bar
Sure, here’s a simple example of how you can use ECharts to create a basic bar chart:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Bar Chart Example</title>
<!-- Load ECharts library -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
<!-- Create a container for the chart -->
<div id="barChart" style="width: 600px; height: 400px;"></div>
<script>
// Initialize ECharts instance
var myChart = echarts.init(document.getElementById('barChart'));
// Specify chart configuration and data
var options = {
title: {
text: 'Example Bar Chart'
},
xAxis: {
type: 'category',
data: ['Category A', 'Category B', 'Category C', 'Category D', 'Category E']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70],
type: 'bar'
}]
};
// Set chart configuration and data
myChart.setOption(options);
</script>
</body>
</html>This example creates a simple bar chart with five categories on the x-axis and corresponding values on the y-axis. You can customize the chart further by modifying the options object according to your requirements.
最简单的折线图
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
option && myChart.setOption(option);