我是靠谱客的博主 虚拟猫咪，最近开发中收集的这篇文章主要介绍echart：关于echart的标签样式、饼图上显示百分比、标识线样式、图表字体颜色等一堆小问题合集，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
当自己的备忘录，下次就不用去一个个百度了哈哈
title: {
text: '天气情况统计', //标题
subtext: '虚构数据', //副标题
left: 'center'//标题位置
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)" //鼠标移上去显示的内容
},
normal: {
show: true,
position: 'inside', //图形里显示（比如在饼图块上显示百分比）
formatter: '{d}%' //显示的内容
},
textStyle : {
fontWeight : 'normal', //显示字体粗细等
fontSize : 10
},
legend: { //图例
// top: 'middle',
// bottom: 10,
// left: 'center',
icon: "circle", //圆点形图例（默认是官网上的圆角矩形）
itemWidth: 10, //这几个是图例宽高位置等的设置
itemHeight: 10,
itemGap: 20,
left: 100,
top: 110,
bottom: 20,
textStyle: {
// fontSize: 5
color:"#fff" //图例字体颜色等
},
data: ['规划问题', '设计问题','优化问题','维护问题']
},
series : [
{
type: 'pie', //图表类型 这里是饼图
radius : '35%', //饼图大小
center: ['50%', '50%'], //在div中位置
selectedMode: 'single',
labelLine:{
normal:{
length:4 //标识线
}
},
data:[
{value:64,name: '规划问题'}, //数据
{value:73, name: '设计问题'},
{value:80, name: '优化问题'},
{value:80, name: '维护问题'},
],
label:{ //饼图图形上的文本标签
normal:{
show:true,
position:'inner', //标签的位置
textStyle : {
fontWeight : 300 ,
fontSize : 10 //文字的字体大小
},
formatter:'{d}%' //显示%
}
},
itemStyle: {
emphasis: {
shadowBlur: 10, //阴影设置
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
toolbox: { //工具组小按钮等
show:true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
//magicType: {type: ['line', 'bar']},//折线图、柱状图切换
//restore: {},//恢复，即刷新图表
//saveAsImage: {}//保存为图片
}
},
xAxis: { //设置横坐标（折线图里使用）
type: 'category',
axisLabel: {//横坐标的控制
show:true,//是否显示横坐标数据
rotate: 30,//坐标的倾斜角度
inside:false,//刻度是否朝内
margin:8,//标尺与轴线的距离，默认8
},
boundaryGap: false,
data: ['05.02','05.03','05.04','05.05','05.06','05.07','05.08']
},
graphic:{ //环形图中间显示字
type:'text',
left:'center',
top:'center',
style:{
text:'xxxxxxx',
textAlign:'center',
fill:'#000',
width:30,
height:30
}
},先放这些，后面遇到了陆续更新~~~~
2019-8更新：
//仪表盘相关
function echart_5() {
// 基于准备好的dom，初始化echarts
var myChart = echarts.init(document.getElementById('chart_5'));
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}" //鼠标放上的数据显示
},
// toolbox: { //小工具栏
// show : true,
// feature : {
// mark : {show: true},
// restore : {show: true},
// saveAsImage : {show: true}
// }
// },
series : [
{
name:'指标',
type:'gauge',
min:0, //仪表盘最小值
max:1000, //仪表盘最大值
splitNumber: 10, // 分割段数单位，默认为5
radius: '68%', //表盘大小
center: ["50%", "60%"], // 仪表位置
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']],
width: 2, //仪表盘外围圆宽度
shadowColor : '#fff', //默认透明
shadowBlur: 10 //阴影效果
}
},
axisTick: { // 坐标轴小标记
splitNumber: 5, // 每份split细分多少段
length :6, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
axisLabel: {
show:false
},
splitLine: { // 分隔线
show: true, // 默认显示，属性show控制显示与否
length :2, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
width:2, //线宽
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer : {
width : 2 //指针宽度大小
},
title : {
show : true,
offsetCenter: [0, '100%'], // x, y，单位px 标题位置
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder', //标题文本设置
fontSize: 10,
color: '#fff',
}
},
detail : {
formatter:'{value}',
offsetCenter: [0, '30%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 14,
color: '#fff'
}
},
data:[{value: 554, name: '位置告警'}] //name表盘标题 value初始数
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
// setInterval(function (){
// option.series[0].data[0].value = (Math.random()*20).toFixed(2) - 0;
// myChart.setOption(option,true);
// },2000);
data= [600,580,620,670,550,560,600,670,700,750,610,670,723,590,780,770,790,820,870,890,920,990];//自己的数据
index=0;
setInterval(function(){//将自己的值赋予 option.series[ 0 ].data[ 0 ].value
option.series[0].data[0].value = data[index++%data.length];
myChart.setOption(option, true);
}, 2000);
}圆环图：
function echart_22() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart_22'));
option = {
title: {
text: '现状',top:'10%',left:'center', //标题相关
textStyle:{
color:'#fff', //颜色
fontStyle:'normal', //风格
fontWeight:'normal', //粗细
// fontFamily:'Microsoft yahei', //字体
fontSize:14, //大小
textAlign:'center' //水平对齐
},
},
color:['#218BB4','#5AA949','#C23531','#7121B4'],
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
itemWidth: 8, // 设置宽度
itemHeight: 8, // 设置高度
textStyle:{
color:"#fff",
fontSize: 10
},
orient: 'vertical',
left: 'center', //图例距离左的距离 center为居中 可设置数字 例'9'
top:'24%', //图例距离上的距离
data:['干线放大器','模拟直放站','','无线直放站','数字直放站'],//图例换行'',
},
grid: {
left: '-20%',//生成的图片和左边的间距
// right: '2%',//生成的图片和右边的间距’,
// bottom: '10%',//生成的图片和底部的间距
top: '20%',//生成的图片和顶部的间距
containLabel: true//为ture才会生效以上的设置
},
series: [
{
name:'count',
type:'pie',
radius: ['30%', '55%'], //大小圆环大小
center: ['50%', '70%'], //在div中位置
avoidLabelOverlap: false,
label: {
normal: {
show: true,
formatter: '{d}%', //显示的内容
position: 'inner', //显示的位置在扇形上 center为圆环中间
textStyle: {
fontSize: '10',
color:'#fff'
}
},
// emphasis: {
// show: true,
// textStyle: {
// fontSize: '12',
// fontWeight: 'bold'
// }
// }
},
labelLine: {
normal: {
show: false //连接线提示
}
},
data:[ //数据
{value:10, name:'干线放大器'},
{value:5, name:'无线直放站'},
{value:15, name:'模拟直放站'},
{value:70, name:'数字直放站'}
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}柱状图：
function echart_1() {
var myChart = echarts.init(document.getElementById('chart_1'));
var option = {
// title: {
// text: 'ECharts 入门示例'
// },
//颜色，设置完自动柱子颜色就对应了
color:['#ef5f2b','#4a6ac4','#77cd63','#a325c0','#369ebc','#e2a83f'],
tooltip: {},
legend: {
data:['GSM','WCDMA','LTE','WLAN','NB-LOT','LORA'],
textStyle:{
color:"#fff",
fontSize: 10
},
icon: "circle", // 图例 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 8, // 图例设置宽度
itemHeight: 8, // 图例设置高度
itemGap: 10,// 图例设置间距
padding: [40, 10, 15, 20] // 图例padding[5, 10, 15, 20]
},
dataset: {
source: [
['x','需整改','需增补','需新建','需扩容'],
['GSM', 10, 0, 0, 0, 0, 0],
['WCDMA', 20, 0, 0, 0, 0, 0],
['LTE', 125, 124, 226, 38, 45, 29],
['WLAN', 38, 36, 148, 13, 25, 10],
['NB-LOT', 25, 43, 38, 30],
['LORA', 28, 31, 26, 12]
]
},
xAxis: [
{
// data: ['需整改','需增补','需新建','需扩容'],
type: 'category', gridIndex: 0,
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#fff",
}
},
axisLabel: { //x轴文字样式
textStyle: {
fontSize: 13
}
},
}
],
yAxis: [
{
gridIndex: 0,
//设置坐标轴字体颜色和宽度
axisLine: {
lineStyle: {
color: "#fff",
}
},
axisLabel: { //x轴文字样式
textStyle: {
fontSize: 10
}
},
}
],
grid: [ //位置
{top: '22%',
bottom: '20%',
// left: '10%',
// right:'5%'
},
],
series: [
// barWidth柱子宽度 barGap柱子间距
{type: 'bar', seriesLayoutBy: 'row', barWidth:14, barGap:'10%',},
{type: 'bar', seriesLayoutBy: 'row', barWidth:14, barGap:'10%',},
{type: 'bar', seriesLayoutBy: 'row', barWidth:14, barGap:'10%',},
{type: 'bar', seriesLayoutBy: 'row', barWidth:14, barGap:'10%',},
{type: 'bar', seriesLayoutBy: 'row', barWidth:14, barGap:'10%',},
{type: 'bar', seriesLayoutBy: 'row', barWidth:14, barGap:'10%',},
//
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// window.addEventListener("resize", function () {
// myChart.resize();
// })
}
最后
以上就是虚拟猫咪为你收集整理的echart：关于echart的标签样式、饼图上显示百分比、标识线样式、图表字体颜色等一堆小问题合集的全部内容，希望文章能够帮你解决echart：关于echart的标签样式、饼图上显示百分比、标识线样式、图表字体颜色等一堆小问题合集所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复