echarts快速上手（一）

eCharts

引入

echarts 是一个使用 JavaScript 实现的开源可视化库

其包含了很多行业的图表，范围广泛，且兼容性极高。

官方文档：https://echarts.apache.org/

如果我们仅在原生项目中使用，我们可以下载echarts直接引用或者通过CDN引用

若我们在框架如vue中使用，我们将会通过npm获取echarts

创建

接下来我们就可以开始创建echarts图表

1.首先我们需要一个dom容器来放置图标

<div id="main" style="width: 600px;height:400px;"></div>

设置它的高宽以及其他属性

2. 基于我们准备好的dom，初始化dom实例

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

3.接下来就可以开始绘制图表啦

（1）设置标题

title: {
    text: '第一个 ECharts 实例'
}

（2）设置提醒信息

tooltip: {},

（3）图例组件展现了不同系列的标记，颜色和名字。

legend: {
    data: [{
        name: '系列1',
        // 强制设置图形为圆。
        icon: 'circle',
        // 设置文本为红色
        textStyle: {
            color: 'red'
        }
    }]
}

（4）在x轴显示的数据

xAxis: { data: ["js","css","ts"] }

（5）在y轴显示的数据

yAxis: {}

（6）每个系列通过 type 决定自己的图表类型:

series: [{
    name: '使用率',  // 系列名称
    type: 'bar',  // 系列图表类型
    data: [5, 20, 36]  // 系列中的数据内容
}]

一个图表就这么创建起来了

其中图表的种类有很多种

• type: 'bar'：柱状/条形图
• type: 'line'：折线/面积图
• type: 'pie'：饼图
• type: 'scatter'：散点（气泡）图
• type: 'effectScatter'：带有涟漪特效动画的散点（气泡）
• type: 'radar'：雷达图
• type: 'tree'：树型图
• type: 'treemap'：树型图
• type: 'sunburst'：旭日图
• type: 'boxplot'：箱形图
• type: 'candlestick'：K线图
• type: 'heatmap'：热力图
• type: 'map'：地图
• type: 'parallel'：平行坐标系的系列
• type: 'lines'：线图
• type: 'graph'：关系图
• type: 'sankey'：桑基图
• type: 'funnel'：漏斗图
• type: 'gauge'：仪表盘
• type: 'pictorialBar'：象形柱图
• type: 'themeRiver'：主题河流
• type: 'custom'：自定义系列

异步

其中异步加载数据是echarts中比较重要的地方，有时候我们需要动态地更新我们所要加载的表格

在我们通过通信获取到我们想要的数据后，我们就可以开始更新我们的图表了

myChart.setOption({
                series : [
                    {
                        name: '异步加载',
                        type: 'pie',   
                        radius: '55%',  
                        data:data.data_pie
                    }
                ]
            })