vue echart 饼图

最新推荐文章于 2023-07-21 14:57:19 发布
最新推荐文章于 2023-07-21 14:57:19 发布
阅读量1k 收藏 2
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jz1993/article/details/90113444
版权 
<!-- 自定义 echart 组件 -->
<template>
  <div>
    <!-- echart表格 -->
    <div :id="id" class="myChart" :style="echartStyle"></div>
  </div>
</template>
<script>
  export default {
    props: {
      // 样式
      echartStyle: {
        type: Object,
        default(){
          return {}
        }
      },
      // 标题文本
      titleText: {
        type: String,
        default: ''
      },
      // 提示框键名
      tooltipFormatter: {
        type: String,
        default: ''
      },
      // 扇形区域名称
      opinion: {
        type: Array,
        default(){
          return []
        }
      },
      // 提示框标题
      seriesName: {
        type: String,
        default: ''
      },
      // 扇形区域数据
      opinionData: {
        type: Array,
        default(){
          return []
        }
      },
      id:{
        type: String,
        default: ''
      }
    },
    data(){
      return {
        //
      }
    },
    mounted(){
      this.$nextTick(function() {
        this.drawPie(this.id);
      });
    },
    methods: {
      // 监听扇形图点击
      eConsole(param) {
        // 向父组件传值
        this.$emit("currentEchartData",param.name);
      },
      // 绘制饼状图
      drawPie(id){
        this.charts = this.$echarts.init(document.getElementById(id));
        this.charts.on("click", this.eConsole);
        this.charts.setOption({
          title: {
            text: this.titleText, // 标题文本
            left: 30,
            top:10,
            textStyle:{
                fontSize:16,
                fontWeight:400
            }
          },
          tooltip : {
            trigger: 'item',
            // formatter: "{a} <br/> " + this.tooltipFormatter + ":{c} ({d}%)"
            formatter: this.tooltipFormatter + ":{c} ({d}%)"
          },
          legend: {
            orient : 'vertical',
            right:20,
            bottom:20,
            type:'scroll',
            // left: 'center',
            data: this.opinion // 扇形区域名称
          },
          series : [
            {
              name:this.seriesName,  // 提示框标题
              type: 'pie',
              radius : '65%',
              center: ['35%', '50%'],
              selectedMode: 'single',
              data:this.opinionData, // 扇形区域数据
              itemStyle:{
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
              },
              // normal:{ 
              //     label:{ 
              //         show: true, 
              //         formatter: '{b} : {c} ({d}%)' 
              //     }, 
              //     labelLine :{show:true} 
              // } 
            }
          ],
          color:['#77A1E5', '#449A2A', '#24CBE5', '#8BBC21', '#C42525', '#058DC7', '#FF9655', '#DDDF00']
        })
      }
    }
  }
</script>
<style>
  .myChart{
    width: 47%;
    height:300px;
    float:left;
    margin:0 0 2% 2%;
    border:1px solid #e1e1e1;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -ms-border-radius:4px;
    border-radius:4px;
  }
</style>

https://www.cnblogs.com/crazycode2/p/7902813.html

<template>
        <div class="ux-layout-main" style="padding: 25px 0px 25px 25px;">
            <div style="margin-bottom: 10px;" class="clearfix">
                <ux-tabs @tab-click="onTabClick">
                    <template v-for="platformModule in platformModuleArray">
                        <ux-tab-pane :tab="platformModule.ptiName" :name="platformModule.ptiId + ''">
                            <template v-if="platformModule.moduleVersions">
                                <template v-for="moduleVersion in platformModule.moduleVersions">
                                    <!-- 内容 -->
                                    <m-echarts :id="platformModule.ptiId + moduleVersion.module"
                                    :echartStyle="s"
                                    :titleText="moduleVersion.module + '版本分布图'"
                                    :tooltipFormatter="b"
                                    :opinion="moduleVersion.versions"
                                    :seriesName="d"
                                    :opinionData="moduleVersion.lst"
                                    v-on:currentEchartData="getEchartData"></m-echarts>
                                </template>
                            </template>
                        </ux-tab-pane>
                    </template>
                </ux-tabs>
