echarts柱状图上方显示图标,vue echart 组件
本文主要详细介绍Vue的Echart图标插件的直方图。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
Echart是一个很好的图表绘制插件，有各种图表供我们选择。最近，Echart已用于更多图表，因此现在记录所用直方图的一些配置和用法：
主要注意的点：
1.创建的画布必须具有给定的大小，否则无法显示。
2.当xAxis中的数据默认为空时，xAxis的描述不存在。XAXIS中axisLabel的interval值表示每隔几列显示一次，默认值为1。
3.数列是图表的数据中心，数据是传入的数据。您可以通过barMaxWidth设置列宽。
4.重点是柱子的颜色。系列中itemStyle的颜色用于设置柱子的颜色。如果柱子想要使用不同的颜色，需要先自定义一个数组来存储颜色字符串，然后通过遍历来渲染颜色。
好了，废话不多说，直接上代码。代码的注释非常详细，应该可以理解。
模板
div class=计数-图表-包装
div class=图表标题
工程交付统计
Span(过去六天)/span
/div
div class=" count-chart " ref=" chart "/div！-必须设置宽度和高度-
/div
/模板
脚本
从“echarts”导入e charts；
导出默认值{
data() {
返回{
颜色列表：[
//设置发货帖子的常用帖子颜色。
#69D3BE ，
#9D9E9F ，
#F88282
],
颜色列表2: [
//如果设置了投递帖，帖子会逐渐变色。
[#0282DE ， #3F28D0]，
[#FED701 ， #E66938]，
[#67E0E3 ， #0181DE]
]
};
},
已安装(){
this . init chart()；
},
方法：{
//初始化图表样式
initChart() {
this.chart=echarts.init(this。$ refs . chart)；
let _ this=this
this.chart.setOption({
网格：{
左：“50”
//右边：“60”
},
图例：{
秀：假的，
数据：this.legends
},
工具提示：{
触发器：“轴”，
秀：真的，
axisPointer: {
//轴指示器，轴触发器有效。
类型： shadow //默认为直线，可选： line shadow
}
},
xAxis: {
AxisLine: {show: false }，//轴
AxisTick: {show: false }，//scale
类型：“类别”，
数据：[一，二，三，四，五，六]，//X轴显示
axisLabel: {
颜色： #333 ，
间隔：0 //0:非隔行显示，1:每隔一行显示。
}
},
亚西斯：{
类型：“值”，
nameTextStyle: {
fontWeight:粗体，
对齐：“左”，
填充：[0，50，10，0]，
颜色： #ffffff
},
AxisLine: {show: false }，//轴
AxisTick: {show: false }，//scale
axisLabel: {
颜色： #333 ，
格式化程序：`{value}`//Y轴显示形式，值，百分比
}
},
系列：[
{//实现渐变的列
数据：[1 ， 2 ， 3 ， 1 ， 2 ，//显示的数据
类型：“条形”，
平滑：真，//平滑
符号：无，
线型：{
颜色： #FF5858
},
BarMaxWidth: 30，///设置列的宽度。
项目样式：{
正常：{
标签:{
Show: true，//打开显示器
位置：“顶部”，//显示在顶部
textStyle: {
//数字样式
颜色： #222 ，
字体大小：14
}
},
color: params={
let color list=_ this . color list 2；//实现列的渐变数组
let index=params.dataIndexdataindexdata中数据的下标
if(params . dataindex=color list . length){
index=params . data index-colorlist . length；
}
返回新的charts.graphic.linear渐变(0，0，0，1，[//渐变用法
{ offset: 0，color: colorList[index][0] }，
{ offset: 1，color: colorList[index][1] }
]);
}
}
}
},
{//实现普通色的柱子
数据：[2.5 , 3.5 , 1.5 , 2.5 , 1.5 ],
类型："条形",
平滑：真，//平滑
符号：无，
线型：{
颜色： #FF5858
},
barMaxWidth: 30，
项目样式：{
正常：{
标签:{
show: true，//开启显示
位置："顶部",//在上方显示
textStyle: {
//数值样式
颜色： #222 ,
字体大小：14
}
},
color: params={
让颜色列表=_ this。颜色列表；//柱子的颜色是普通的颜色
let index=params.dataIndex
if(params。dataindex=颜色列表。长度){
索引=参数。数据索引-颜色列表。长度；
}
返回颜色列表[索引];
}
}
}
}
]
});
}
}
};
/脚本
风格。计数图表包装器{
宽度：800像素
边距：0自动；
背景色：仿古白；
}。计数图表{
位置：相对；
边距：0自动；
宽度：400像素
高度：400像素
}
/风格
结果图样：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。