Vue项目配置ZingChart可视化图标

第一步：安装ZingChart:ZingChart官网，图表比Echarts还丰富

npm install zingchart 或npm install zingchart-vue


p1


第二步:在main.js文件中全局配置

import 'zingchart/es6';

import zingchartVue from 'zingchart-vue';

Vue.component('zingchart', zingchartVue);


p2

第三步：在vue文件中创建一个DIV，盒子内部加入：

<zingchart :data="chartData"></zingchart>


p3

第四步：在script下返回可视化图标数据charData(html中config数据)


p4


最后：所渲染的图标就出来了


©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容