<ux-form layout="inline">
                                <ux-form-item label="机房">
                                    <ux-select v-model="searchData.labInfo" name="labInfo" style="width: 188px;" placeholder="请选择" @change="onSelectedDrug">
                                        <ux-option 
                                            v-for="lab in labInfos" 
                                            :key="lab.labId"
                                            :label="lab.labName"
                                            :value="lab.labId">
                                        </ux-option>
                                    </ux-select>
                                </ux-form-item>

                                <ux-form-item label="节点">
                                    <ux-select v-model="searchData.node" name="node" style="width: 188px;" placeholder="请选择">
                                        <ux-option 
                                            v-for="nodeInfo in nodeInfos" 
                                            :key="nodeInfo.id"
                                            :label="nodeInfo.name"
                                            :value="nodeInfo.id">
                                        </ux-option>
                                    </ux-select>
                                </ux-form-item>

                                <ux-form-item>
                                    <ux-input v-model="searchData.version" placeholder="请输入版本号"/>
                                </ux-form-item>

                                <ux-form-item>
                                    <ux-button type="primary">查询</ux-button>
                                </ux-form-item>

                                <ux-form-item>
                                    <ux-button type="primary" @click="()=>reset()">重置</ux-button>
                                </ux-form-item>
                            </ux-form>

                            <article class="doc" style="margin-top:10px;">
                                <ux-table :columns="columns" v-model="data" :loading="loading" size="middle" bordered :row-selection="rowSelection"/>
                            </article>
                            <div>
                                <div class="search-version">
                                    <span >已选择{{rowSelection.selectedRowKeys.length}}项</span>
                                    <template>
                                        <ux-checkbox v-model="cChecked" @change="searchServerId" label="仅显示已选择项"/>
                                        <ux-popconfirm title="本次操作建议不超过10条记录查询，坚持本次操作?" :disabled="rowSelection.selectedRowKeys.length < 10" @confirm="onConfirm" @cancel="onCancel">
                                            <ux-button type="primary" @click="()=>batchSearchVersion()">批量查询版本号</ux-button>
                                        </ux-popconfirm>
                                    </template>
                                </div>
                                <div class="pagination-css" style="float:right;margin: 15px 8px 0px 0px;">
                                    <ux-pagination 
                                    show-quick-jumper 
                                    show-size-changer 
                                    :page-size-options="[10, 20, 40, 50, 60, 100]" 
                                    @page-size-change="pageSizeChange" 
                                    :show-before-total="showBeforeTotal"
                                    :current="pageNum"
                                    :page-size="pageSize"
                                    :total="dataTotal">
                                    </ux-pagination>
                                </div>
                            </div>
            </div>
        </div>
