Vue饼状图

在jQuery里面，实现一个折线图，【前端统计图】echarts实现单条折线图 https://www.jianshu.com/p/0354a4f8c563。

现在要实现,Vue+Echarts实现一个折线图,打开之前的mint项目:

1:在项目里面安装echarts

cnpm install echarts --s

2：在需要用图表的地方引入

import echarts from 'echarts'

3：打开my.vue 继续写代码，代码如下：

<template> <!--为echarts准备一个具备大小的容器dom--> <div id="main" style="width: 600px;height: 400px;"></div> </template> <script> import echarts from 'echarts' export default { name: '', data () { return { charts: '', opinion:['男','女'], opinionData:[ {value:335, name:'男'}, {value:310, name:'女'}, ] } }, methods:{ drawPie(id){ this.charts = echarts.init(document.getElementById(id)) this.charts.setOption({ tooltip: { trigger: 'item', }, legend: { orient: 'vertical', x: 'left', data:this.opinion }, series: [ { name:'性别', type:'pie', radius:['50%','70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'blod' } } }, labelLine: { normal: { show: false } }, data:this.opinionData } ] }) } }, //调用 mounted(){ this.$nextTick(function() { this.drawPie('main') }) } } </script> <style scoped> * { margin: 0; padding: 0; list-style: none; } </style>

这个时候，可以看到，加载出的饼状图了，后面可以继续进行完善。

---

原文作者：祈澈姑娘 关注「编程微刊」公众号 ，在微信后台回复「小程序」，获取小程序开发全套资料和500G编程资源教程。