概述
<div>
<p>
柱条的样式-----itemStyle: 柱条的颜色（color）；
柱条的描边颜色（borderColor）、宽度（borderWidth）、样式（borderType）；
柱条圆角的半径（barBorderRadius）； 柱条透明度（opacity）；
阴影（shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY）。
</p>
<p>
柱条宽高---barWidth和BarHeight（可以为其设置最大最小的值barMaxWidth，barMinwidth）
</p>
<p>
柱条间距---barGap（不同系列在同一类目的距离
）和barCategoryGap（类目与类目的距离）----设置在最后一个柱状图系列上才会生效，并对此坐标系中所有柱状图生效。
</p>
<p>
柱条的背景色-----showBackground:true(开启)，详细的样式设置（backgroundStyle配置）
</p>
<p>
柱条的堆叠----stack（拥有同样 stack 值的系列将堆积在一组）
</p>
<p>
折线图--在折线图的拐点展示对应的数值（label:true）在鼠标放置上面展示对应的数值（emphaize:{label:true}）
</p>
<p>折线图的区域背景颜色---areaStyle</p>
<p>平滑折线图---（smooth:true）</p>
<p>阶梯线图---(step :'start'/'middle' / 'end'，</p>
</div>
<div>
<p>饼图---系列值(series:pie)</p>
<p>饼图半径---(radius:百分比/number值)</p>
<p>数据和为0的时候不显示饼图----（series.stillShowZeroSum=false）</p>
<p>圆环图---（radius:['内半径':'外半径']）</p>
<p>
<span>圆环图中间显示高亮扇形对应的文字（默认用扇形颜色显示数据的name）</span>
<span @click="implementation">具体实现大概是： </span>
</p>
</div>
<div>
<p>散点图-----系列值(series:scatter)</p>
<p>
点的形状（symbol：'echarts内置形状'/'自定义图片'/'svg的路径'）
1·内置形状---（'circle（原）''rect（矩）''roundRect（圆角矩）''triangle（三角）''diamond（菱）''pin（大头针）''arrow（箭头）'）
2·自定义图片---（image://绝对地址、网络地址）
3·svg图片-----（path://svg的值）路径的查看方法为，打开一个 SVG 文件，找到形如
<path d="M51.911,16.242C51.152,7.888,.013l18.11.97,16.611,51.911,16.242z"></path>
的路径，将 d 的值添加在 'path://' 后即可。
</p>
<p @click="symbalSizeFun">
点的大小---（symbalSize:number/["宽px","高px"]）
</p>
</div>
<div>
<p>富文本标签--rich</p>
</div>
implementation() {
let params = {
series: [
{
type: 'scatter',
data: [220, 182, 191, 234, 290, 330, 310],
options: {
label: false, //刚开始lebel展示为空
emphaise: {
show: true, //展示高亮区域
},
},
emphaise: {
//在高亮的时候展示标签
label: {
show: true,
fontSize: 20,
color: '#555555',
},
},
},
],
}
},
symbalSizeFun() {
let params = {
series: [
{
type: 'scatter',
data: [220, 182, 191, 234, 290, 330, 310],
symbolSize: function(value) {
return value / 10
},
},
],
}
},
1. 折线图（主要针对）
grid: {
bottom: '0%',
top: '23%',
right: '3%',
left: '3%',
containLabel: true, //echarts是否都被包含在canvas图的大小里
},
legend: {
icon: 'square', //图例的样式，分为square，circle,默认跟随series的symbol属性值
selectedMode: false, // 取消图例上的点击事件
data: typeName,
right: '20',
top: '5',
itemWidth: 9,
itemHeight: 9,
textStyle: {
//图例里面文字的样式（大小，颜色，粗细）
color: '#959ABB',
fontSize: 12,
},
},
// 提示框组件，用于配置鼠标滑过或点击图表时的显示框
tooltip: {
trigger: 'axis', ///触发类型 ->'axis'坐标轴触发；'none'：什么都不触发;'item'图形触发：散点图，饼图等无类目轴的图表中使用；
axisPointer: {
// 坐标轴指示器配置项。
type: 'line', // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
axis: 'auto', // 指示器的坐标轴。
snap: true, // 坐标轴指示器是否自动吸附到点上
},
showContent: true, //是否显示提示框浮层，默认显示。
// 一般情况下是提示框展示的文本内容
formatter: function(params) {
var relVal = "<div style='text-align:center;'>" + params[0].name + '</div>'
for (var i = 0, l = params.length; i < l; i++) {
relVal +=
'<br/>' +
"<div style='margin-top:-20px;display:flex;justify-content:space-between;align-items:center;'><span>" +
params[i].marker +
params[i].seriesName +
'：</span><span>' +
params[i].value +
suffix[i] +
'</span></div>'
}
return relVal
},
},
xAxis: [
{
type: 'category',
boundaryGap: false, // 从刻度0开始
data: xData,
axisLine: {
// x轴线的样式(颜色，粗细)
lineStyle: {
color: '#314977',
},
},
axisLabel: {
// x轴刻度的样式(颜色，粗细)
interval: 0, //x轴刻度之间相隔几个值
textStyle: {
color: '#959ABB',
},
},
axisTick: {
// x轴的刻度分割线是否展示
show: false,
},
splitLine: {
// x轴的刻度延伸线是否展示
show: false,
},
},
],
yAxis: [
{
show: true,
type: 'value',
name: suffix[0], //y轴的单位
minInterval: 1,
position: 'left', //y轴的位置(右y轴，左y轴)
nameTextStyle: {
//y轴的单位的样式
align: 'right',
padding: [0, 5],
color: '#959abb',
},
axisLine: {
// y轴刻度的样式(颜色，粗细)
lineStyle: {
color: '#314977',
shadowOffsetY: -25,
shadowColor: '#314977',
},
show: true,
},
axisTick: { show: false },
splitLine: {
show: false,
},
splitArea: { show: false }, // 保留网格区域
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#959ABB',
},
},
},
{
show: rightY,
type: 'value',
name: suffix[1],
position: 'right',
nameTextStyle: {
align: 'left',
padding: [0, 5],
color: '#959abb',
},
axisLine: {
lineStyle: {
color: '#314977',
shadowOffsetY: -25,
shadowColor: '#314977',
},
show: true,
},
axisTick: { show: false },
splitLine: {
show: true,
lineStyle: {
color: '#314977',
},
},
splitArea: { show: false }, // 保留网格区域
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#959ABB',
},
},
},
],
color: '#f4a64b',
series: [
{
name: typeName[0],
type: 'line', //echarts图的类型
symbolSize: 1, //echarts图上的标记点的大小
symbol: 'circle', //echarts图上的标记点
smooth: true, //折线图是否展示为圆滑的曲线
lineStyle: {
//折线图线条的颜色
normal: {
color: colorList[0],
},
},
itemStyle: {
//该条折线图悬浮框的颜色
color: colorList[0],
},
areaStyle: {
//折线图内区域的颜色
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, colorOffset[0]),
},
},
data: countTodayTrfc,
},
{
name: typeName[1],
type: 'line',
symbolSize: 1,
symbol: 'circle',
smooth: true,
yAxisIndex: yAxisIndex,
itemStyle: {
color: colorList[1],
},
lineStyle: {
normal: {
color: colorList[1],
},
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, colorOffset[1], false),
},
},
data: countYtdTrfc,
},
],
最后
以上就是缥缈哑铃为你收集整理的echarts图一般的样式属性，可以继续向里面进行添加1. 折线图（主要针对）的全部内容，希望文章能够帮你解决echarts图一般的样式属性，可以继续向里面进行添加1. 折线图（主要针对）所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复