echarts基本使用

原生项目中

第一步：引入echart.js、echarts.css等文件。

第二步：在html文件中：

<div id="echarts" style="width:100%;height:430px;"></div>

第三步：在JS文件中：

1.获取元素：

let echartsDiv = document.getElementById('echarts');

2.注册元素：

let echartsInit = echarts.init(echartsDiv);

3.开启loading

echartsInit.showLoading();

4.配置参数

echarts_option = {};

5.渲染echarts

echartsInit.setOption(echarts_option,true);

6.停止loading

echartsInit.hideLoading();

Vue项目中

第一步：下载----npm install echarts

第二步：main.js引入

const echarts = require('echarts');
import 'echarts-gl/dist/echarts-gl.min.js';
Vue.prototype.$echarts = echarts

第三步：XX.vue----中

<div ref="region_charts" style="width:100%;height：100%"></div>

第三步：XX.vue----中

1.获取元素并注册

let myCharts = this.$echarts.init(this.$ref.region_charts);

2.配置参数

let option= {...}

3.渲染echarts

myCharts.setOption(option);