行测 Linux软件安装 NTFS权限 nginx反向代理 RabbitMQ php ajax qt junit axios photoshop cs3 教程 jquery循环 matlab读取dat文件 mysql查看锁表 java接收数组 mysql建表主键自增长 mysql时间戳转日期 java中substring java数组反转 java获取月份 java在线课程 java格式化字符串 java定义字符串 蓝牙运动耳机排行榜 tar文件怎么打开 火牛软件 无限弹窗bat eml文件阅读器下载 华为交换机学习指南 按键精灵脚本教程 系统工具箱 mysql使用教程 p6软件 文字转语音软件免费版 逗号的作用 羽化快捷键 全能音频转换通 浏览器安卓 戴尔xps怎么样 豌豆代理
当前位置: 首页 > 学习教程  > 编程学习

Vue饼状图

2021/1/9 2:17:01 文章标签: 复合条饼图

在jQuery里面,实现一个折线图,【前端统计图】echarts实现单条折线图 https://www.jianshu.com/p/0354a4f8c563。 现在要实现,VueEcharts实现一个折线图,打开之前的mint项目: 1:在项目里面安装echarts cnpm install echarts --s2:在需要用图…

在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编程资源教程。


本文链接: http://www.dtmao.cc/news_show_1100422.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?