vue项目, 需要使用echart库, 查看文档得知,echart获取方式分为npm, github, cdn等方式,还有在线定制, 再次记录在线定制echarts.js文件后如何使用
1. 在线根据功能定制echarts.js文件,并copy到项目目录下;
2. 在项目的index.html文件中引入
<script type='text/javascript' src='/echarts/echarts.js'></script>
3. 新建echart.vue文件, 实现业务页面;
4. 页面中实现
1) html: <div class="echart-box" id="box"></div>
2) script 中的 methods定义方法, 实现方法
var chartDom = document.getElementById('box0');
var myChart = echarts.init(chartDom); // 此处echarts可以直接用
myChart.setOption(option)// 此处的option就是实例中的内容, 根据业务功能填写即可
完成
记录遇到的另外一个问题:
控制台提示错误: Component title is used but not imported.
import { TitleComponent } from 'echarts/components';
echarts.use([TitleComponent]);
这里面是因为我在在option中设置了title内容, TitleComponent组件与其对应, 但是在线定制的echarts.js没有TitleComponent就报错.
解决方式1: 重新定制echarts.js文件, 让其包含title相关设置;
解决方式2: 删除option中的title 相关设置
