公司如何做自己的网站,企业网站制作规划,游戏模型外包网站,重庆网润集团有限公司一、依赖配置 1、引入echarts相关依赖 也可以卸载原有的#xff0c;重新安装
卸载#xff1a;npm uninstall echarts --save
安装#xff1a;npm install echarts4.8.0 --save 引入水球图形依赖
npm install echarts-liquidfill2.0.2 --save
水球图可参考文档#xff1…一、依赖配置 1、引入echarts相关依赖 也可以卸载原有的重新安装
卸载npm uninstall echarts --save
安装npm install echarts4.8.0 --save 引入水球图形依赖
npm install echarts-liquidfill2.0.2 --save
水球图可参考文档
https://gitcode.net/mirrors/ecomfe/echarts-liquidfill?utm_sourcecsdn_github_accelerator 引入3D效果图依赖
npm install echarts-gl2.0.9 --save
安装完成后在package.json文件中查看如图 2、修改配置文件 在main.js文件中配置如下信息
// ECharts 图表展示
import * as echarts from echarts;
// 球形图
import echarts-liquidfill;
Vue.prototype.$echarts echarts;
配置完成后如图 3、主题风格下载 3.1 在官网下载主题风格
打开官网 Apache ECharts
点击下载-主题下载 然后就可以下载对应的主题配置文件。
也可以点击【定制主题】选择合适的风格下载主题风格如图 选择完成后点下载主题分为JS版本和JSON版本两种方式可根据需要下载 下载完成后把JSON文件放到项目中如图 我这里下载了两个风格可自由选择。 4、代码实现 引用下载好的依赖 以饼图为例大致代码结构可参照官网全部实例地址如下
Examples - Apache ECharts 样例如图 点击一个图形进去可看到源码和文档配置说明如图 配置项说明如图 然后获取到图形的主题结构后引入到代码中 5、小结 Vue2集成Echarts实现可视化图表大致流程就是如上文所述具体开发中可根据自身需求和官网实例以及官网示例参数说明进行调整。
