echarts相关配置及图示

最新推荐文章于 2024-07-04 11:27:43 发布
最新推荐文章于 2024-07-04 11:27:43 发布
阅读量3.7k 收藏
点赞数
分类专栏： web前端 文章标签： echarts web前端开发 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012612399/article/details/54343238
版权

xAxis.boundaryGap配置为false,默认为 true。

(1)

var power=10;
var totalPower=14;
var percent = (100*power/totalPower).toFixed(2);
option = {
    title: {
        text: power+"KW",
        x: "center",
        top: '40%',
        textStyle:{
            color:'#fff',
            fontSize:48
        }
    },
    tooltip: {
        formatter: "{a} <br/>{b} : {c}%"
    },
    series: [{
        name: '',
        type: 'gauge',
        center: ['50%', '50%'], // 默认全局居中
        radius: '70%',
        axisLine: {
            show: false,
            lineStyle: { // 属性lineStyle控制线条样式
                color: [
                    [0.8, '#FCC65B'],
                    [1, '#FEFFFE']
                ],
                shadowColor: 'rgba(0, 0, 0, 0.3)',
                shadowBlur: 20,
                shadowOffsetX:-3,
                shadowOffsetY:3,
                width: 10
            }
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        pointer: {
            show: false,
            length: '0',
            width: '0'
        },
        detail: {
            formatter: '{value}%',
            offsetCenter: [0, '25%'],
            textStyle:{
                color:'#fff',
                fontSize:18
            }
        },
        data: [{
            value: percent,
            label: {
                textStyle: {
                    fontSize: 12
                }
            }
        }]
    }]
};

(2)

var data = [{
    value: 45,
    name: '严重告警'
}, {
    value: 20,
    name: '重要告警'
}, {
    value: 65,
    name: '一般告警'
}];
option = {
    backgroundColor: '#fff',
    tooltip: {
        show: true,
        trigger: 'item',
        formatter: "{b}:  {c}个 ({d}%)"
    },
    legend: {
        orient: 'horizontal',
        bottom: '0%',
        data: ['<10w', '10w-50w', '50w-100w', '100w-500w', '>500w']
    },
    series: [{
        type: 'pie',
        radius: ['15%', '22%'],
        silent:true,
        z:2,
        label: {
            normal: {
                show: false,
            }
        },
        itemStyle: {
            normal: {
                color: '#fff',
                opacity:0.4
                            }
                        },
        data: [' ']
    },{
        type: 'pie',
        radius: ['77%', '78%'],
        silent:true,
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0, color: '#8fe5fa' // 0% 处的颜色
                }, {
                  offset: 0.5, color: '#fff' // 100% 处的颜色
                },{
                  offset: 1, color: '#8fe5fa' // 0% 处的颜色
                }], false)
            }
        },
        data: ['']
    },{
        type: 'pie',
        roseType: "radius",
        selectedMode: 'single',
        radius: ['15%', '70%'],
        color: ['#ffb980', '#fc5043', '#23b4ff'],

        z:1,
        label: {
            normal: {
                formatter: '{c}%',
                position:'inner',
                textStyle: {
                fontSize:16
                }
            }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        data: data
    }]
};

（3）


var base = +new Date(1968, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];

var data = [Math.random() * 300];
function PowerCalculator(base,power){
  var number=base;
  if(power == 1){
    return number;
  } 
  if(power == 0){
    return 1;
  } 
  for(var i=2;i<=power;i++){
    number = number * base;
  }
  return number;
}

// for (var i = 1; i < 20000; i++) {
//     var now = new Date(base += oneDay);
//     date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
//     data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
// }

