官方文档
echarts接口文档
官方配置项文档
以上这些都已经说的很详细了
安装
从 npm 获取
npm install echarts --save
从 CDN 获取
版本对应得地址
从 GitHub 获取
dist目录下的echarts.js文件就是
加载顺序
例如:
<div id="box1" class="main">
</div>
<style>
.main{
width: 600px;
height: 600px;
}
</style>
<script type="text/javascript">
let myecharts1 = echarts.init(document.getElementById('box1'))
// 指定图表的配置项和数据
var option = {
...
};
// 使用刚指定的配置项和数据显示图表。
myecharts1.setOption(option);
</script>
注意:在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器,
注意样式加载顺序
调用 echarts.init 时需保证容器已经有宽度和高度
数据转换
给定一个已有的“数据集”(dataset)和一个“转换方法”(transform),echarts 能生成一个新的“数据集”,然后可以使用这个新的“数据集”绘制图
数据转换器 “filter”
在dataset.source中筛选符合条件的,形成新的数据集
dataset: [
{
source: [
['Product', 'Sales', 'Price', 'Year'],
['Cake', 123, 32, 2011],
['Latte', 231, 14, 2011],
['Tofu', 235, 5, 2011],
['Milk Tee', 341, 25, 2011],
['Porridge', 122, 29, 2011],
['Cake', 143, 30, 2012],
['Latte', 201, 19, 2012],
['Tofu', 255, 7, 2012],
['Milk Tee', 241, 27, 2012],
['Porridge', 102, 34, 2012],
['Cake', 153, 28, 2013],
['Latte', 181, 21, 2013],
['Tofu', 395, 4, 2013],
['Milk Tee', 281, 31, 2013],
['Porridge', 92, 39, 2013],
['Cake', 223, 29, 2014],
['Latte', 211, 17, 2014],
['Tofu', 345, 3, 2014],
['Milk Tee', 211, 35, 2014],
['Porridge', 72, 24, 2014]
]
},
{
transform: {
type: 'filter',
config: { dimension: 'Year', '=': 2011 }
// 这个筛选条件表示,遍历数据,筛选出维度( dimension )
// 'Year' 上值为 2011 的所有数据项。
}
}
],
数据转换器sort
“sort” 是另一个内置的数据转换器,用于排序数据。目前主要能用于在类目轴( axis.type: ‘category’ )中显示排过序的数据。
dataset: [
{
dimensions: ['name', 'age', 'profession', 'score', 'date'],
source: [
[' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],
['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],
[' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
[' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],
[' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],
['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
[' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']
]
},
{
transform: {
type: 'sort',
// 按分数排序
config: { dimension: 'score', order: 'asc' }
}
}
],