</template>
<script>

    import service from 'servicePath/index';
    import mEcharts from 'viewsPath/versionMgn/Echarts.vue';
    import UxMessage from '@suning/uxcool/es/message';

    const options = {
        // tooltip: {
        //     trigger: 'item',
        //     // formatter: '{b} &ensp; {c} <br>{d}%',
        //     formatter: '{b} {c} {d}%',
        // },
        // legend: {
        //     show: false,
        // },
        // series: [
        //     {
        //         name: '未处理事件',
        //         type: 'pie',
        //         radius: '55%',
        //         center: ['50%', '50%'],
        //         data: [{ value: 30, name: '灾难' }, { value: 80, name: '警告' }, { value: 40, name: '严重' }],
        //     },
        // ],
    };

    const defaultSearchData = {
        labInfo: null,
        platform: null,
        node: null,
        version : null,
        ids : null,
        flushFlag : 0,
    }


    function getCols() {
        return [
        {
            key: 'labName',
            title: '机房',
            dataIndex: 'labName',
            cellRender(text, record) {
                return {text};
            },
        },
        {
            key: 'nodeName',
            title: '节点',
            dataIndex: 'nodeName',
            cellRender(text, record) {
                return {text};
            },
        },
        {
            key: 'serverName',
            title: '机器',
            dataIndex: 'serverName',
            cellRender(text, record) {
                return {text};
            },
        },
        {
            key: 'version',
            title: '版本',
            dataIndex: 'version',
            cellRender(text, record) {
                return {text};
            },
        }];
    }

    function getData() {
        var params = {
            platform : this.searchData.platform,
            labInfo : this.searchData.labInfo,
            node : this.searchData.node,
            version : this.searchData.version,
            flushFlag : this.searchData.flushFlag,
            ids : this.searchData.ids,
            rows : this.pageSize,
            page : this.pageNum,
        }
        console.info("getData() platform = ", this.searchData.platform, 
        ", labInfo = ", this.searchData.labInfo, " , node = ", this.searchData.node, " , version = ", this.searchData.version, 
        " , flushFlag = ", this.searchData.flushFlag, 
        " , ids = ", this.searchData.ids, " , rows = ", this.pageSize, " , page = ", this.pageNum);
        service.getMachineVersionInfo(params).then((data) => {
            this.dataTotal = data.total;
            this.data = data.rows;
            this.loading = false;
        });
    }

    export default {
        components: {
            mEcharts
        },
        data() {
            return {
                platformModuleArray:[],
                options,
                // a:'水果销售统计',
                b:'版本数量',
                // c:['香蕉','苹果','橘子'],
                d:'',
                // e:[
                //     {value:3, name:'香蕉'},
                //     {value:3, name:'苹果'},
                //     {value:3, name:'橘子'}
                // ],
                s: {
                    height: ''
                },
                searchData: {
                    ...defaultSearchData,
                },
                labInfos : [],
                nodeInfos : [],
                pageSize : 10,
                pageNum : 1,
                columns : [],
                data : [],
                loading: true,
                dataTotal: 0,
                rowSelection: {
                    selectedRowKeys: [],
                    onChange(selectedRowKeys, selectedRow, op, prevSelectRowKeys) {
                        this.selectedRowKeys = selectedRowKeys;
                    }
                },
                cChecked : false,
                confirm : false,
            };
        },
        methods: {
            getAllPlatformModule(){
                return service.getAllPlatformModule().then((data) => {
                    if(data && data.length >= 0){
                        this.platformModuleArray = data;
                        this.searchData.platform = data[0].ptiId;
                        this.getNodeInfo();
                    }
                });
            },
            getEchartData(val){
                console.log(val);
            },
            getEffectInfolab(){
                return service.getEffectInfolab().then((data) => {
                    this.labInfos = data;
                });
            },
            getNodeInfo(){
                this.searchData.node = "";
                var params = {
                    platform : this.searchData.platform,
                    labInfo : this.searchData.labInfo,
                }
                console.info("getNodeInfo() platform = ", this.searchData.platform, " , labInfo = " + this.searchData.labInfo);
                return service.getNodeInfo(params).then((data) => {
                    this.nodeInfos = data;
                });
            },
            showBeforeTotal(total, pageSize, totalPage, pageNo, range) {
                document.body.scrollTop = 0;
                document.documentElement.scrollTop = 0;
                this.loading = true;
                this.pageNum = pageNo;
                getData.call(this);
                // return "共" + total + "条, 每页显示" + pageSize + "条, 共" + totalPage + "页";
                return "共" + total + "条记录";
            },
            pageSizeChange(current, size) {
                this.pageSize = size;
            },
            onSelectedDrug(){
                this.getNodeInfo();
            },
            reset(){
                this.rowSelection.selectedRowKeys = [];
                this.cChecked = false;
                this.searchData.labInfo = null;                
                this.searchData.node = null;
                this.searchData.version = null;
                this.searchData.ids = null;
                this.searchData.flushFlag = 0;
                this.pageNum = 1;
                this.getNodeInfo();
            },
            onTabClick(args) {
                this.searchData.platform = args;
                this.reset();
            },
            searchServerId(e){
                if(e.target.checked){
                    this.searchData.ids = this.rowSelection.selectedRowKeys.join(",");
                    this.data = getData.call(this);
                } else{
                    this.reset();
                }
            },
            batchSearchVersion(){
                if(this.rowSelection.selectedRowKeys.length == 0){
                    UxMessage.warning('请选择机器进行批量查询版本号操作！');
                } else if(this.rowSelection.selectedRowKeys.length <= 10){
                    console.info(1111);
                    this.searchData.ids = this.rowSelection.selectedRowKeys.join(",");
                    getData.call(this);
                } else if(this.rowSelection.selectedRowKeys.length > 10 && this.confirm){
                    console.info(2222);
                    this.confirm = false;
                    this.searchData.flushFlag = 1;
                    this.searchData.ids = this.rowSelection.selectedRowKeys.join(",");
                    getData.call(this);
                    this.searchData.flushFlag = 0;
                }
            },
            onConfirm() {
                console.log('confirm');
                this.confirm = true;
                this.batchSearchVersion();
            },
            onCancel() {
                this.confirm = false;
            },
        },
        created() {
            this.getAllPlatformModule();
            this.getEffectInfolab();
            this.columns = getCols.call(this);
            this.data = getData.call(this);
        },
        mounted(){

        }
    };
