专栏首页Python | Blogecharts图 示例

echarts图 示例

版权声明:Copyright © https://blog.csdn.net/zzw19951261/article/details/84774183

占位图

option = { title: { text: ‘80%’, x: ‘center’, y: ‘center’, textStyle: { fontWeight: ‘normal’, color: ‘#0580f2’, fontSize: ‘90’ } }, color: [‘rgba(176, 212, 251, 1)’], legend: { show: true, itemGap: 12, data: [‘01’, ‘02’] },

series: [{
    name: 'Line 1',
    type: 'pie',
    clockWise: true,
    radius: ['50%', '66%'],
    itemStyle: {
        normal: {
            label: {
                show: false
            },
            labelLine: {
                show: false
            }
        }
    },
    hoverAnimation: false, 
    data: [{
        value: 80,
        name: '01',
        itemStyle: {
            normal: {
                color: { // 完成的圆环的颜色
                    colorStops: [{
                        offset: 0,
                        color: '#00cefc' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#367bec' // 100% 处的颜色
                    }]
                },
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            } 
        }
    }, {
        name: '02',
        value: 20
    }]
}]

}

水平柱图

var myColor=[’#0096f3’]; option = { backgroundColor:’#0e2147’, grid: { left: ‘0%’, top:‘0%’, right: ‘0%’, bottom: ‘8%’, containLabel: true }, xAxis: [{ show: false, }], yAxis: [{ axisTick:‘none’, axisLine:‘none’, offset:‘27’, axisLabel: { textStyle: { color: ‘#ffffff’, fontSize:‘16’, } }, data: ‘8’, }, { axisTick:‘none’, axisLine:‘none’, axisLabel: { textStyle: { color: ‘#ffffff’, fontSize:‘16’, } }, data: [‘100%’] },{

            axisLine:{
              lineStyle:{
                color:'rgba(0,0,0,0)'
              }
            },
            data: [],
    }],
    series: [{
        name: '条',
        type: 'bar',
        stack:'圆',
        yAxisIndex: 0,
        data: [0],
        label:{
              normal:{
                show:true,
                position:'right',
               
                formatter:function(param){
                  return param.value + '%';
                },
                textStyle:{
                   color: '#ffffff',
                   fontSize:'16',
                }
              }
        },
        barWidth: 24,
        itemStyle: {
            normal: {
                color: function(params) {
                        var num=myColor.length;
                        return myColor[params.dataIndex%num]
                },
            }
        },
        z: 2
    }, {
        name: '白框',
        type: 'bar',
        yAxisIndex: 1,
        barGap: '-100%',
        data: [99.4],
        barWidth: 20,
        itemStyle: {
            normal: {
                color: '#0e2147',
               
            }
        },
        z: 1
    }, {
        name: '外框',
        type: 'bar',
        yAxisIndex: 2,
        barGap: '-100%',
        data: [100],
        barWidth: 24,
        itemStyle: {
            normal: {
                color: function(params) {
                        var num=myColor.length;
                        return myColor[params.dataIndex%num]
                },
              
            }
        },
        z: 0
    }, 
    
       
    ]
};


// 谷峰图
option = {
backgroundColor: '#00265f',

tooltip: {
    trigger: 'axis',
    axisPointer: {
        lineStyle: {
            color: '#57617B'
        }
    }
},
legend: {
    icon: 'rect',
    itemWidth: 14,
    itemHeight: 5,
    itemGap: 13,
    data: ['增长数'],
    right: '4%',
    textStyle: {
        fontSize: 12,
        color: '#F1F1F3'
    }
},
grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
},
xAxis: [{
    type: 'category',
    boundaryGap: false,
    axisLine: {
        lineStyle: {
            color: '#00c7ff'
        }
    },
    data: ['4号',  '6号', '10号', '11号', '14号', '15号', '19号', '20号', '22号', '33号', '35号', '54号', '58号', '60号']
}],
yAxis: [{
    type: 'value',
    axisTick: {
        show: false
    },
    axisLine: {
        lineStyle: {
            color: '#00c7ff'
        }
    },
    axisLabel: {
        margin: 10,
        textStyle: {
            fontSize: 14
        }
    },
    splitLine: {
        show: false
    }
}],
series: [{
    name: '增长数',
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 5,
    showSymbol: false,
    lineStyle: {
        normal: {
            width: 1
        }
    },
    areaStyle: {
        normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#5ff6e9'
            }, {
                offset: 0.8,
                color: '#7370fd'
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10
        }
    },
    itemStyle: {
        normal: {
            color: 'rgb(137,189,27)',
            borderColor: 'rgba(137,189,2,0.27)',
            borderWidth: 12

        }
    },
    data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122, 89, 112, 34]
}]

};

