ECharts柱狀排名圖柱子上方顯示文字與圖標(biāo)代碼實(shí)例
更新時(shí)間：2023年11月02日 11:05:03 作者：陳大大9527
我們在繪制柱狀圖時(shí)如果想要柱條上顯示文字,可以參考本文,這篇文章主要給大家介紹了關(guān)于ECharts柱狀排名圖柱子上方顯示文字與圖標(biāo)的相關(guān)資料,需要的朋友可以參考下
直接上干貨！
效果如下：
代碼如下：
methods: 中的方法
initChart() {
let that = this;
const fontColor = '#00D8FE'
this.chart = this.$echarts.init(this.$refs.chart);//this.chart是data() {return {chart: null}}中創(chuàng)建的屬性
var option = {
grid: {
//柱狀圖位置
top: "18%",
left: "5%",
right: "4%",
bottom: "5%",
containLabel: true,
},
// 柱圖的標(biāo)題文字
// title: {
// text: '平均游覽時(shí)長：' + this.averageTime + '小時(shí)',
// textStyle: {
// align: 'left',
// color: '#18F6FF',
// fontSize: that.$base.nowSize(14),
// },
// top: '5%',
// left: '15%',
// },
tooltip: {
show: true,
trigger: "axis",
axisPointer: {
type: "shadow",
shadowStyle: {
color: "#65A3FF",
opacity: 0.2,
width: "auto",
},
},
textStyle: {
color: "#FFFFFF",
fontFamily: "MicrosoftYaHei",
fontSize: that.$base.nowSize(14),
},
borderWidth: 0,
borderRadius: 5,
padding: 0,
backgroundColor: "transparent",
formatter: function (v) {
var str =
'<span>' +
v[0].name +
"：" +
v[0].data +
"人</span><br/>";
var inner =
'<div style="color: #fff;text-align: left;font-family:Microsoft YaHei;line-height:' +
that.$base.nowSize(22) +
"px;font-size:" +
that.$base.nowSize(14) +
"px;padding: " +
that.$base.nowSize(5) +
"px " +
that.$base.nowSize(10) +
'px; border-radius:' +
that.$base.nowSize(8) +
'px; background: linear-gradient(90deg, #286CE9 0%, #6004F4 100%);">' +
str +
"</div>";
return inner;
},
},
xAxis: [
{
type: "category",
data: ['光華小區(qū)', '光華小區(qū)', '光華小區(qū)', '光華小區(qū)', '光華小區(qū)', '光華小區(qū)', '光華小區(qū)', '光華小區(qū)', '光華小區(qū)', '光華小區(qū)'],
axisLine: {
//x軸樣式
show: false
},
axisTick: {
//軸線刻度
show: false
},
shadowBlur: 10,
axisLabel: {
show: true,
interval: 0,//使x軸文字顯示全
textStyle: {
color: "#FFFFFF",
fontSize: that.$base.nowSize(12),
},
inside: false,
// rotate: 20,
},
splitLine: {
show: false
},
},
],
yAxis: [
{
type: "value",
name: "",
nameLocation: "end",
nameTextStyle: {
fontFamily: "Source Han Sans CN",
color: "#26BCF8",
opacity: 0.7,
},
axisLine: {
//y軸樣式
show: false
},
axisLabel: {
show: false,
inside: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
},
],
series: [
{
//柱的信息
name: "體育健康",
type: "bar",
data: [200, 170, 167, 150, 146, 132, 120, 115, 100, 80],
itemStyle: {
normal: {
barBorderRadius: 0,
color: function (params) {
//漸變色，也可以直接用數(shù)組給不同的柱子設(shè)置不同的顏色
return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(103, 245, 200, 1)",
},
{
offset: 1,
color: "rgba(89, 252, 198, 0)",
},
]);
},
}
},
emphasis: {
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#F9E142' // 0% 處的顏色
}, {
offset: 1, color: '#40523F' // 100% 處的顏色
}],
global: false // 缺省為 false
},
}
},
// 只能展示數(shù)據(jù)中的value字段
label: {
show: false,
position: 'top',
color: fontColor,
fontSize: that.$base.nowSize(14)
},
zlevel: 11,
barWidth: that.$base.nowSize(10), //柱子寬度
markPoint: {
symbol:'rect',// circle:圓形，rect:方形
itemStyle:{
normal:{
label:{
show:true,
color:'#fff',
position: 'top',
color: fontColor,
fontSize: that.$base.nowSize(14),
formatter: function (param) {
// if(param.data.coord[1]>20){
// return '優(yōu)秀'
// }else if (param.data.coord[1]>10){
// return '良好'
// } else {
// return '不達(dá)標(biāo)'
// }
return param.name
}
},
color:'rgba(89, 252, 198, 0)'
}
},
symbolSize:[50, 50],
symbolOffset:[0,24],
// data中的數(shù)據(jù)，name字段是你想要展示的內(nèi)容，coord字段中的第一個(gè)數(shù)是指第幾個(gè)柱子，第二個(gè)字段是柱子的值
data:[
{name:'Top1',coord:[0,200]},
{name:'Top2',coord:[1,170]},
{name:'Top3',coord:[2,167]},
{name:'Top4',coord:[3,150]},
{name:'Top5',coord:[4,146]},
{name:'Top6',coord:[5,132]},
{name:'Top7',coord:[6,120]},
{name:'Top8',coord:[7,115]},
{name:'Top9',coord:[8,100]},
{name:'Top10',coord:[9,80]},
],
},
// markLine: {
// data: [
// {type: 'average', name: '平均值'}
// ]
// }
},
],
};
option && this.chart.setOption(option);
},
// tooltip 自動循環(huán)展示
setHighlightFun() {
this.chart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: this.loopIndex,
position: (pos, params, dom, rect, size) => {
this.$utils.positionFun(pos, params, dom, rect, size)
},
});
this.loopIndex++;
// this.resData 是data() {return {resData: []}}中創(chuàng)建的屬性,內(nèi)容是對應(yīng)的柱圖的數(shù)據(jù)條數(shù)的數(shù)據(jù)
if (this.loopIndex == this.resData.length) {
this.loopIndex = 0;
}
},總結(jié)
到此這篇關(guān)于ECharts柱狀排名圖柱子上方顯示文字與圖標(biāo)的文章就介紹到這了,更多相關(guān)ECharts柱狀排名圖顯示文字內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Layui事件監(jiān)聽的實(shí)現(xiàn)(表單和數(shù)據(jù)表格)
這篇文章主要介紹了Layui事件監(jiān)聽的實(shí)現(xiàn)(表單和數(shù)據(jù)表格)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
在學(xué)習(xí)JavaScript中的繼承機(jī)制時(shí),我們常常會遇到原型和原型鏈這兩個(gè)概念,在初學(xué)階段,不理解這些概念很容易陷入迷茫,甚至?xí)?dǎo)致學(xué)習(xí) JS 的路程變得曲折,本文將介紹JavaScript原型和原型鏈的概念、設(shè)計(jì)思想以及相關(guān)的使用方法,需要的朋友可以參考下2023-07-07
nodejs最近好紅火，我也趁寒冷天氣在nodejs的火爐邊取暖一下?？s址還原實(shí)現(xiàn)代碼。2010-12-12
下面小編就為大家?guī)硪黄宄齤s緩存的多種方法總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
javascript實(shí)現(xiàn)數(shù)字+字母驗(yàn)證碼的簡單實(shí)例
本篇文章只要是對javascript實(shí)現(xiàn)數(shù)字+字母驗(yàn)證碼的簡單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
Javascript 多瀏覽器兼容總結(jié)(實(shí)戰(zhàn)經(jīng)驗(yàn))
多瀏覽器兼容一直都是前端備受關(guān)注的問題，本文整理了一些實(shí)戰(zhàn)的經(jīng)驗(yàn)，個(gè)人感覺還不錯(cuò)，需要的朋友可以參考下2013-10-10
Next.js應(yīng)用轉(zhuǎn)換為TypeScript方法demo
這篇文章主要為大家介紹了Next.js應(yīng)用轉(zhuǎn)換為TypeScript方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
js進(jìn)階語法之變量提升、函數(shù)提升以及參數(shù)的命名沖突問題解決
JavaScript代碼在執(zhí)行前會經(jīng)歷一個(gè)預(yù)處理階段,這個(gè)階段主要涉及變量提升和函數(shù)提升,下面這篇文章主要介紹了js進(jìn)階語法之變量提升、函數(shù)提升以及參數(shù)的命名沖突問題解決的相關(guān)資料,需要的朋友可以參考下2024-09-09
微信小程序uploadFile接口實(shí)現(xiàn)文件上傳
這篇文章主要介紹了微信小程序uploadFile接口實(shí)現(xiàn)文件上傳流程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要展示了JS文字球狀放大效果，和放大鏡放大文字一樣，很神奇的代碼，感興趣的小伙伴們可以參考一下2015-08-08