</script>
<style scoped>
    .clearfix:before,
    .clearfix:after {
        content:"";
        display:table;
    }
    .clearfix:after {
        clear:both;
    }
    .search-version {
        float:left;
        margin:15px 0 0 8px;
    }
    .search-version>span {
        margin-right:10px;
    }
</style>

 

scaling_heights
关注
专栏目录
vue echart图的的使用
qxq54321的博客
09-25 218
一、安装echarts npm install echarts --save 二、引入 在main.js中引入 // 引入echarts图 import echarts from 'echarts' Vue.prototype.$echarts = echarts 三、在组件中使用 1.引入 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts'); require('echarts/lib/chart/lin
vue饼图统计_vue实用echart饼图legend显示百分比
weixin_39991305的博客
01-14 1148
vue使用echart的饼图数据部分展示百分比效果图实现源码option = {title : {text: '某站点用户访问来源',subtext: '纯属虚构',x:'center'},tooltip : {trigger: 'item',formatter: "{a} {b} : {c} ({d}%)"},legend: {orient: 'vertical', // 布局方式，默认为水平布...
vue中使用ECharts实现饼图
CESATE的博客
04-21 5129
vue中使用ECharts实现饼图 效果： 1.安装echarts和引入 1.安装echarts npm install echarts --save 2.引入 //引入饼状图 import * as echarts from 'echarts' //注册全局 Vue.prototype.$echarts = echarts 3.使用 html片段： <div :style="piestyle"> <el-card style="margin-left: 150px;mar
Vue + EChart之饼图详解
weixin_43569405的博客
10-18 1万+
Vue + EChart之饼图详解 1.安装echarts项目依赖 npm install echarts --save //或者 npm install echarts -S 2.创建图表 <template> <div> <div id="main" style="width:900px ;height:300px;"></div> &lt...
Vue+Echarts: 实现饼状图的详细教程
七一
03-10 1万+
4. 在模板中绘制饼图 最后，在 Vue 组件的模板中，你需要添加一个用来呈现饼图的 div 元素，并通过 ref 属性引用它。然后，你可以在模板中使用这个 ref 来调用 ECharts 实例。1、安装 ECharts 首先，你需要在项目中安装 ECharts。2、创建一个 ECharts 实例 在 Vue 组件中，你可以通过引入 ECharts 库，然后在组件中使用。方法中，你可以为饼图配置 ECharts 配置项。例如，你可以设置饼图的颜色、大小、数据等。3、配置 ECharts 在。
在vue中使用echart图表
最新发布
wzk17631391315的博客
07-21 439
1. 要在 Vue 中使用 ECharts，你需要先安装 ECharts 库，并在组件中引入和使用它。接下来，你可以根据 ECharts 的文档，配置你的图表选项和数据，将其赋值给。在上面的代码中，我们首先在模板中添加了一个具有特定宽度和高度的。将配置项应用到图表实例中，从而显示图表。4.js处理echarts。钩子函数中，我们调用。方法中，我们首先通过。元素的引用，然后使用。方法创建一个图表实例。2.引入echarts。元素，用于容纳图表。
【JavaScript源代码】vue实现echart饼图legend显示百分比的方法.docx
12-30
本篇文档将介绍如何在Vue项目中使用ECharts来创建一个饼图，并在图例（Legend）上显示每个数据项的百分比。 首先，你需要在Vue组件中引入ECharts库。通常，这可以通过npm或yarn安装完成，然后在项目中通过import...
VUE中 ECHART饼图各扇区间加空格 及 消除鼠标放到扇区上隐藏第一行
moyuhao的博客
06-18 905
1、饼图的扇区间加空白间隔 series : [{ name: '', type: 'pie', radius: ['35%', '60%'], center: ['50%', '50%'], itemStyle: { normal: { borderWidth: 4, //扇区间加间隔 borderColor: '#ffffff', //间隔为白色 la.
vue实用echart饼图legend显示百分比
ying940718的博客
07-17 1万+
vue使用echart的饼图数据部分展示百分比 效果图 实现源码 option = { title : { text: '某站点用户访问来源', subtext: '纯属虚构', x:'center' }, tooltip : { trigger: 'item', formatter: "{a...
echart vue 嵌套饼图_vue2.0实现echarts饼图（pie）效果展示
weixin_33303537的博客
01-26 1045
最近做的项目需要饼状图展示数据的功能，于是便引入echarts做了一个饼状图的效果展示。由于只用到echarts其中的饼图，所以就单独在需要的模块引用，避免全局引用影响性能，减少不必要的加载。一.使用 cnpm 安装 Echartscnpm install echarts -S二.HTML部分课程分布图(部门统计，岗位统计，人员统计，分类统计，类型统计)三.CSS部分.echarts-conten...
vue中使用echart（图表）
weixin_44953928的博客
06-05 1381
echart
如何在vue中使用echart图表
热门推荐
前端探险家的博客
05-11 4万+
人狠话不多，先上效果图！ 以上都是在项目中经常使用到的图标，地图的引入下一期会特别介绍！ echarts中文官网 官网链接点击查看：ECharts 其实官网中有在项目中使用的详细步骤，大家也可以通过对官网的学习来使用echarts,毕竟人家比比我介绍的更详细更专业。 echarts在vue项目中实现的步骤 webpack 是目前比较流行的模块打包工具，你可以在使用 webpack 的项目中轻松的引入和打包 ECharts，这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。
vue中使用echart （以饼图和柱状图为例）
chijianya6471的博客
11-29 1166
在做的项目的时候需要全局引入，但是如果自己写一个demo页面可以选择按需引入，这里主要是来谈全局引入 1、首先：在编辑器(我使用的是vscode)的终端输入命令行npm install echarts --save,安装Echarts 2、其次：在入口文件main.js里面引入，impor...
VUE使用echart实现柱状图、折线图、饼图、地图、仪表盘
明天会比昨天好
06-01 1733
引入echarts 1.main.js中引入 import echarts from 'echarts' // 全局方法挂载 Vue.prototype.echarts = echarts 2.package.json设置版本 "dependencies": { "echarts": "^4.2.1", } 3.局部引用：在需要的页面引入 const echarts = require("echarts"); 柱状图 1.创建容器div（必须指定高度） <div style="heigh
echart饼状图
成长笔记
07-26 594
<template> <div> <div id="leftCenter" style="width:6.75rem;height:4.375rem;"></div> </div> </template> <script> const echarts = require("echarts"); export default { data() { return {}; }, mounted() .
echarts滚动图例样式设置
MISS_CJL的博客
01-06 6874
echarts滚动图例样式设置
使用u-table/ux-grid虚拟滚动解决el-table数据量大渲染卡的问题、及表格根据浏览器大小动态调整高度问题
金乌的博客
06-13 5728
u-table的使用方法和el-table没什么区别。这里必须加的两个属性，不加的话无法实现虚拟表格，页面一样会卡死，第一个，use-virtual 开启虚拟滚动，第二，个 height 必须限制高度，这两个不加就是普通表格，加了之后就是虚拟表格。若想根据浏览器大小动态设置表格高度，可以通过vuex将屏幕大小的数据存储起来，通过监听屏幕大小，动态设置表格高度。新建umy-ui.scss文件，并引入。表格高度根据浏览器屏幕高度变化。
vue引入Echarts画饼图详解
蓑笠翁
01-15 2万+
vue引入Echarts画饼图，圆环图、设置饼图上样式据等详解
vue+elementUI中使用Echarts之饼图
ju__ju的博客
07-30 1万+
实现效果如图 老规矩先创建占位子的div <div id="pieReport" style="width: 400px;height: 300px;"></div> 然后引入Echarts,并且模拟数据 export default { name: "", data() { return { charts: "", opin...
echart饼图vue2
05-30
要在 Vue2 中使用 Echarts 饼图，你需要先安装 Echarts 和 Vue-Echarts 两个库。可以通过以下命令安装： ``` npm install echarts vue-echarts ``` 然后在需要使用饼图的组件中，引入 Vue-Echarts 组件，并在模板中使用： ```vue <template> <div class="chart-container"> <vue-echarts :options="chartOption" :notMerge="true" :lazyUpdate="true"></vue-echarts> </div> </template> <script> import echarts from 'echarts' import VueECharts from 'vue-echarts' export default { components: { VueECharts }, data() { return { chartOption: { // 饼图的配置项 } } }, mounted() { // 初始化饼图的数据和配置项 } } </script> ``` 在 `mounted` 钩子函数中，你需要初始化饼图的数据和配置项，然后将它们赋值给 `chartOption` 对象，这样就可以在页面中显示饼图了。如果需要修改饼图数据或配置项，只需要更新 `chartOption` 对象即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值