电子商务网站系统规划,百度官方网站,长尾词优化外包,企业域名价格问#xff1a;
用echarts实现#xff1a;默认显示两柱子折线#xff0c;点击“税率”按钮#xff0c;显示税率柱子#xff0c;之前的两柱子折线消失
回答#xff1a;
!DOCTYPE html
html langzh
headmeta charsetUTF-8…问
用echarts实现默认显示两柱子折线点击“税率”按钮显示税率柱子之前的两柱子折线消失
回答
!DOCTYPE html
html langzh
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleECharts 示例/titlescript srchttps://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js/scriptstyle#main {width: 600px;height: 400px;}/style
/head
bodydiv idmain/div
button idtoggleButton切换图表/buttonscript
// 初始数据
const data {xAxisData: [类别1, 类别2],seriesData1: [120, 200], // 柱子1数据seriesData2: [150, 250], // 柱子2数据lineData: [80, 180], // 折线数据newBarData: [300], // 新增的柱子数据sl_x: [新类别], // 新增的横轴数据sl_y: [400] // 新增的纵轴数据
};let isNewBarVisible false; // 标记是否显示新增的柱子// 初始化图表
const myChart echarts.init(document.getElementById(main));
createChart();function createChart() {const option {title: {text: ECharts 示例},tooltip: {},legend: {data: isNewBarVisible ? [新增柱子] : [柱子1, 柱子2, 折线] // 根据状态决定显示的图例},xAxis: {data: isNewBarVisible ? data.sl_x : data.xAxisData // 根据状态决定x轴数据},yAxis: {},series: [{name: 柱子1,type: bar,data: isNewBarVisible ? [] : data.seriesData1 // 如果只显示新增柱子则原柱子数据为空},{name: 柱子2,type: bar,data: isNewBarVisible ? [] : data.seriesData2 // 如果只显示新增柱子则原柱子数据为空},{name: 折线,type: line,data: isNewBarVisible ? [] : data.lineData, // 如果只显示新增柱子则折线数据为空smooth: true // 设置折线平滑},{name: 新增柱子,type: bar,data: isNewBarVisible ? data.sl_y : [] // 显示或者隐藏新增柱子}]};myChart.setOption(option);
}// 切换图表状态
document.getElementById(toggleButton).onclick function() {isNewBarVisible !isNewBarVisible; // 切换状态createChart(); // 重新创建图表
};
/script/body
/html
