Echarts官网
https://echarts.apache.org/zh/index.html
获取Echarts
通过npm获取Echarts,npm i echarts --save
官方文档说明
- API是全部属性和方法(公用的属性和方法)
API
Echarts中的init方法
创建一个 ECharts 实例,返回 echartsInstance,不能在单个容器上初始化多个 ECharts 实例。
echartsInstance中的方法
通过 echarts.init 创建的实例。
-
setOption 指定图表的类型
-
setOption里面详细的参数在配置项里面
-
GL也是setOption中里面的东西,它是关于3d的配置
-
dispatchAction 和原声里面的addeventListener类型,用于添加行为(事件)
-
action 在action(行为)里面。legend是图例
行为(action)是通过dispatchAction来添加的,事件(event)是通过on来添加的
例子
例子中的echarts使用官方下载的echarts.js,通过scripts标签引入
最后效果
代码:
<div class="echarts1"></div>
<div class="echarts2"></div>
<script>
// console.log(echarts);
//柱状图
const myEchartsInstance = echarts.init(document.getElementsByClassName('echarts1')[0]);
myEchartsInstance.setOption({
title: {
text: 'Most Frequent Repeats'
},
legend: { //图例
data: ['Frequency'],
},
xAxis: { //x轴的配置
data: ['A', 'AC', 'AAAAT', 'AGGG', 'GC']
},
yAxis: {},
series: { //系列列表
name: 'Frequency', //与legend.data一致
type: 'bar', //图表的类型
data: ['10', '23', '100', '300', '2000'], //图表的数据
}
})
//饼图
const myEchartsInstance2 = echarts.init(document.getElementsByClassName('echarts2')[0]);
myEchartsInstance2.setOption({
title: {
text: 'Motif size distribution'
},
legend: { //图例
data: ['series'],
},
series: { //系列列表
name: 'series0', //与legend.data一致
type: 'pie', //图表的类型
// roseType:'angle',
data: [{
value:706849,
name:'Mono'
},{
value:343591,
name:'Di'
},{
value:203874,
name:'Tri'
},{
value:597432,
name:'Tetra'
},{
value:814359,
name:'Penta'
},{
value:1914509,
name:'Hexa'
}], //图表的数据
}
})
</script>