精华内容
下载资源
问答
  • echarts饼状图中间展示数字,官方实例,展示效果在我的博客里有
  • Echarts饼状图和折线图

    2015-06-18 17:27:25
    实现Echarts饼状图标签文本在图的下方,折线图坐村系左对齐无间隙,解决手机上空中太多空间。
  • echarts饼状图案例

    2021-06-12 05:01:16
    $(function() {//临时数据 var tempData =[{ value:5, name:'工伤保险信息10项'}, { value:16, name:'...//option end var myChart = echarts.init(document.getElementById("bottom")); myChart.setOption(option); })

    $(function() {//临时数据

    var tempData =[{

    value:5,

    name:'工伤保险信息10项'},

    {

    value:16,

    name:'失业保险信息8项'},

    {

    value:15,

    name:'医疗保险信息9项'},

    {

    value:10,

    name:'生育保障9项'},

    {

    value:15,

    name:'养老保险11项'}

    ];//最终输出数据

    var result =[];//颜色

    var color=['#00F0FF', '#00FFD8', '#00FF78', '#0083FE', '#00BFFF'];//间隔数据的样式

    var placeHolderStyle ={

    normal: {

    label: {

    show:false},

    labelLine: {

    show:false},

    color:'rgba(0, 0, 0, 0)',

    borderColor:'rgba(0, 0, 0, 0)',

    borderWidth:0}

    };//循环加入间隔数据

    for (var i = 0; i < tempData.length; i++) {

    result.push({

    value: tempData[i].value,

    name: tempData[i].name,

    itemStyle: {

    normal: {

    borderWidth:2,

    shadowBlur:20,

    borderColor:color[i],

    shadowColor: color[i]

    }

    }

    }, {

    value:2,

    name:'',

    itemStyle: placeHolderStyle//间隔数据

    });

    }//设置字体样式

    var rich ={

    b: {//名字

    fontSize: 18,

    color:'#aae8ff',

    align:'left',

    padding:2},

    hr: {//分割线

    borderColor: '#00ffff',

    width:'100%',

    borderWidth:1,

    height:0},

    w: {//数据存量

    fontSize: 18,

    color:'#aae8ff',

    align:'left',

    padding:2},

    c: {//数据

    fontSize: 18,

    align:'center',

    padding:2,

    color:'#53C6F2'},

    a: {//单位

    fontSize: 18,

    align:'center',

    padding:2,

    color:'#53C6F2'}

    }var option ={

    backgroundColor:'transparent',//画布背景色

    tooltip: { //提示框

    trigger: 'item',

    formatter:"{b} : {d}%"

    //formatter: "{b} : {d}%
    {c}"

    },

    series: [{

    type:'pie',

    radius: ['50%', '60%'],//内 外圆半径

    center: ['50%', '50%'],

    color: ['#00F0FF', '#00FFD8', '#00FF78', '#0083FE', '#00BFFF'],//色块填充颜色

    itemStyle: {

    normal: {

    label: {

    show:true,

    position:'outside',

    color:'#ddd',

    formatter:function(params) {var percent = 0;var total = 0;for (var i = 0; i < tempData.length; i++) {

    total+=tempData[i].value;

    }

    percent= ((params.value) * 1000).toFixed(0);if(params.name !== '') {return '{b|'+params.name+'} \n {hr|} \n {w|数据存量:} {c|'+percent+'} {a|条}'}else{return '';

    }

    },

    rich: rich

    },

    labelLine: {

    length:20,

    length2:30,

    show:true,

    color:'#00ffff'}

    }

    },

    data: result/*labelLine: {

    normal: {

    show: true,

    length: 20,

    length2: 30,

    lineStyle: {

    color: '#CCCCCC',

    width: 2

    }

    }

    },*/

    /*label: {

    normal: {

    //formatter: '{b|{b}} \n {hr|} \n {w|数据存量:} {c|{c}%} {a|条}',

    formatter: '{b|{b}} \n {hr|} \n {w|数据存量:} {c|{c}} {a|条}',

    rich: {

    b: { // 名字

    fontSize: 18,

    color: '#94C8DC',

    align: 'left',

    padding: 2

    },

    hr: { // 分割线

    borderColor: '#CCCCCC',

    width: '100%',

    borderWidth: 2,

    height: 0

    },

    w: { // 数据存量

    fontSize: 18,

    color: '#94C8DC',

    align: 'left',

    padding: 2

    },

    c: { // 数据

    fontSize: 18,

    align: 'center',

    padding: 2,

    color: '#53C6F2'

    },

    a: { // 单位

    fontSize: 18,

    align: 'center',

    padding: 2,

    color: '#53C6F2'

    }

    } //rich end

    }

    } //lable end*/}

    ]//series end

    };//option end

    var myChart = echarts.init(document.getElementById("bottom"));

    myChart.setOption(option);

    })

    展开全文
  • Echarts 饼状图

    2016-09-05 09:59:16
    Echarts 饼状图
  • echarts饼状图的使用

    2021-05-19 19:15:12
    echarts饼状图的使用 地址:https://echarts.apache.org/zh/index.html 第一步: 通过 npm 获取 echarts, npm install echarts --save 引用方式(两种) 全局引入 main.js中配置 import echarts from ...

    echarts饼状图的使用

    地址:https://echarts.apache.org/zh/index.html
    
    

    第一步:

    通过 npm 获取 echarts,

    npm install echarts --save

    引用方式(两种)

    全局引入

     main.js中配置
    

    import echarts from ‘echarts’ //引入echarts

    Vue.prototype.$echarts = echarts //引入组件

    vue中echarts引用

    先创建一个盒子

    <div id="myChart" :style="{width: ‘300px‘, height: ‘300px‘}"></div>
    
    
    <script> export default {
        name: ‘eCharts‘,
        data () {
            return {
            msg: ‘Welcome to Your Vue.js App‘
            }
        },
        mounted(){
            this.drawLine();
        },
        methods: {
            drawLine(){
                // 基于准备好的dom,初始化echarts实例
                var myChart = this.$echarts.init(document.getElementById(‘myChart‘))
                // 绘制图表
                myChart.setOption({
                    title: { text: ‘在Vue中使用echarts‘ },
                    tooltip: {},
                    xAxis: {
                        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                    },
                    yAxis: {},
                    series: [{
                        name: ‘销量‘,
                        type: ‘bar‘,
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                });
            }
        } } </script>
    

    按需引入

    如果是在许多页面中都有用到,就写在main.js中

    main.js

    引入基本模板 let echarts = require(‘echarts/lib/echarts‘)

    引入饼状图组件
    require(‘echarts/lib/chart/pie‘)
    引入提示框和title组件,图例
    require(‘echarts/lib/component/tooltip‘)
    require(‘echarts/lib/component/title‘)
    require('echarts/lib/component/legend')
    Vue.prototype.$echarts = echarts //引入组件
    

    在组建中使用同上,如果只在一个地方使用就直接写在.vue文件中就好啦

    ***注:这里用 require 不用 import 引入是因为 import 需要详细的路径 ***

    直接复制到script中 如果vue中在return中写

    var echarts = require('echarts');
    
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    
    option = {
        title: {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                data: [
                    {value: 1048, name: '搜索引擎'},
                    {value: 735, name: '直接访问'},
                    {value: 580, name: '邮件营销'},
                    {value: 484, name: '联盟广告'},
                    {value: 300, name: '视频广告'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    
    option && myChart.setOption(option);
    


    这样一个饼状图就写好了 欢迎新手来学习哦!

    你们的鼓励是我前进的动力 有你们的赞赏阅读我才会持之以恒去用心来写 在你们毫无头绪的时候我给你们最简单且大家都能看懂的方法。

    展开全文
  • echarts饼状图实现方法

    2021-08-07 03:53:00
    当前位置:我的异常网» Web前端»echarts饼状图实现方法echarts饼状图实现方法www.myexceptions.net网友分享于:2015-09-27浏览:0次echarts饼状图实现步骤:Charts demo// 路径配置require.config({paths:{'echarts...

    当前位置:我的异常网» Web前端 » echarts饼状图实现方法

    echarts饼状图实现方法

    www.myexceptions.net  网友分享于:2015-09-27  浏览:0次

    echarts饼状图实现步骤:

    Charts demo

    // 路径配置

    require.config({

    paths:{

    'echarts' : 'js/echarts',

    'echarts/chart/pie' : 'js/echarts'

    }

    });

    // 使用

    require(

    [

    'echarts',

    'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载

    ],

    function (ec) {

    // 基于准备好的dom,初始化echarts图表

    var myChart = ec.init(document.getElementById('picturePlace'));

    option = {

    title : {

    text: '某站点用户访问来源',

    subtext: '纯属虚构',

    x:'center'

    },

    tooltip : {

    trigger: 'item',

    formatter: "{a}
    {b} : {c} ({d}%)"

    },

    legend: {

    orient : 'vertical',

    x : 'left',

    data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']

    },

    toolbox: {

    show : true,

    feature : {

    mark : {show: true},

    dataView : {show: true, readOnly: false},

    restore : {show: true},

    saveAsImage : {show: true}

    }

    },

    calculable : true,

    series : [

    {

    name:'访问来源',

    type:'pie',

    radius : '55%',

    center: ['50%', '60%'],

    data:[

    {value:335, name:'直接访问'},

    {value:310, name:'邮件营销'},

    {value:234, name:'联盟广告'},

    {value:135, name:'视频广告'},

    {value:1548, name:'搜索引擎'}

    ]

    }

    ]

    };

    // 为echarts对象加载数据

    myChart.setOption(option);

    }

    );

    文章评论

    展开全文
  • echarts 饼状图

    2020-12-21 15:00:44
    option = { tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { bottom: 0, .

    在这里插入图片描述

    option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b}: {c} ({d}%)"
                        },
                        legend: {
                            bottom: 0,
                            left: 'center',
                            data: ['基础评分', '履职评分', '监控评分'],
                            textStyle: {
                                fontSize: 8,
                                color: "rgba(255,255,255,1)",
                            }
                        },
                        title: {
                            text: "90",
                            left: "center",
                            top: "50%",
                            textStyle: {
                                color: "rgba(255,255,255,1)",
                                fontSize: 30,
                                align: "center"
                            }
                        },
                        graphic: {
                            type: "text",
                            left: "center",
                            top: "40%",
                            style: {
                                text: "综合评分",
                                textAlign: "center",
                                fill: "rgba(255,255,255,.6)",
                                fontSize: 14,
                                fontWeight: 400
                            }
                        },
                        series: [{
                            name: '',
                            type: 'pie',
                            radius: ['60%', '80%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: false,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [
                                {value: 5, name: '基础评分', itemStyle: {color: 'rgb(235,77,68)'}},
                                {value: 5, name: '履职评分', itemStyle: {color: 'rgb(77,160,246)'}},
                                {value: 5, name: '监控评分', itemStyle: {color: 'rgb(243,192,74)'}},
    
                            ]
                        }]
                    }
    

    在这里插入图片描述

    option = {
                        title: {
                            text: ['{name|故障总数}', '{value|' + 12365 + '个}'].join('\n'),
                            top: '48%',
                            left: '29%',
                            textAlign: 'center',
                            textStyle: {
                                rich: {
                                    value: {
                                        color: '#FFFFFF',
                                        fontSize: 16,
                                        lineHeight: 16,
                                    },
                                    name: {
                                        color: '#FFFFFF',
                                        fontSize: 13,
                                        lineHeight: 20,
                                    },
                                },
                            },
                        },
                        color: ["#027FF2", "#F19610", "#8A00E1", "#00C6FF", "#34D160", "#6054FF"],
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: '60%',
                            top: 'center',
                            data: ['液位液压', '烟感故障', '喷淋故障', '温感故障', '烟感故障1', '防火门故障'],
                            formatter: function (name) {
                                let total = 0;
                                let target;
                                let data = [
                                    {value: 10, name: '液位液压'},
                                    {value: 5, name: '烟感故障'},
                                    {value: 15, name: '喷淋故障'},
                                    {value: 25, name: '温感故障'},
                                    {value: 20, name: '烟感故障1'},
                                    {value: 35, name: '防火门故障'}
                                ];
                                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|' + name + '}',
                                    '{num|' + target + '个 ' + ((target / total) * 100).toFixed(2) + '%}',
                                ];
                                return arr.join('\n')
                            },
                            textStyle: {
                                rich: {
                                    name: {
                                        color: '#FFFFFF',
                                        fontSize: 11,
                                        align: 'center',
                                        //padding: [-20, 0, 0, 0],
                                    },
                                    num: {
                                        color: '#02E8FF',
                                        fontSize: 13,
                                        align: 'center',
                                        //padding: [0, 0, 30, 0],
                                    }
                                }
                            }
                        },
                        series: [
                            {
                                name: '故障分类',
                                type: 'pie',
                                radius: [40, 110],
                                center: ['30%', '55%'],
                                roseType: 'radius',
                                label: {
                                    show: false
                                },
                                emphasis: {
                                    label: {
                                        show: false
                                    }
                                },
                                data: [
                                    {value: 10, name: '液位液压'},
                                    {value: 5, name: '烟感故障'},
                                    {value: 15, name: '喷淋故障'},
                                    {value: 25, name: '温感故障'},
                                    {value: 20, name: '烟感故障1'},
                                    {value: 35, name: '防火门故障'}
                                ]
                            }
                        ]
                    }
    

    在这里插入图片描述
    option = {
    title: {
    text: [’{name|故障\n总数}’].join(’\n’),
    top: ‘45%’,
    left: ‘44%’,
    textAlign: ‘center’,
    textStyle: {
    rich: {
    name: {
    color: ‘#FFFFFF’,
    fontSize: 16,
    lineHeight: 20,
    },
    },
    },
    },
    color: ["#027FF2", “#F19610”, “#8A00E1”, “#00C6FF”, “#34D160”, “#6054FF”],
    tooltip: {
    trigger: ‘item’,
    formatter: ‘{a}
    {b} : {c} ({d}%)’
    },
    series: [
    {
    name: ‘故障分类’,
    type: ‘pie’,
    radius: [40, 110],
    center: [‘45%’, ‘55%’],
    roseType: ‘radius’,
    data: [
    {value: 10, name: ‘液位液压’},
    {value: 5, name: ‘烟感故障’},
    {value: 15, name: ‘喷淋故障’},
    {value: 25, name: ‘温感故障’},
    {value: 20, name: ‘烟感故障1’},
    {value: 35, name: ‘防火门故障’}
    ]
    }
    ]
    }

    展开全文
  • Echarts饼状图设置

    2021-06-21 13:49:24
    但是其中的一个饼状图,因为容器大小的原因导致它的饼状图和标题重合了,这肯定不行的,但是我发现使用grid设置无效,所以我查了一下,发现饼状图不能设置grid,而是center option1: { legend: {}, tooltip: { ...
  • DrawEcharts() { var myChart = this.$echarts.init(document.getElementById('echarts')) var option = { tooltip: { trigger: 'item', }, legend: { ...
  • Echarts饼状图属性设置大全

    千次阅读 2020-10-28 16:33:36
    text: ‘学生生源地来源分布’, subtext: ‘模拟数据’, // x 设置水平安放位置,默认左对齐,可选值:‘center’ ¦ ‘left’ ¦ ‘right’ ¦ {number}(x坐标,单位px) x: ‘center’, // y 设置垂直安放位置...
  • 去掉Echarts饼状图的引导线

    千次阅读 2021-05-25 11:08:11
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>五分钟上手之饼状</title> <!-- 引入 echarts.js --> <script src="http...
  • echarts饼状图轮播效果

    千次阅读 2020-08-13 16:42:15
    学会思考,学会总结。 部分代码来自echarts官方:echarts官方网址 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,...今天我在用echarts做出饼状图的轮播效果,记录当下。 下
  • echarts饼状图进度条

    2020-05-08 09:27:50
    myChart.setOption( { title: { show: true, text: '完成度', x: 'center', textStyle: { fontWeight: 'normal', fontSize: 16 } }, animation: true, tooltip: { show: false }, series: [ { name: '完成度',...效果
  • export default { data() { return { cookie: [], //饼状图数据 } }, mounted() { this.pieFullChart() //图表方法 this.getNonConfAnalysis() //声明一个方法用来接口调用 }, methods: { //调用mounted中的...
  • let myChart= echarts.getInstanceByDom(document.getElementById(‘chart-panel‘));//console.log(myChart);myChart.on(‘mouseover‘, (params) =>{currName=params.name;console.log(params)le...
  • echarts饼状图指定颜色

    2021-03-11 15:03:29
    为每个饼图的扇面指定不同的颜色指定PIE饼图扇形每个扇面的颜 指定PIE饼图扇形每个扇面的颜 指定PIE饼图扇形每个扇面的颜色,修改每个data的ItemStyle对象的color属性即可。...最终完整代码和效果如所示 ...
  • echarts饼状图实现不同icon引入图片1.1 引入图片 1.1 import img1 from '@/assets/img/power.png' import img2 from '@/assets/img/underPan.png' import img3 from '@/assets/img/assist.png' import img4 from '@...
  • 如何自定义echarts饼状图formatter函数

    千次阅读 2019-12-26 17:04:40
    如何自定义echarts饼状图formatter函数 先看一下效果 假数据数据格式如下:(就是在series的data中设置data的datas属性) 去掉echarts饼状图的引导线(在series 中设置label属性) series : [ { type: 'pie', ...
  • echarts饼状图显示百分比

    千次阅读 2019-11-13 10:08:55
    // 路径配置 require.config({ paths: { echarts: '${ctx}/js/other/echart' } }); // 使用 require( ... 'echarts', 'echarts/chart/pie', // 使用柱状就加载bar模块,按需加载 'echarts/...
  • Echarts饼状图交互数据

    千次阅读 2019-09-26 20:01:53
    前面写到一个关于Echarts饼状图交互数据的例子,但是当时name是写死的,现在的value和name都是需要从后端获取,然后渲染在界面,大致的json数据是这样的: 模拟一个json格式的数据: {"list":[{"value":"管理","name...
  • echarts 饼状图 设置同色系

    千次阅读 2020-05-29 11:34:51
    echarts 饼状图 设置同色系 今天了解echats的时候发现饼状图给的颜色是随机的,虽然可以设置color来自定义,但是当我数据不确定的时候要怎么渲染出同色系的呢。我自己写了个小demo <!DOCTYPE html> <...
  • echarts饼状图实战实例

    2021-04-13 14:38:38
    基于echarts饼状图 echarts本人也是用的很少的了,有缘碰到公司在用,于是便熟悉熟悉。这里就指出一些日常简单参数和图形做参考。 1.先上vue下的HTML <template> <view class="content"> <view ...
  • ECharts饼状图legend显示Value所占百分比 此项目基于Vue 最近写项目碰到一个需求,需要在legend区域显示Value值所占比例,如下图所示。 在查询官方文档的时候,虽然提供了格式化图例文本的回调函数: // 使用字符串...
  • Echarts饼状图

    2021-06-25 09:46:08
    环形饼状图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="../echarts.js"><...
  • echarts 饼状图中间 添加图片

    千次阅读 2020-06-09 19:23:38
    echarts 饼状图中间 添加图片 代码如下: option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, graphic:{ //图形中间图片 elements: [{ type: 'image'
  • Echarts饼状图遇到的问题

    千次阅读 2020-11-10 16:16:07
    echarts官方文档的series[i]-pie.label.normal.formatter说明中这样说道(标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n 换行),但是在某种特定情况下仍然不能...
  • 下面小编就为大家分享一篇vue2.0 自定义 饼状图 (Echarts)组件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

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

echarts饼状图

友情链接: 蚁群matlab算法.rar