精华内容
下载资源
问答
  • vue使用echarts饼图
    2022-06-13 10:57:50
    <div class="echart" ref="myChart"></div>
    <div class="pie" ref="pie"></div>
    

    vue最后不要直接操作dom,所以我这里选择使用ref

    drawLine() {
          const myChart = this.$echarts.init(this.$refs.myChart)
          myChart.setOption({
            title: { text: '项目数据' },
            xAxis: {
              data: ['筹备阶段', '在建阶段', '停工阶段', '完工阶段', '竣工阶段'],
            },
            yAxis: {
              type: 'value'
            },
            color: '#2196f3',
            series: [
              {
                type: 'bar',
                data: [23, 24, 18, 25, 27],
                showBackground: true,
                barWidth: '50%'
              }
            ],
            tooltip: {  //鼠标悬浮时,设置样式
              trigger: 'axis',
              backgroundColor: 'rgba(32, 33, 36,.7)',
              borderColor: 'rgba(32, 33, 36,0.20)',
              borderWidth: 1,
              textStyle: {
                color: '#fff',
                fontSize: '12'
              },
              axisPointer: { 
                type: 'shadow',
                label: {
                  backgroundColor: '#6a7985'
                }
              },
            }
          })
        },
        initPie() {
          const pie = this.$echarts.init(this.$refs.pie)
          pie.setOption({
            title: {
              text: '人员数据',
              left: 'center'
            },
            color: ['#00BCD4', '#ff5722', '#FF9800'],
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: '企业人员数据',
                type: 'pie',
                radius: ['40%', '70%'],
                data: [
                  { value: 1048, name: '累计用工数', },
                  { value: 735, name: '当前用工数', },
                  { value: 580, name: '管理人员数', },
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })
        }
    
    mounted() {
        this.$refs.basicRef.drawLine()
        this.$refs.basicRef.initPie()
      }
    

    注意: 修改颜色的时候,最后不要使用透明,很容易鼠标悬浮后,就bar消失闪烁
    要带透明度就用rgba

    更多相关内容
  • Laravel5.8+vue 使用echarts 饼图动态获取接口返回数据 使用echarts在我上一篇文章Laravel5.8+vue 使用echarts 话不多说直接上代码吧 <script> //初始化一个空数组方便存放给饼图的数据 var servicedata=[];...

    Laravel5.8+vue 使用echarts 饼图动态获取接口返回数据

    使用echarts在我上一篇文章Laravel5.8+vue 使用echarts

    话不多说直接上代码吧

    <script>
        //初始化一个空数组方便存放给饼图的数据
        var servicedata=[];
        export default {
            name: "Home",
            data() {
                return {
                    myChart: '',
                }
            },
            methods: {
                //请求list接口
                list() {
                    let url = "head/headSchool-list";
                    this.axios.get(url).then(response => {
                        var Data = response.data.data;
                        console.log(Data);
                        //装入接口返回的数据
                        for (var i = 0; i < Data.length; i++) {
                            var obj=new Object();
                            obj.name=Data[i].name;
                            //我这里的value 用的是随机的id值,这里根据需要设置值
                            obj.value=Data[i].id;
                            servicedata[i]=obj;
                        }
                        console.log(servicedata)
                        //设置饼图
                        this.myChart.setOption({
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b}: {c} ({d}%)'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 10,
                                data: servicedata
                            },
                            series: [
                                {
                                    name: '访问来源',
                                    type: 'pie',
                                    radius: ['50%', '70%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: '30',
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    //放入饼图需要的{name:xx,value:xx}方式的数据组
                                    data: servicedata
                                }
                            ]
                        });
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
            mounted() {
                // 基于准备好的dom,初始化echarts实例
                this.myChart = this.$echarts.init(document.getElementById("main1"))
                this.list();
            }
        }
    </script>
    

    这是我接口返回的数据
    在这里插入图片描述
    控制器方面直接返回需要的数据

     $SchoolData = School::query()->paginate(13);  //这里的分页可以不用
     return $SchoolData;
    

    效果如下
    在这里插入图片描述

    展开全文
  • vue+echarts饼图

    2021-09-08 16:18:25
    效果: <template> <!-- 2.为echart准备一个具备大小的容器 --> <div id="stat-model" ...// 1....import * as echarts from 'echarts' // 3.基于准备好的dom,初始化echarts实例 va

    效果:
    在这里插入图片描述

    <template>
      <!-- 2.为echart准备一个具备大小的容器 -->
      <div id="stat-model"
           style="width:200px;height:200px"></div>
    </template>  
    <script>
    // 1.导入echart
    import * as echarts from 'echarts'
    // 3.基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('stat-model'))
    // 4.准备数据和配置项
    var option = {
        // 提示框组件
        tooltip: {
            trigger: 'item',   // trigger 触发方式,放到图形上触发提示
            // 格式化提示内容:a 代表series系列图表名称;b 代表series数据名称 data 里面的name;c 代表series数据值 data 里面的value;d代表 当前数据/总数据的比例
            formatter: "{b} : {c} ({d}%)",
            backgroundColor:'rgba(50,50,50,0.7)',
            borderColor:'rgba(51,51,51)',
            confine: true, // 防止提示框被遮挡
            // 改变标示文字的颜色
            textStyle: {
                 color: '#fff'  
            }
        },
        // 注意颜色写的位置
        color: [
          "#006cff",
          "#60cda0",
          "#ed8884",
          "#ff9f7f",
          "#0096ff",
          "#9fe6b8",
          "#32c5e9",
          "#1d9dff"
        ],
        // 图表中间
        graphic: {
              type: "group",
              top: "middle",
              left: "center",
              height: 80,
              children: [
                {
                  type: "text",
                  left: "center",
                  top: "20%",
                  style: {
                    text: "491",
                    textAlign: "center",
                    textVerticaAlign: "middle",
                    fill: "#fff",  //字体颜色
                    font: "20px Helvetica",
                  }
                },
                
              ]
            },
        // 控制图表
        series: [
            {
                type: 'pie',  // 图表类型
                radius: ['40%', '80%'],  //第一项是内半径,第二项是外半径(通过它可以实现饼形图大小)
                // 图表中心位置 left 50%  top 50%  距离图表DOM容器  在容器中间显示
                center: ["50%", "50%"],
                // 修饰饼形图文字相关的样式 label对象
                label: {
                    show: true,
                    position: 'inner',
                    textStyle : {
                        fontWeight : 300 ,
                        fontSize : 16    //文字的字体大小
                    },
                    formatter: "{b}",
                },
                // 修饰引导线样式
                labelLine: {
                    show: false
                },
                data: [
                    {value: 111, name: 'T3000'},
                    {value: 105, name: 'SU10'},
                    {value: 112, name: 'T2000'},
                    {value: 122, name: 'M1000'},
                    {value: 22, name: 'SH10'},
                    {value: 13, name: 'ST10'},
                    {value: 4, name: 'D10'},
                    {value: 1, name: 'SA10'},
                    {value: 1, name: 'SU20'},
                ]
            }
        ]
    };
    </script>
    
    展开全文
  • vue使用echarts饼图自动轮播

    千次阅读 2022-04-22 14:36:40
    vue使用echarts饼图自动轮播
    <template>
      <div class="pieChart">
          <div class="title">前端感知设备</div>
          <div class="total">
              <span>设备总数</span>
              <countTo
                :startVal='0'
                :endVal='total'
                :duration='3000'
                class="count"
             ></countTo>
              <span>台</span>
          </div>
          <div id="pie-chart" v-if="pieChartData.length > 0"></div>
          <c-empty text="暂无数据!" size="16px" v-else></c-empty>
      </div>
    </template>
    
    <script>
    import countTo from 'vue-count-to'
    import * as echarts from 'echarts'
    export default {
      props: ['queryObj'],
      components: {
        countTo
      },
      data() {
        return {
          pieChart: null,
          total: 0,
          pieChartData: [],
          timer: null,
          count: 0
        }
      },
      watch: {
        'queryObj': {
          handler(val) {
            this.total = val.totalCount
            if (val.dtoList.length > 0) {
              this.pieChartData = val.dtoList.map(item => {
                return {
                  name: item.functionTypeCn,
                  value: item.totalCount
                }
              }).sort(this.compare('value'))
              this.$nextTick(() => {
                this.init()
              })
            }
          },
          deep: true
        }
      },
      mounted() {
    
      },
      methods: {
        compare(key) {
          return function(a, b) {
            var val1 = a[key]
            var val2 = b[key]
            return val2 - val1
          }
        },
        init() {
          let chart = document.getElementById('pie-chart')
          if (chart) {
            this.pieChart = echarts.init(chart)
            let option = {
              tooltip: {
                formatter: (params) => {
                  return `<div>${params.name}</div>` +
                  params.marker +
                  `<span style="font-size: 12px;">${(params.value / this.total * 100).toFixed(2)} %</span>` +
                  `<p>${params.value}台</p>`
                }
              },
              legend: {
                selectedMode: false, // 取消右侧图例占击显示和隐藏指定项
                icon: 'circle', // 图例的形状为圆形
                orient: 'vertical',
                top: 10,
                left: -10, // 应该是与左侧有多少间隔
                y: 'center', // 垂直居中
                itemHeight: 10, // 修改icon图形大小
                formatter: (name) => {
                  let data = this.pieChartData
                  let total = 0
                  let target
                  for (let i = 0, l = data.length; i < l; i++) {
                    total += data[i].value
                    if (data[i].name === name) {
                      target = data[i].value
                    }
                  }
                  let arr = [
                    name,
                    ((target / total) * 100).toFixed(2) + '%'
                  ]
                  return arr.join(' ')
                },
                textStyle: {
                  color: '#2E2E71'
                }
              },
              series: [
                // 主要层展示
                {
                  name: 'Access From',
                  type: 'pie',
                  radius: ['40%', '70%'],
                  center: ['68%', '50%'],
                  color: ['#5E61FB', '#25B3F5', '#FF6959', '#FEBA48', '#AED747', '#4CD2A7', '#89A1FD', '#AB64F4', '#2FCA96', '#5EB2FB'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 2
                  },
                  label: {
                    normal: {
                      show: false,
                      position: 'center',
                      color: '#4c4a4a',
                      formatter: parmes => {
                        return '{total|' + parmes.name + '}' + '\n\r' + '{active|' + parmes.value + '}'
                      },
                      rich: {
                        total: {
                          fontSize: 13,
                          color: '#2E2E71',
                          padding: [4, 0, 4, 0]
                        },
                        active: {
                          fontFamily: 'Bahnschrift',
                          fontSize: 25,
                          color: '#3D3D78',
                          fontWeight: 'bold',
                          padding: [4, 0, 4, 0]
                        }
                      }
                    }
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: '14',
                      fontWeight: 'bold'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: this.pieChartData
                },
                // 边框设置
                {
                  radius: ['60%', '70%'],
                  center: ['68%', '50%'],
                  type: 'pie',
                  label: {
                    normal: {
                      show: false
                    },
                    emphasis: {
                      show: false
                    }
                  },
                  labelLine: {
                    normal: {
                      show: false
                    },
                    emphasis: {
                      show: false
                    }
                  },
                  animation: false,
                  tooltip: {
                    show: false
                  },
                  itemStyle: {
                    normal: {
                      color: 'rgba(250,250,250,0.7)'
                    }
                  },
                  data: [
                    {
                      value: 1
                    }
                  ]
                }
              ]
            }
            this.pieChart.clear() // 每次清空上一次
            clearInterval(this.timer) // 首次渲染清空计时器
            this.timer = null
            this.pieChart.resize()
            this.pieChart.setOption(option)
            this.dysnTime()
            this.pieChart.on('mouseover', e => {
              clearInterval(this.timer)
              this.timer = null
              this.pieChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: this.count
              })
              if (e.dataIndex === this.count) {
                this.pieChart.dispatchAction({
                  type: 'highlight', // 启动高亮
                  seriesIndex: 0,
                  dataIndex: this.count
                })
              }
            })
            this.pieChart.on('mouseout', e => {
              this.dysnTime()
            })
          }
        },
        dysnTime() {
          this.timer = setInterval(() => {
            this.pieChart.dispatchAction({
              type: 'downplay', // 关闭高亮
              seriesIndex: 0,
              dataIndex: this.count
            })
            this.count++
            if (this.count === this.pieChartData.length) {
              this.count = 0
            }
            this.pieChart.dispatchAction({
              type: 'highlight', // 启动高亮
              seriesIndex: 0,
              dataIndex: this.count
            })
          }, 2000)
        }
      },
      beforeDestroy() {
        clearInterval(this.timer)
        this.timer = null
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .pieChart{
        width: 330px;
        .title {
          font-weight: 600;
          font-size: 18px;
          margin-bottom: 12px;
          color: var(--color-spec-secondary);
        }
        .total{
            .count {
                color: var(--color-spec-secondary);
                font-size: 18px;
                font-weight: bold;
            }
            span{
                color: var(--color-spec-secondary);
                font-family: '.PingFang SC';
            }
        }
        #pie-chart{
            width: 100%;
            height: 250px;
        }
    }
    </style>
    

     

    展开全文
  • 本文主要介绍echarts饼图各个板块之间间的空隙怎么实现 关键代码 itemStyle: { normal: { borderWidth: 1, // 间距的宽度 borderColor: '#fff', //背景色 } }, 代码层级 效果图 到此这篇关于echarts饼图各个...
  • vue echarts饼图使用接口数据,就是简单的对接接口,不用创建组件
  • 在echarts最后面添加上这段代码就可以了 function eConsole(param) {  //alert(option.series[0].data.length)...以上这篇echarts饼图扇区添加点击事件的实例就是小编分享给大家的全部内容了,希望
  • 我在使用vue渲染echarts的时候,出现了图中这样的情况,想请问一下这是由什么原因造成的啊 <br>![图片说明](https://img-ask.csdn.net/upload/202010/13/1602577434_71433.jpg) ![图片说明]...
  • 1、首先echarts绘图需要有个盒子来盛它 这就是那个盒子 <div class="echarts" ref='topPie'></div> 在data中注册 echartsPie:'', // 扇形图实例 // 扇形图配置 optionPie:{ // animation: ...
  • Vue-echarts饼图案例(01)

    2022-07-19 16:56:43
    vue echarts实现订单统计饼图,自定义实现label效果
  • <span style="font-weight:600">操作系统</span> <div class="echart" id="system-echart" :style="{ float: 'left', width: '...import * as echarts from "echarts"; import { pieEchart } from.
  • 前言: 由于有地方需要使用饼图展示, 就搜索了下, 发现Echarts 很好用. 就直接拿来用了. Echarts官网 https://echarts.apache.org/zh/index.html Echarts安装 npm install echarts --save 饼图组件 <template...
  • vue echarts饼图环形 (随着legend动态显示数据总数)
  • vue+echarts饼图让label文字换行

    千次阅读 2021-09-17 09:20:05
    mounted() { this.initEcharts(this.pieChartList, this.index) }, methods: { initEcharts(item, index) { ... _this.myEcharts = echarts.init(document.getElementById(`myChart${index}`)) ...
  • vue echarts饼图封装

    2022-05-31 15:47:35
    // 我是饼图 const echarts = require('echarts/lib/echarts') require('echarts/lib/chart/line') // import 'zrender/lib/svg/svg' export function drawChartPie(param, element) { const myChart = echar
  • <template> <div> <div id="myChart" :style="{ width: '600px', height: '400px' }"></div> </div> </template> <script> export default { ... this.d...
  • VUE+ECharts 制作饼图

    千次阅读 2022-03-07 17:49:24
    Vue+Echarts实现饼图
  • vue+echarts实现饼图的自定义标签.zip,index.vue,pie.gif
  • vue引用echarts饼图不显示图例

    千次阅读 2021-03-01 11:19:01
    有被自己聪明到 附全部代码 <template> <div class="Echarts" id="Echarts"></div> </template> <script> let echarts = require('echarts/lib/echarts'); // 引入饼状图组件 require('echarts/lib/chart/pie'...
  • myChart.setOption(data); myChart.dispatchAction({ type: 'highlight', dataIndex: 0 }); // dataIndex:默认选中项索引值 myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, position: [120, 220], ...
  • vue中引入Echarts饼图

    千次阅读 2022-03-25 11:36:16
    Echarts饼图
  • 先展示效果图 主要代码在emphasis的label标签里 圆环中间出现的文本内容写在 label 的 formatter ;...下图来自echarts官网的配置项手册 代码如下 <template> <div ref="pieCon" style=
  • 效果: 首先安装 echarts 在需要的页面使用
  • 先给大家看一下实现的效果。 3个饼图排成一排,点击各个饼图内的颜色块会在...下面贴一下代码,各位看官直接在本地引入一下echarts就可以看到交互效果了,没有做屏幕适配,具体看逻辑实现吧,各位根据demo举一反三
  • 取消点击事件两种方法: ... myChart.off(‘legendselectchanged’) myChart.on(‘legendselectchanged’, function (params) { myChart.setOption({ legend:{selected:{[params.name]: true}} ...&l
  • vue echarts 饼图/柱状图添加点击事件
  • vue echarts饼图自动选中 点击选中

    千次阅读 2021-11-26 08:55:24
    UI框架为ant-vue index.vue主页 <template> <div> <a-card style="margin-bottom: 20px;"> <clickPieChart ref="chart1" @param="getParam1" :chartName="'chartName1'" /> <...
  • VueEcharts饼图数据为0时如何不显示label与labelLine

    千次阅读 多人点赞 2021-05-26 20:54:31
    【前言】 在项目开发过程中,遇到这样的问题:当data中的value值为0时,在饼状图上是不占百分比的,例如下图: 当value值为0时,如何让label与labelLine不显示呢? 【内容】 ... let data

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,881
精华内容 1,152
关键字:

vue使用echarts饼图