Echarts学习笔记（1）

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>