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 相关设置