var datem=['00','15','30','45'];
var xData = getMinu();
function getYdata(param,bas){
var yData = [];
var getY;
for (var i = 0; i < xData.length; i++) {
    if(i<24||i>80){
        getY=0;
    }else{
        getY =bas+bas*Math.sin((i-param)/(3.14*3));
        //getY = -((i-param)*(i-param)-param*15)*basic; 
        if(getY<0){getY =0}
        if(Math.abs((i-54))<10){
            getY+=bas*Math.random()/15;
        }
        getY=getY/10
    }
    yData.push(getY)
}
    return yData
}
function getMinu(){
    var dateh=[];
    var datehs=[];
    for(var i=0;i<24;i++){
        if(i<10){
            dateh='0'+i;
        }else{
            dateh=''+i;
        }
        
        for(var j=0;j<4;j++){
            datehs.push(dateh+':'+datem[j]);
        }
    }
    return datehs;
}
option = {
    legend: {
        top: 'top',
        data:[{
            name:'逆变器功率(直流输入)',
            icon:'line'
        },{
            name:'逆变器功率(交流输出)',
            icon:'line'
        },{
            name:'瞬时辐射',
            icon:'line'
        }]
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xData
    },
    yAxis: [{
        name:'功率（MW）',
        max:5,
        type: 'value',
        boundaryGap: [0, '100%'],
    },{
        name:'瞬时辐射（W/m²）',
        max:1000,
        type: 'value',
        boundaryGap: [0, '100%'],
    }],
    dataZoom: [{
        type: 'inside',
        start: 10,
        end: 90
    }, {
        start: 10,
        end: 90,
        handleSize: '80%',
        handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
        }
    }],
    series: [
        {
            name:'逆变器功率(直流输入)',
            type:'line',
            symbol: 'none',
            itemStyle: {
                normal: {
                    color: '#0299D9'
                }
            },
            data: getYdata(38.7,13)
        },
        {
            name:'逆变器功率(交流输出)',
            type:'line',
            symbol: 'none',
            itemStyle: {
                normal: {
                    color: '#36BC27' 
                }
            },
            data: getYdata(38.7,12)
        },
        {
            name:'瞬时辐射',
            type:'line',
            smooth:false,
            symbol: 'none',
            yAxisIndex: 1,
            itemStyle: {
                normal: {
                    color: '#FB483A'
                }
            },
            data: getYdata(39,2880)
        }
    ]
};

（4）


var easingFuncs = {
    quadraticInOut: function (k) {
        if ((k *= 2) < 1)   { return 2200 * k * k; }
        return -2200 * (--k * (k - 2) - 1);
    }
};

var N_POINT = 24;

var grids = [];
var xAxes = [];
var yAxes = [];
var series = [];
var titles = [];
var tooltip = [];
var count = 0;
echarts.util.each(easingFuncs, function (easingFunc, name) {
    var data = [];
    for (var i = 0; i <= N_POINT; i++) {
        var x = i / N_POINT;
        var y = easingFunc(x);
        data.push([x, y]);
    }
    tooltip.push({
        show:true,
        trigger:'item'
    });
    grids.push({
        show: true,
        borderWidth: 0,
        backgroundColor: '#fff',
        shadowColor: 'rgba(0, 0, 0, 0.3)',
        shadowBlur: 2
    });
    xAxes.push({
        type: 'value',
        show: true,
        min: 0,
        max:1.2,
        gridIndex: count,
        axisLabel:{
            show:true,
            formatter:function(value,index){
                return index
            }
        },
        splitLine:{
            show:false
        },
        splitNumber:10
    });
    yAxes.push({
        name:'元',
        type: 'value',
        show: true,
        max:5000,
        gridIndex: count,
        splitLine:{
            show:true,
            lineStyle:{
                type:'dashed'
            }
        },
        splitNumber:5
    });
    series.push({
        name: name,
        type: 'line',
        xAxisIndex: count,
        yAxisIndex: count,
        data: data,
        showSymbol: false,
        animationEasing: name,
        animationDuration: 1000,
        markLine:{
            label:{show:true},
            data: [{
                    yAxis: 3000
                }],
            lineStyle: {
                normal: {
                    type: "dashed",
                    color: "#CE1C08"
                }
            }
        }
    });
    titles.push({
        textAlign: 'center',
        text: name,
        textStyle: {
            fontSize: 12,
            fontWeight: 'normal'
        }
    });
    count++;
});
option = {
    grid: grids,
    xAxis: xAxes,
    yAxis: yAxes,
    series: series,
    tooltip:tooltip
};


（5）


