Echarts学习笔记之入门篇

Echarts学习笔记之入门篇

1. 结构搭建

• 引入文件

// 1. 整体引入
 <script src="./echarts.min.js"></script>
 import  'echarts'；
 import echarts from 'echarts'
 import * as echarts from 'echarts';
 var echarts = require('echarts')
// 2. 按需引入
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

• 创建容器

<div id="container" style="width:500px;height:500px;"></div>

• 初始化echarts实例

var echart = echarts.init(document.getElementById('container'))

• 图表和数据配置
  

// 用 option 描述 `数据`、`数据如何映射成图形`、`交互行为` 等。
// option 是个大的 JavaScript 对象。
var option = {
    // option 每个属性是一类组件。
    legend: {...},
    grid: {...},
    tooltip: {...},
    toolbox: {...},
    dataZoom: {...},
    visualMap: {...},
    // 如果有多个同类组件，那么就是个数组