echarts图 示例

最新推荐文章于 2024-07-04 22:36:23 发布
最新推荐文章于 2024-07-04 22:36:23 发布
阅读量839 收藏
点赞数
分类专栏： echars
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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]
}]

};

iWEi_
关注
专栏目录
echarts地图示例
m0_51431448的博客
04-04 5714
地图比普通的echarts多了一步 需要注册，就是要引入某个地区的json文件 各个地区的json文件链接数据可视化平台(各个地区的json文件) 示例1 <template> <div :id="id" style="width: 100%;height: 100%;">111</div> </template> <script setup> import * as echarts from "echarts"; impor....
Echarts官方示例库
07-16
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，...
echarts实例
08-29
输入数据会形成表格装数据,同时数据会形成对应的统计图,还可以选择统计图的类型.
Echarts 的例子
六月心悸
06-05 2403
jsp页面： <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> Echarts
vue 常用的 Echarts 示例
最新发布
2401_84434331的博客
07-04 348
前端字节跳动真题解析tSize: 10},},}, {name: ‘总计’,normal: {label: {show: true, //开启显示position: ‘insideLeft’, //在上方显示textStyle: { //数值样式},offset: 0,color: “#0069F5” // 0% 处的颜色}, {offset: 1,color: “#35C3FF” // 100% 处的颜色}], false)},}]饼图option = {
echart基本折线图/柱状图示例
zongzi494的博客
07-18 1788
echarts
echarts完整实例
10-20
这是我实际项目中的一个echarts完整实例，将echarts数值通过json方式从后台数据库中读取。
echarts示例代码
04-22
百度echarts的示例代码，有柱状图，折线图，雷达图
Echarts 地图图表示例
11-10
总之，ECharts地图图表示例是一个展示地理数据的强大工具，结合Baidu地图，可以更好地服务于中国的Web应用，帮助开发者轻松创建具有中国特色的地图可视化效果。通过深入了解ECharts的配置项和API，你能够创建出满足...
基于JavaScript的ECharts扩展示例（词云，水球图，烟花秀，关系图谱）
04-15
在本压缩包中，你将找到四个独特的ECharts扩展示例：词云图、水球图、烟花秀以及关系图谱。这些示例展示了ECharts在数据可视化领域的强大能力和创新性。 1. **词云图**： 词云图是一种用图形元素表示文本数据的...
echarts 官方示例 json文件
11-13
在 ECharts 的官方示例中，通常会提供 JSON 文件来展示不同图表的用法和配置。这些 JSON 文件包含了关于数据、图表属性、样式设置等关键信息。例如，在描述中提到的“全国各个地市，省份的 getJson 文件”，这可能是...
echarts示例
06-27
echarts使用示例，简单、易懂、易学习 echarts使用示例，简单、易懂、易学习
echarts图表示例教程
02-11
echarts图表示例教程
Echarts样例+个人笔记
11-03
Echarts有这样难吗？Echarts样例+个人笔记，在项目组专注于Echarts，经过这几个月的积累，现将个人笔记及案例奉上，希望对echarts初学者和初级开发者有所帮助！里面有别人开发中碰到的常见echarts样式调整代码！
Echarts实例
11-29
简单的Echars使用小demo,解压后，直接点html便可以看到效果
ECharts示例
04-28
ECharts示例
echarts图表实际开发样例（带详细注解）
apple596529的博客
07-27 616
饼图 样例一：（中间文字固定显示带提示框） 样例一配置项： option = { title: {//标题 text: '会话统计', x: 20, y: 20, textStyle: { color: '#3C4353', fontSize: 12 } }, graphic: [//固定文字或者图标 { type: 'text', left: 'center',
Echarts示例
可爱的鸡仔的博客
11-09 181
是百度开源的一个基于的可视化图表库。它提供了多种常见的数据可视化图表，包括等等。使用ECharts，用户可以通过简单的配置和接口调用来创建交互式和可定制的图表。ECharts广泛应用于数据分析、数据可视化、BI系统、大屏展示等领域。它已经成为一个流行的图表库，并且得到了广大开发者和用户的认可。
ECharts 实例
qq_46918406的博客
03-14 180
ECharts 实例
echarts 力图示例
11-05
Echarts力图示例是一种数据可视化方式，通过使用力导向算法展示节点之间的关系。这种图表可以帮助我们更好地理解和解读复杂的数据。 力图主要包括节点和边两个要素。节点代表数据的实体，可以是人、物、地点等，而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值