var xData=[],yData=[];
var curDate = new Date();
var curDay = curDate.getDate(); //目前的日
// getDaysInOneMonth(2016,12,31);
function getDaysInOneMonth(year, month,curDay){ //数据 按月统计
  month = parseInt(month, 10);  
  
  var d= new Date(year, month, 0);  //当月有多少天
  var days = d.getDate();  //当前月的最后一天
  
  for(var i=1;i<=days;i++){
      if(i<10){
          xData.push('0'+i);
      }else{
          xData.push(i);
      }
      
      if(i<=curDay){
          yData.push(parseFloat(Math.random()*10+30).toFixed(2));
      }else{
          yData.push(' ');
      }
      tooltipFormatter='{b}h<br>'+'{a0}：'+'{c}万kWh';
      
  }
  tooltipFormatter='{b}日<br>'+'{a}：'+'{c}万元';
} 
getDays(24);
function getDays(param){ //数据 按周统计
  num = parseInt(param, 10);  
  var week=['周一','周二','周三','周四','周五','周六','周日'];
  if(num==7){
      for(var i=0;i<num;i++){
          xData.push(week[i]);
          yData.push(parseFloat(Math.random()*10+30).toFixed(2));
          
      }
      tooltipFormatter='{b}<br>'+'{a}：'+'{c}万元';
  }else if(num==24){
      for(var i=1;i<num;i++){
          xData.push(i);
          yData.push(parseFloat(Math.random()*10+30).toFixed(2));
      }
      tooltipFormatter='{b}h<br>'+'{a}：'+'{c}万元';
  }else{
          
      }
  
} 
function getCurDate(){ //获取当前日期
    var formatDate = curDate.getFullYear()+'年'+(curDate.getMonth()+1)+'月'+curDate.getDate()+'日' 
    return formatDate;
}
option = {
    
    title:{
        text:getCurDate(),
        left:'center'
    },
    tooltip : {
        trigger: 'axis',
        axisPointer:{
            lineStyle:{
                color:'#3398DB'
            }
        },
        formatter:tooltipFormatter
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : xData
        }
    ],
    yAxis : [
        {
            max:50,
            type : 'value',
            name:'万元'
        }
    ],
    series : [
        {
            name:'收益',
            type:'line',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            areaStyle: {normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0, color: '#ACDDFD' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#F2FAFF' // 100% 处的颜色
                    }], false)
            }},
            lineStyle:{
                normal:{
                    color: '#55B5F1'
                }
            },
            itemStyle:{
                normal:{
                    color: '#0D95ED'
                }
            },
            data:yData
        }
    ]
};

（6）


function getData(param, maxNum) {
    var y;
    var arr = [];
    arr = xData.map(function(x){
        if(x<param){
            y=maxNum;
        }else{
            y=-(x-param)*(x-param)+maxNum;
        }
        y = y<0?0:y;
        return y.toFixed(2);
    });
    return arr;
}

function getAverageData(maxNum, total) {
    var j = maxNum / total;
    var sum=0;
    var arr = [0];
    for (var i = 0; i < total; i++) {
        sum+=j;
        arr.push(sum.toFixed(2));
    }
    return arr;
}
var xData = getAverageData(30, 300);
var legendData=['光伏板1','光伏板2','光伏板3'];
option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        textStyle: {
            fontFamily: "Arial",
            fontSize: 14,
            color: '#000000'
        },
        data: legendData
    },
    calculable: true,
    xAxis: [{
        type: 'category',
        anme: '输出电压(V)',
        nameLocation :'center',
        axisLabel: {
            formatter:function(value,index){
                 return parseInt(value)
            },
            interval:function(index,item){
                 if(item%5===0){
                     return true;
                 }else{
                     return false;
                 }
            },
            textStyle: {
                fontFamily: "Arial",
                fontSize: 12
            }
        },
        data:xData
    }],
    yAxis: [{
        fontFamily: "Arial",
        type: 'value',
        name: '输出电流(A)',
        nameTextStyle: {
            fontFamily: "Arial",
            fontSize: 12
        },
        axisLabel: {
            formatter: '{value}',
            textStyle: {
                fontFamily: "Arial",
                fontSize: 14
            }
        }
    }],
    series: [{
        itemStyle: {
            normal: {
                fontFamily: "Arial",
                borderColor: "#5ab1ef",
                color: "#5ab1ef",
                lineStyle: {
                    type: 'solid'
                }
            }
        },
        type: 'line',
        symbol: 'none',
        symbolSize: 3,
        smooth: true,
        name: '光伏板1',
        data: getData(14.6,33)
    }, {
        itemStyle: {
            normal: {
                fontFamily: "Arial",
                borderColor: "#b6a2de",
                color: "#b6a2de",
                lineStyle: {
                    type: 'solid'
                }
            }
        },
        type: 'line',
        symbol: 'none',
        symbolSize: 3,
        smooth: true,
        name: '光伏板2',
        data: getData(13.3,34)
    }, {
        itemStyle: {
            normal: {
                fontFamily: "Arial",
                borderColor: "#f69b51",
                color: "#f69b51",
                lineStyle: {
                    type: 'solid'
                }
            }
        },
        type: 'line',
        symbol: 'none',
        smooth: true,
        name: '光伏板3',
        data: getData(10,35.5)
    }]
};


