“我正在参加「掘金·启航计划」”
学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~
效果图：
代码如下：
myChart1() {
var chart1 = echarts.init(document.querySelector('#myChart1'));
let xData = ['火电', '水电', '风电', '光伏', '煤炭', '化工', '运输'],
yData = [100, 120, 130, 150, 90, 140, 160],
barData = ['30', '20', '10', '40', '25', '35', '45'];
color = ['rgba(32, 130, 239, 0.78)', 'rgba(84, 94, 192, 0.3)'];
chart1Option = {
grid: {
top: '15%',
left: '5%',
bottom: '15%',
right: '5%',
containLabel: true,
},
color:['rgba(32, 130, 239, 0.9)', 'rgba(84, 94, 192, 0.3)'],
legend: {
data: ['合同总金额', '结算金额'],
itemWidth: 14,
itemHeight: 8,
bottom: 0,
left: 'center',
color: ['rgba(32, 130, 239, 0.78)', 'rgba(84, 94, 192, 0.3)'],
itemStyle: {
},
textStyle: {
color: '#A1ECFF',
fontSize: 12,
fontWeight: 400
}
},
tooltip: {
trigger: 'item',
},
animation: false,
xAxis: [
{
type: 'category',
data: xData,
axisTick: {
alignWithLabel: true,
},
axisLine: {
show: true,
lineStyle: {
color: '#0C4F81',
type: 'dashed',
width: 1,
}
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 400,
},
margin: 30,
},
interval: 1,
},
],
yAxis: [
{
show: true,
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#0C4F81',
type: 'solid',
width: 1,
}
},
axisLabel: {
show: true,
textStyle: {
color: '#4F88BD',
fontSize: 12,
fontWight: 400
}
},
splitLine: {
show: true,
lineStyle: {
color: '#0C4F81',
type: 'dashed',
width: 1,
}
}
},
],
series: [
{
name: '上部圆',
type: 'pictorialBar',
silent: true,
symbolSize: [40, 10],
symbolOffset: [0, -6],
symbolPosition: 'end',
z: 12,
label: {
normal: {
show: true,
position: 'top',
fontSize: 12,
fontWeight: 400,
color: '#fff',
},
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
{
offset: 0,
color: 'rgba(55, 130, 211, .5)',
},
{
offset: 1,
color: 'rgba(55, 130, 211, .5)',
},
]),
data: yData,
},
{
name: '底部圆',
type: 'pictorialBar',
silent: true,
symbolSize: [40, 10],
symbolOffset: [0, 7],
z: 12,
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
{
offset: 0,
color: 'rgba(105, 118, 246, 0.7)',
},
{
offset: 1,
color: 'rgba(105, 118, 246, 0.01)',
},
]),
data: yData,
},
{
name: '合同总金额',
type: 'bar',
barWidth: '40',
barGap: '10%', // Make series be overlap
barCateGoryGap: '10%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
{
offset: 0,
color: 'rgba(32, 130, 239, .3)',
},
{
offset: 1,
color: 'rgba(32, 130, 239, .3)',
},
]),
opacity: 0.8,
},
},
data: yData,
},
{
name: '结算金额',
type: 'bar',
barWidth: 40,
z: 12,
barGap: '-100%',
itemStyle: {
//lenged文本
opacity: 0.7,
color: function (params) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(32, 130, 239, 0.9)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(84, 94, 192, 0.5)', // 100% 处的颜色
},
],
false
);
},
},
data: barData,
},
{
name: '上部圆',
type: 'pictorialBar',
silent: true,
symbolSize: [40, 10],
symbolOffset: [0, -6],
symbolPosition: 'end',
z: 12,
color: '#3782D3',
data: barData,
label: {
// normal: {
show: true,
position: 'inside',
fontSize: 18,
fontWeight: 'bold',
fontFamily: 'DS-Digital',
color: '#E5F8FC',
formatter: '{c}%'
// },
},
},
{
name: '底部圆',
type: 'pictorialBar',
silent: true,
symbolSize: [40, 10],
symbolOffset: [0, 7],
z: 12,
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
{
offset: 0,
color: 'rgba(105, 118, 246, 0.1)',
},
{
offset: 1,
color: 'rgba(105, 118, 246, 0.7)',
},
]),
data: barData,
},
],
};
感谢大家阅读⭐️⭐️⭐️，如果喜欢，可以点赞或留言哟💕💕💕
后续会持续更新记录😊~~~
近期热门文章
- 实现Echarts 3D立体中国地图实现、世界地图、以及互相切换功能
- lucky-canvas 抽奖
- 宏任务和微任务的理解
- Js数组去重的多种方法
- vue使用echarts 实现世界地图、中国地图、以及下钻地图绘制
- JavaScript 的几种循环方式
- Js 数据类型转换的几种方式
- 手写【横柱带斜三角】进度条实现
专栏推荐
推荐一下自己的专栏，欢迎大家收藏关注😊~
