使用echarts實(shí)現(xiàn)3d柱狀圖+折線圖
更新時(shí)間：2024年12月18日 15:54:48 作者：吉吉安
這篇文章主要為大家詳細(xì)介紹了如何使用echarts實(shí)現(xiàn)3d柱狀圖和折線圖,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以了解一下
效果圖
HTML
需要注意threeDchart一定要設(shè)置寬度高度，不然圖不顯示,然后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}萬(wàn)元</span></div>` +
`</div>`;
return dataStr;
},
},
xAxis: {
type: 'category',
data: ['隆德礦業(yè)', '榆橫煤電', '錦興能源', '不連溝'],
axisTick: {
show: false, // 不顯示坐標(biāo)軸刻度線
},
axisPoint: {
type: 'shadow',
},
axisLabel: {
textStyle: {
color: '#666666',
fontSize: '14',
},
},
},
yAxis: [
{
type: 'value',
min: 0,
name: '萬(wàn)元',
splitLine: {
show: true,
lineStyle: {
color: '#F0F0F0',
},
},
nameTextStyle: {
color: '#666666',
padding: [0, 30, 0, 0],
},
axisLabel: {
color: '#666666',
},
},
// 右側(cè)縱向坐標(biāo)軸
{
type: 'value',
name: '折線圖值',
position: 'right', // 右側(cè)顯示
splitLine: {
show: false, // 不顯示右側(cè)坐標(biāo)軸的分隔線
},
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], // 你可以根據(jù)實(shí)際數(shù)據(jù)修改這個(gè)數(shù)組
lineStyle: {
color: '#FF7F50',
width: 3,
},
symbol: 'circle', // 設(shè)置折線圖標(biāo)記為圓形
symbolSize: 8, // 設(shè)置圓形標(biāo)記的大小
yAxisIndex: 1, // 使用右側(cè)的 y 軸
},
],
};
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
},
到此這篇關(guān)于使用echarts實(shí)現(xiàn)3d柱狀圖+折線圖的文章就介紹到這了,更多相關(guān)echarts 3d柱狀圖和折線圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
用javascript實(shí)現(xiàn)的激活輸入框后隱藏初始內(nèi)容
用javascript實(shí)現(xiàn)的激活輸入框后隱藏初始內(nèi)容...2007-06-06
event對(duì)象獲取方法總結(jié)在google瀏覽器下測(cè)試
Event 對(duì)象代表事件的狀態(tài)，比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài)，Event對(duì)象的獲取方法如下，感興趣的朋友可以參考下2013-11-11![JS 動(dòng)態(tài)獲取節(jié)點(diǎn)代碼innerHTML分析 [IE,FF]](http://img.jbzj.com/images/xgimg/bcimg2.png)
JS 動(dòng)態(tài)獲取節(jié)點(diǎn)代碼innerHTML分析 [IE,FF]
在IE 環(huán)境下 賦值類型為對(duì)象時(shí) innerHTML 獲取不到其改變，在FireFox環(huán)境下 .屬性 方式獲取不到其改變。2009-11-11
解決JavaScript中0.1+0.2不等于0.3問(wèn)題
這篇文章主要介紹了解決JavaScript中0.1+0.2不等于0.3問(wèn)題,需要的朋友可以參考下2018-10-10
js樹形菜單全選2008-07-07
javascript full screen 全屏顯示頁(yè)面元素的方法
要想讓頁(yè)面的某個(gè)元素全屏顯示，就像在網(wǎng)頁(yè)上看視頻的時(shí)候，可以全屏觀看一樣，該怎么實(shí)現(xiàn)呢2013-09-09
利用Ext Js生成動(dòng)態(tài)樹實(shí)例代碼
今天在公司幫同事寫了個(gè)用Ext Js生成動(dòng)態(tài)樹的Demo，在這里分享一下，也好供以后自己查閱。2008-09-09
這篇文章主要介紹了JS中setTimeout()的用法，setTimeout()是屬于window的method，但我們都是略去window這頂層對(duì)象名稱，這是用來(lái)設(shè)定一個(gè)時(shí)間，時(shí)間到了，就會(huì)執(zhí)行一個(gè)指定的method，需要深入了解的朋友可以參考下2016-01-01
原生JS+CSS實(shí)現(xiàn)炫酷重力模擬彈跳系統(tǒng)的登錄頁(yè)面
今天小編給大家分享基于原生JS實(shí)現(xiàn)一個(gè)炫酷的登錄頁(yè)面，實(shí)現(xiàn)效果有點(diǎn)像重力模擬彈跳系統(tǒng)，效果非常棒，需要的朋友參考下實(shí)現(xiàn)代碼吧2017-11-11
JS實(shí)現(xiàn)延遲隱藏功能的方法(類似QQ頭像鼠標(biāo)放上展示信息)
下面小編就為大家分享一篇JS實(shí)現(xiàn)延遲隱藏功能的方法(類似QQ頭像鼠標(biāo)放上展示信息)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12