使用echarts实现3d柱状图+折线图
更新时间：2024年12月18日 15:54:48 作者：吉吉安
这篇文章主要为大家详细介绍了如何使用echarts实现3d柱状图和折线图,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以了解一下
效果图
HTML
需要注意threeDchart一定要设置宽度高度，不然图不显示,然后echarts版本不要太低，不然也不显示
<div id="threeDchart" class="threeDchart"></div>
js
set3DBarChart2(data) {
var myChart = echarts.init(document.getElementById('middle-right-top-chart'));
data = [2000, 1529, 2251, 1173];
const CubeLeft = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x, shape.y];
const c1 = [shape.x - 9, shape.y - 9];
const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9];
const c3 = [xAxisPoint[0], xAxisPoint[1]];
ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
},
});
const CubeRight = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c1 = [shape.x, shape.y];
const c2 = [xAxisPoint[0], xAxisPoint[1]];
const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9];
const c4 = [shape.x + 18, shape.y - 9];
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
},
});
const CubeTop = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
},
buildPath: function (ctx, shape) {
const c1 = [shape.x, shape.y];
const c2 = [shape.x + 18, shape.y - 9];
const c3 = [shape.x + 9, shape.y - 18];
const c4 = [shape.x - 9, shape.y - 9];
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
},
});
echarts.graphic.registerShape('CubeLeft', CubeLeft);
echarts.graphic.registerShape('CubeRight', CubeRight);
echarts.graphic.registerShape('CubeTop', CubeTop);
let option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
tooltip: {
trigger: 'item',
formatter: (params) => {
let markerArr = params.marker.split('color:');
let marker = markerArr[0] + 'color:#1472FF;"></span>';
dataStr =
`<div style="color:#000A3A">
<div style="color:#666666">${params.name}</div>
<div>` +
marker +
`<span>合同金额</span>` +
`<span style="margin-left:15px">${params.data}万元</span></div>` +
`</div>`;
return dataStr;
},
},
xAxis: {
type: 'category',
data: ['隆德矿业', '榆横煤电', '锦兴能源', '不连沟'],
axisTick: {
show: false, // 不显示坐标轴刻度线
},
axisPoint: {
type: 'shadow',
},
axisLabel: {
textStyle: {
color: '#666666',
fontSize: '14',
},
},
},
yAxis: [
{
type: 'value',
min: 0,
name: '万元',
splitLine: {
show: true,
lineStyle: {
color: '#F0F0F0',
},
},
nameTextStyle: {
color: '#666666',
padding: [0, 30, 0, 0],
},
axisLabel: {
color: '#666666',
},
},
// 右侧纵向坐标轴
{
type: 'value',
name: '折线图值',
position: 'right', // 右侧显示
splitLine: {
show: false, // 不显示右侧坐标轴的分隔线
},
axisLabel: {
color: '#FF7F50',
},
nameTextStyle: {
color: '#FF7F50',
},
}
],
series: [
// 3D柱状图
{
type: 'custom',
renderItem: function (params, api) {
const location = api.coord([api.value(0), api.value(1)]);
return {
type: 'group',
children: [
{
type: 'CubeLeft',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#1D6CE2',
},
{
offset: 1,
color: 'rgba(51, 135, 234, 0.10)',
},
]),
},
},
{
type: 'CubeRight',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(51, 124, 234, 1)',
},
{
offset: 0.3,
color: 'rgba(51, 124, 234, 0.97)',
},
{
offset: 0.7,
color: 'rgba(51, 135, 234, 0.36)',
},
{
offset: 1,
color: 'rgba(51, 143, 234, 0.10)',
},
]),
},
},
{
type: 'CubeTop',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: '#1472FF',
},
},
],
};
},
data: data,
},
// 折线图
{
type: 'line',
name: '折线图',
smooth: true, // 平滑曲线
data: [2000, 1800, 2300, 1500], // 你可以根据实际数据修改这个数组
lineStyle: {
color: '#FF7F50',
width: 3,
},
symbol: 'circle', // 设置折线图标记为圆形
symbolSize: 8, // 设置圆形标记的大小
yAxisIndex: 1, // 使用右侧的 y 轴
},
],
};
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
},
到此这篇关于使用echarts实现3d柱状图+折线图的文章就介绍到这了,更多相关echarts 3d柱状图和折线图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家带来一篇基于ES6作用域和解构赋值详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
下面小编就为大家带来一篇js验证真实姓名与身份证号,手机号的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要为大家介绍了GoJs连线上的信息展示使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
TDesign是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系,下面这篇文章主要给大家介绍了关于前端的框架TDesign小程序组件库体验的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-11-11
STL是一种用于表示3D模型表面的文件格式,通常由三角形面片组成,STL 文件可以是ASCII（文本）或二进制格式,其中二进制格式更为常见,因为它更紧凑且加载速度更快,本文给大家介绍了javascript加载导出 STL文件的示例,需要的朋友可以参考下2024-12-12
这篇文章主要介绍了CSS3+JavaScript实现翻页幻灯片效果,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-06-06
这篇文章主要介绍了JS实现读取xml内容并输出到div中的方法,涉及javascript针对xml格式数据的读取、遍历、输出等相关操作技巧,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了javascript防篡改对象,结合实例形式分析了防篡改对象的三个级别与具体使用技巧,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了js字符串操作函数toString、split、length、indexOf、lastIndexOf、replace、replaceAll、charAt、charCodeAt、contact、slice、substring、substr、match、exec、search、trim、includes2023-08-08
javascript Array.prototype.slice的使用示例
javascript Array.prototype.slice除了常见的从某个数组中抽取出新的数组外，它还有一些其他的用法,下面就为大家讲这些妙用2013-11-11
最新评论