// 折线图

option = { color: [’#3398DB’], title: { text: ‘各省数据合格率统计’, //textStyle: { // color: ‘#fff’ //} }, tooltip: { trigger: ‘axis’, axisPointer: { type: ‘shadow’ }, formatter: “{b} 合格率: {c}%” }, /legend: { data: [date] },/ grid: { left: ‘4%’, right: ‘4%’, bottom: ‘2%’, containLabel: true }, xAxis: { type: ‘value’, boundaryGap: [0, 0.01], min: 0, max: 100, interval: 20, axisLabel: { formatter: ‘{value}%’, textStyle: { //color: ‘#fff’, fontWeight: ‘80’ } } }, yAxis: { type: ‘category’, data: [’<20%’, ‘20%-40%’, ‘40%-60%’, ‘60%-80%’, ‘>=80%’], axisLabel: { show: true, interval: 0, rotate: 0, margin: 10, inside: false, textStyle: { //color: ‘#fff’, fontWeight: ‘50’ } } }, series: [{ type: ‘bar’, label: { normal: { show: true, // formatter: ‘{c}’, formatter: function(v) { var val = v.data; if (val == 0) { return ‘’; } return val; }, color: ‘#fff’ } }, data: [22, 33, 55, 77, 88] }] };

动态数据

option = { title: { text: ‘动态数据’, subtext: ‘纯属虚构’ }, tooltip: { trigger: ‘axis’, axisPointer: { type: ‘cross’, label: { backgroundColor: ‘#283b56’ } } }, legend: { data:[‘最新成交价’, ‘预购队列’] }, toolbox: { show: true, feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, dataZoom: { show: false, start: 0, end: 100 }, xAxis: [ { type: ‘category’, // boundaryGap: true, data: timesDate() }, ], yAxis: [ { type: ‘value’, scale: true, name: ‘价格’, max: 30, min: 0, boundaryGap: [0.7, 0.2] }, ], series: [ { name:‘最新成交价’, type:‘line’, smooth: true, symbolSize: 5, symbol: ‘circle’, showSymbol: false, areaStyle:{ normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: ‘rgba(0, 187, 237, 0.5)’ }, { offset: 0.8, color: ‘rgba(0, 189, 237, 0)’ }], false), shadowColor: ‘rgba(0, 0, 0, 0.1)’, shadowBlur: 10 } }, markPoint:{ symbolSize: 10, symbol: ‘circle’, data:[{ coord:[9, 2] }], label:{ normal:{ show: true, position: ‘top’, formatter: function(params) { if (params.dataIndex === 8){ return ‘{b}’ } } } }, }, markLine: { data: [ {yAxis: 8, name: ‘实时’} ] }, data:rwD() } ] }; var r = []; r = rwD(); setInterval(function (){ axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,’’);

var data1 = option.series[0].data;
data1.shift();
data1.push((Math.random() * 10 + 5).toFixed(1) - 0);

option.xAxis[0].data.shift();
option.xAxis[0].data.push(axisData);
var markData = data1[data1.length-1];
option.series[0].markPoint.data[0].coord[1] = markData;
option.series[0].markLine.data[0].yAxis = markData;

myChart.setOption(option);

}, 2100); function rwD () { // y轴数据内容更新 var res = []; var len = 0; while (len < 10) { res.push((Math.random()10 + 5).toFixed(1) - 0); len++; } return res; } function timesDate(){ // x轴曲线时间 var now = new Date(); var res = []; var len = 10; while (len–) { res.unshift(now.toLocaleTimeString().replace(/^\D/,’’)); now = new Date(now - 20000); } return res; }

动态数据2

var barColor = []; var emColor = []; var color0 = ["#089280", “#af540b”, “#17559e”]; var color10 = [’#12ffd0’, ‘#ffcc00’, ‘#0cb0ed’]; if (navigator.userAgent.indexOf(“MSIE 8.0”) > 0) { for (var i = 0; i < color0.length; i++) { barColor[i] = { color: color0[i], } emColor[i] = { color: color10[i] } } } else { for (var j = 0; j < color0.length; j++) { barColor[j] = { color: { colorStops: [{ offset: 0, color: color0[j] // 0% 处的颜色 }, { offset: 1, color: color10[j] // 100% 处的颜色 }] } } emColor[j] = { color: { colorStops: [{ offset: 0, color: color10[j] // 0% 处的颜色 }, { offset: 1, color: color0[j] // 100% 处的颜色 }] } } } } //图表默认数组 var xzhou2 = [], yzhou2 = [], zzhou2 = [], xzhou3 = [], yzhou3 = [], zzhou3 = []; //节拍 for (var i = 0; i <= 40; i++) { xzhou2[i] = 0; yzhou2[i] = 0; zzhou2[i] = 0; xzhou3[i] = 0; yzhou3[i] = 0; zzhou3[i] = 0; } option = { backgroundColor: ‘#203958’, tooltip: { trigger: ‘axis’, axisPointer: { lineStyle: { color: ‘#ddd’ } }, backgroundColor: ‘rgba(255,255,255,1)’, padding: [5, 10], textStyle: { color: ‘#7588E4’, }, extraCssText: ‘box-shadow: 0 0 5px rgba(0,0,0,0.3)’ }, legend: { show: true, shadowColor: “#fff”, shadowBlur: 5, shadowOffsetX: 5, data: [‘X轴’, ‘Y轴’, ‘Z轴’], top: ‘5%’, // left: “18%”, textStyle: { color: ‘#fff’, fontSize: 14 // padding: [3, 20, 5, 7] }, // itemWidth: 64, itemHeight: 10 }, grid: { top: ‘30%’, left: ‘7%’, right: ‘8%’, bottom: ‘10%’, containLabel: true }, xAxis: { type: ‘category’, data: (function() { var now = new Date(); var res = []; var len = 40; //显示个数 while (len–) { res.unshift(now.toLocaleTimeString().replace(/^\D*/, ‘’)); now = new Date(now - 2000); } return res; })(), boundaryGap: false, splitLine: { show: false }, axisTick: { show: false }, axisLine: { lineStyle: { color: ‘#2d67a7’ } }, axisLabel: { margin: 10, textStyle: { fontSize: 14 } } }, yAxis: { type: ‘value’, splitLine: { show: false }, axisTick: { show: false }, axisLine: { lineStyle: { color: ‘#2d67a7’ } }, axisLabel: { margin: 10, textStyle: { fontSize: 14 } } }, series: [{ name: ‘X轴’, type: ‘line’, smooth: true, showSymbol: false, symbol: ‘circle’, symbolSize: 1, data: xzhou3, itemStyle: { normal: barColor[0], emphasis: emColor[0] }, lineStyle: { normal: { width: 2, shadowColor: ‘rgba(0,0,0,0.6)’, shadowBlur: 10, shadowOffsetY: 5 } } }, { name: ‘Y轴’, type: ‘line’, smooth: true, showSymbol: false, symbol: ‘circle’, symbolSize: 1, data: yzhou3, itemStyle: { normal: barColor[1], emphasis: emColor[1] }, lineStyle: { normal: { width: 2, shadowColor: ‘rgba(0,0,0,0.6)’, shadowBlur: 10, shadowOffsetY: 5 } } }, { name: ‘Z轴’, type: ‘line’, smooth: true, showSymbol: false, symbol: ‘circle’, symbolSize: 1, data: zzhou3, itemStyle: { normal: barColor[2], emphasis: emColor[2] }, lineStyle: { normal: { width: 2, shadowColor: ‘rgba(0,0,0,0.6)’, shadowBlur: 10, shadowOffsetY: 5 } } } ] } setInterval(function() { subLoadX = Math.random() * 100; subLoadY = Math.random() * 100; subLoadZ = Math.random() * 100; xzhou3.shift(); xzhou3.push(subLoadX); yzhou3.shift(); yzhou3.push(subLoadY); zzhou3.shift(); zzhou3.push(subLoadZ); axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, ‘’); option.xAxis.data.shift(); option.xAxis.data.push(axisData); myChart.setOption(option); }, 1000)

带宽图

option = { backgroundColor: ‘#00265f’,

tooltip: {
    trigger: 'axis',
    axisPointer: {
        lineStyle: {
            color: '#57617B'
        }
    }
},
legend: {
    icon: 'rect',
    itemWidth: 14,
    itemHeight: 5,
    itemGap: 13,
    data: ['增长数'],
    right: '4%',
    textStyle: {
        fontSize: 12,
        color: '#F1F1F3'
    }
},
grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
},
xAxis: [{
    type: 'category',
    boundaryGap: false,
    axisLine: {
        lineStyle: {
            color: '#00c7ff'
        }
    },
    data: ['4号', '5号', '6号', '10号', '11号', '14号', '15号', '19号', '20号', '22号', '33号', '35号', '54号', '58号', '60号']
}],
yAxis: [{
    type: 'value',
    axisTick: {
        show: false
    },
    axisLine: {
        lineStyle: {
            color: '#00c7ff'
        }
    },
    axisLabel: {
        margin: 10,
        textStyle: {
            fontSize: 14
        }
    },
    splitLine: {
        show: false
    }
}],
series: [{
    name: '增长数',
    type: 'line',
    smooth: true,
    symbol: 'circle',
    symbolSize: 5,
    showSymbol: false,
    lineStyle: {
        normal: {
            width: 1
        }
    },
    areaStyle: {
        normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#5ff6e9'
            }, {
                offset: 0.8,
                color: '#7370fd'
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10
        }
    },
    itemStyle: {
        normal: {
            color: 'rgb(137,189,27)',
            borderColor: 'rgba(137,189,2,0.27)',
            borderWidth: 12

        }
    },
    data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122, 89, 112, 34]
}]

};

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • echars进度条

    zhengzongwei
  • mysql 添加远程用户

    ALTER USER ‘zheng’@‘localhost’ IDENTIFIED WITH mysql_native_password BY ‘zhengzo...

    zhengzongwei
  • MySQL 主从,读写分离

    版权声明:Copyright © ...

    zhengzongwei
  • 为你的网页添加深色模式[每日前端夜话0x48]

    CSS 规范一直在不断发展。尽管在 CSS 新功能的实现很复杂,但是 CSS 工作组还是决定要把简化版作为新元素添加到规范中。然后由浏览器来实现这些新元素,浏览...

    疯狂的技术宅
  • Java类的加载方式、类的初始化、类的执行方式

    在我们使用一个类之前,JVM需要先将该类的字节码文件(.class文件)从磁盘、网络或其他来源加载到内存中,并对字节码进行解析生成对应的Class对象,这就是类...

    葆宁
  • 10步骤优化SQL Server 数据库性能

    作者从基础的数据库索引开始全面讲述了SQL Server数据库应用程序的性能优化,包括数据库设计和数据访问代码。系列文章如下: Top 10 steps to ...

    张善友
  • An example of CDS view extension

    Once activated, you see two fields in SQL view as expected.

    Jerry Wang
  • 拉普拉斯矩阵及谱聚类

    拉普拉斯矩阵及谱聚类(Laplacian Matrix and Spectral Clustering)

    AIHGF
  • 绑定手机号性能测试

    最近遭遇了绑定手机号相关的压测需求,有了手机号登录的经验和测试数据,这次算起来比较简单。最重要的是难点就是要求开发配合调整配置已经在上一期文章:手机号验证码登录...

    八音弦
  • java学习之StringBuffer的增删改查功能

    吾爱乐享

扫码关注云+社区

领取腾讯云代金券