echarts折线图详解
https://echarts.baidu.com/echarts2/doc/option.html#tooltip-type~yAxis-i(value).type
参考地址
折线图
折线的颜色改变
#####type为category的时候的相关操作
#####yAxis的相关设置
axisLine
参数 show 表示y轴不显示
lineStyle 控制y轴的线条
有颜色 类型 宽 阴影等
axisLine: {
show: true,
lineStyle: {
color: 'green'
}
}
axisTick 显示坐标轴的刻度问题
axisTick: {
show: false,
}
当为false时候 不显示刻度
length可以控制线条的长度
lineStyle可以控制线条的类型、宽高、颜色等
axiLabel 控制y轴坐标的文字
margin 坐标轴文本标签与坐标轴的距离 不需要加marginRight 直接使用就可以
textStyle：{
}
可以控制文字的颜色 大小的等等
interval 可以进行显示刻度 如果 是0 默认刻度全部显示 如果是跳过几个 就加上数字
splitNumber: 3 分割y轴的段数
splitLine 设置y轴的水平线的 坐标轴的线条
splitLine: {
lineStyle: {
color: 'yellow'
}
}
可以设置其宽高 颜色 类型 也包括了x轴的那条线
splitArea 控制覆盖区域的颜色等
splitArea: {
areaStyle: {
color: 'green'
}
}
data
data: [
120, 1800, 3500, 5200, {
value: 1800,
textStyle: { //详见textStyle
color: 'red',
fontSize: 20
}
},
]
指定某个值 进行强调的显示
上面的数据也将作为 formatter 里面的值
type为value时的相关操作
show: false不显示
当有max和min的时候 将根据max和min进行调整相关轴坐标的间距
// min: 120,
// max: 5200
当有不设置max和min的时候 就可以自己指定分段进行调整
splitNumber: 3,
这种可以适合在min和max中间不是等间距的情况 也就是他们之间相隔的大小不一样大
axisTick
inside 坐标轴的小标记 控制其在内部或者在外部
小标记是否显示为在grid内部，默认在外部
以及小标记的长度或者线条的类型
axisLabel 控制坐标轴的文字的相关操作
series的相关设置
backgroungColor设置被折线连起来区域的颜色
设置折线的颜色
itemStyle: {
normal: {
lineStyle: {
color: 'red'
}
}
}
可以加上width等其他的样式进行控制
控制被折线连起来的区域颜色
areaStyle: {
color: 'green'
}
上面这两种比较严格的写法时下面这一种
itemStyle: {
normal: {
lineStyle: {
color: 'red',
width: 1
},
areaStyle: {
color: 'green'
}
}
},
y轴的一些相关配置
https://www.cnblogs.com/surui/p/8484447.html 网址
axisLabel: {
formatter: function(value) {
var texts = [];
if (value == 0) {
texts.push(120);
}
if (value == 1800) {
texts.push('1.8千');
}
if (value == 3500) {
texts.push('3.5千');
}
if (value == 5200) {
texts.push('5.2千');
}
return texts
},
color: 'green',
fontSize: 14,
margin: 20,
interval: 2
},
#####去除0刻度
yAxis.scale | boolean
[ default: false ]
只在数值轴中（type: 'value'）有效。
是否是脱离 0 值比例。
设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
注意：在设置 min 和 max 之后该配置项无效。
在axislabel设置
show: false, 将隐藏刻度线
https://www.cnblogs.com/tugenhua0707/p/9380378.html 柱状图详解
当图形显示不出来的时候 可能你没有给他加上宽高
.bar {
width: 100%;
height: 500px;
}
记住 深坑
字体图标使用fonticont
记住一定保存住原来下载的图标 以便下次更新项目的图标的时候 可以更改文件
使用awesome图标的缺点
就是字体图标的粗细很难去控制 所以还是少用
折线图 数据得修改
data: [{name:321,value:820}, {name: 2019, value: 932}]
如果是数组 每一项可以改成 name 加value 一样可以进行显示