第一步:安装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
最后:所渲染的图标就出来了