不吃鱼的猫咪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
echarts中graphic_ECharts图形元素组件（graphic）
weixin_35891825的博客
12-23 1万+
ECharts 图表中原生图形元素组件 graphic 可以支持包括：image，circle，ring，polygon，rect，bezierCurve，arc 等等的图形元素。这些图形元素如何设置、层级关系如何、相对定位怎么实现，我们在本节内容中会做出介绍。下面，我们先通过简单的两个例子，看看 ECharts 图形元素组件是如何使用的。下面示例中，使用图形元素做了水印，和文本块：下面示例中，使...
echarts 网格属性_echarts 绘制网格 教你使用graphic
weixin_39715907的博客
12-19 1453
echarts 绘制网格 教你使用graphic主子镇楼不经常使用的echarts的同学对于echarts 的认识基本停留在饼图，柱形图，条形图，折线图等一系列常规图形上，对于网格基本是一脸懵，小伙伴会问了网格不都是用canvas或者svg话的吗？ 这一类不特殊图标一般都是D3定制的(不了解D3的小伙伴请移步：D3.js官网)就不多解释了！我们一般不会为了一个图，而引用一个插件或者图库，代价太大，...
【饼图交通方式】用ECharts的graphic配置打造个性化
最新发布
No_Name_Cao_Ni_Mei的博客
07-04 560
通过ECharts的graphic配置，我们可以在图表中加入各种自定义图形元素，这不仅能够提升图表的美观度，还能增强信息的传达效果。本文通过一个具体的示例，展示了如何在饼图中添加中心图像，但这只是graphic能力的冰山一角。ECharts提供了更多种类的图形元素和配置选项，等待你去探索和实践。
echarts中graphic_Echarts graphic原生图形元素组件
weixin_39634900的博客
01-14 7238
前面的文章介绍了Echarts通用配置项，这篇文章进入第二个主题介绍：Echarts graphic原生图形元素组件。graphic 是原生图形元素组件。可以支持的图形元素包括：Image, Text, Circle, Sector, Ring, Rect, Polygon, Polyline, Line, BezierCurve, Arc, Group 。这篇文章分别介绍graphic的通用设置...
echarts配置大全及配图（坐标轴，提示组件，图例组件）
weixin_61597234的博客
06-08 314
echarts配置大全及配图（坐标轴，提示组件，图例组件）
echarts利用graphic属性给饼图添加内圈图片及外圈图片（可自适应宽度位于饼图中心）
苦瓜_小学生的博客
04-25 1883
echarts利用graphic属性给饼图添加内圈图片及外圈图片（可自适应宽度位于饼图中心） 给图表添加自定义文字 给图表添加自定义图片
巷道交叉点设计软件及图示.pdf
11-16
巷道交叉点设计软件及图示.pdf
钢筋工程术语及图示.doc
10-12
【钢筋工程术语及图示】 在建筑工程中，钢筋工程是混凝土结构的重要组成部分，涉及多种专业术语和构造要求。本文将详细解析其中的关键概念。 1. 弯起钢筋（bent-up steel bar）： 弯起钢筋是指在混凝土构件的下部...
亿图图示专家2014
09-28
"亿图图示专家2014"是一款强大的图形绘制软件，专为用户设计各种专业图表而打造。...通过提供的安装包和相关文件，用户可以顺利安装并激活软件，享受其丰富的绘图功能和中文界面，从而提升工作或学习中的图表制作体验。
半导体管特性图示仪通用规范
01-20
本标准规定了半导体管特性图示仪的术语和定义、要求、测试方法、质量检验规则、标识、包装、运输、贮存等。 　本标准适用于测试半导体管特性曲线和直流参数的半导体管特性图示仪，也适用于具有插入单元或附属装置的...
用MyEclipse配置DataBase Explorer(图示)
09-10
在数据库开发过程中，配置DataBase Explorer是必不可少的步骤，它允许开发者直接在IDE内部进行数据查询、操作和管理，极大地提高了开发效率。本篇文章将详细介绍如何在MyEclipse中配置DataBase Explorer，通过...
ChartGraphics
06-16
使用C#语言创建动态链接库，开发环境VS2008。 使用者可以方便的使用库中提供的类，绘制图表，既可以是2D的条形图，也可以是3D的柱状图，图表效果非常接近Excel绘制的条形图和柱状图。使用者也可以容易的设置生成图片的width，height，alpha，mode等状态，置换xy的数据显示。 文档详细，方便使用者查阅，并提供使用实例，方便快速入手学习。 提供源代码。可能程序有不尽人意的地方，请使用者见谅，可以查看源代码做修改。
Echarts可视化工具的使用案例（idea）
11-12
Echart可视化工具的简单实用，本文章采用idea开发环境进行案例实施，运用到javaEE、ajax、serverlet技术
echarts graphic为图表添加图形等元素
weixin_43294560的博客
08-03 5143
1、配置 option={ ..., graphic: { type: 'image', ... } } 支持添加的类型有:image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group, 2、多个图形以及嵌套容器 graphic: [ {
Echarts各种配置及图例合集
一只蚊子学Java
03-26 2136
以下就是本次博主所分享的几个echarts图例，如有不懂的地方或者指正的地方欢迎一起探讨。 如果感觉对各位有帮助，希望点个喜欢~ 雷达图各项配置 源码链接 效果图： radar(1).png 雷达图练习图例 源码链接 效果图： radar(2).png 折线图（渐变背景） 源码链接 效果图： ...
echarts图解
weixin_44683763的博客
08-09 129
自己的项目代码记录:
echarts的使用图解
qq_38759137的博客
07-16 251
echarts中graphic_graphic组件
weixin_42299131的博客
12-23 3624
设置ECharts直线元素graphic.elements[i]-line直线。graphic.elements[i]-line.type[ 默认值 line ]用 setOption 首次设定图形元素时必须指定。 可取值：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, grou...
简易导航栏
Node.js安装报错 - npm -v 查看版本无效
09-23 238
HTML+CSS实现简易导航栏 知识点: 块级元素 / 行内元素 / 行内块 的区别/特点? 块级元素 独占一行 可以设置宽度 高度 内外边距 宽度默认是容器(父级宽度)的100% 是一个容器或者盒子,里面可以放块级或者行内元素 注意:文字类的元素(例如 :p元素,h1-h6元素)内不能放 块级元素 行内元素 相邻行内元素,一行显示多个 宽度 和 高度 设置无效 默认宽度是 本身内容的宽度 行内元素 内只能容纳 文本或者其他行内元素 注意: 链接内不能再放链接; 链接a内可以放块级元素,需要将
autosar nvm配置图示
06-06
以下是一个Autosar NVM模块的配置图示： ![Autosar NVM配置图示](https://i.imgur.com/P9i7J3u.png) 在这个图示中，Autosar NVM模块被添加到了系统配置中，并配置了NVM模块的驱动程序、工作模式、数据集、错误处理、初始化、管理接口和监控功能。其中，底层驱动程序和硬件抽象层通常是由软件供应商或硬件供应商提供的，而其他配置参数则需要根据实际应用进行设置。例如，数据集可以根据应用需求配置多个数据块，每个数据块可以具有不同的大小、读写权限和保护策略。错误处理和监控功能可以帮助开发人员检测和排除系统中的故障和错误，保证系统的可靠性和稳定性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值