第一:直接引用Echarts(柱状图为栗子)
①在点击打开下载页面中按需下载版本;然后赋值进项目引用
②定义一个容器设置ID用来实例化Echarts,视图就绘制在你定义的容器中(默认是canvas画布绘制视图)
③操纵DOM节点实例化Echarts并且设置数据属性
④绘制出来的基本模型(想绘制不同的形状需要到官方文档查看对应的图形的属性赋值方式)
第二:在Vue中使用Echarts
①通过脚手架安装Echarts
npm install echarts --save
②引入Echarts模块(在需要使用的地方直接引入模块,不用到main.js中配置)
1,全部引入
var echarts = require('echarts'); // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main'));
2,按需引入
// 引入 ECharts 主模块 var echarts = require('echarts/lib/echarts'); // 引入柱状图 require('echarts/lib/chart/bar'); // 引入提示框和标题组件 require('echarts/lib/component/tooltip'); require('echarts/lib/component/title'); // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main'));
属性设置跟上面的一样
echarts自适应盒子宽高????