关于#echarts#的问题，如何解决？
就是我想把我现在做的这个echarts实现图形类型切换（柱状图和折线图在同一个区域里切换）
(
function ()
{
var RewardData = [
{
reward: '最佳教练',
xdata: ['李牧', '刘旭东', '沈琼', '王健', '鞠根寅', '沈富麟', '吴卫', '薛永业', '杨礼康'],
data: [3, 1, 5, 2, 4, 4, 1, 2, 2]
},
{
reward: 'MVP',
xdata: ['刘泽', '江川', '张哲嘉', 'Edgar', '郑亮', '张利明'],
data: [1, 3, 1, 1, 1, 14]
},
{
reward: '最佳外援',
xdata: ['Yosvany', 'Marouflakrani', 'Leonardo'],
data: [1, 1, 2]
}
];
// 1.实例化对象
var myChart = echarts.init(document.querySelector(".bar .chart"));
// 2.指定配置项和数据
var option = {
color: ['#00FFFF'],
// 提示框组件
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
// 修改图表位置大小
grid: {
left: '0%',
top: '10px',
right: '0%',
bottom: '4%',
containLabel: true
},
// x轴相关配置
xAxis: [{
type: 'category',
//data: ['李牧', '刘旭东', '沈琼', '王健', '鞠根寅', '沈富麟', '吴卫', '薛永业', '杨礼康'],
axisTick: {
alignWithLabel: true
},
// 修改刻度标签，相关样式
axisLabel: {
color: "rgba(255,255,255,0.8)",
interval: 0,
fontSize: 10
},
// x轴样式不显示
axisLine: {
show: false
}
}],
// y轴相关配置
yAxis: [{
type: 'value',
// 修改刻度标签，相关样式
axisLabel: {
color: "rgba(255,255,255,0.6)",
interval: 0,
fontSize: 12
},
// y轴样式修改
axisLine: {
lineStyle: {
color: "rgba(255,255,255,0.6)",
width: 2
}
},
// y轴分割线的颜色
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.1)"
}
}
}],
// 系列列表配置
series: [{
name: '最佳教练',
type: 'bar',
barWidth: '35%',
// ajax传动态数据
data: [3, 1, 5, 2, 4, 4, 1, 2, 2],
itemStyle: {
// 修改柱子圆角
barBorderRadius: 5
}
}]
};
//如果数据量大时，可能会因为数据加载不完全就渲染图表，会引发报错，因此可以使用setTimeout进行延时处理
// 3.把配置项给实例对象
myChart.setOption(option);
// 4.让图表随屏幕自适应
window.addEventListener('resize', function () {
myChart.resize();
})
// 5.点击切换数据
$('.bar h2 a').on('click', function () {
console.log($(this).text())
RewardData.map((item) => {
if (item.reward == $(this).text()) {
option.series[0].data = item.data;
option.series[0].name = item.reward;
option.xAxis[0].data=item.xdata;
}
})
// 选中年份高亮
$('.bar h2 a').removeClass('a-active');
$(this).addClass('a-active');
// 需要重新渲染
myChart.setOption(option);
})
})();
因为是临时学的，所以不知道咋搞
折线 seriers 里 type line和bar 替换就行
如果需要点击按钮 才变 那就 点击时 给 option.series[0].type="xxx"
类似于这样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.chart {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="main"></div>
<div class="typeList">
<a href="#">折线</a>
<a href="#">柱形</a>
</div>
<div class="bar">
<h2>
<a href="#">最佳教练</a>
</h2>
<h2>
<a href="#">MVP</a>
</h2>
<h2>
<a href="#">最佳外援</a>
</h2>
<div class="chart"></div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var RewardData = [
{
reward: '最佳教练',
xdata: ['李牧', '刘旭东', '沈琼', '王健', '鞠根寅', '沈富麟', '吴卫', '薛永业', '杨礼康1'],
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
{
reward: 'MVP',
xdata: ['李牧', '刘旭东', '沈琼', '王健', '鞠根寅', '沈富麟', '吴卫', '薛永业', '杨礼康2'],
data: [1, 9, 3, 4, 5, 6, 7, 8, 9]
},
{
reward: '最佳外援',
xdata: ['李牧', '刘旭东', '沈琼', '王健', '鞠根寅', '沈富麟', '吴卫', '薛永业', '杨礼康3'],
data: [1, 2, 3, 4, 5, 6, 7, 7, 9]
}
];
// -------------------------------------------------------中国男排历年得奖情况开始-----------------------------------------------------------------------------
(function () {
// 1.实例化对象
var myChart = echarts.init(document.querySelector(".bar .chart"));
// 2.指定配置项和数据
var option = {
color: ['#2f89cf'],
// 提示框组件
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
// 修改图表位置大小
grid: {
left: '0%',
top: '10px',
right: '0%',
bottom: '4%',
containLabel: true
},
// x轴相关配置
xAxis: [{
type: 'category',
data: ['李牧', '刘旭东', '沈琼', '王健', '鞠根寅', '沈富麟', '吴卫', '薛永业', '杨礼康'],
axisTick: {
alignWithLabel: true
},
// 修改刻度标签，相关样式
axisLabel: {
color: "rgba(255,255,255,0.8)",
fontSize: 10
},
// x轴样式不显示
axisLine: {
show: false
}
}],
// y轴相关配置
yAxis: [{
type: 'value',
// 修改刻度标签，相关样式
axisLabel: {
color: "rgba(255,255,255,0.6)",
interval: 0,
fontSize: 12
},
// y轴样式修改
axisLine: {
lineStyle: {
color: "rgba(255,255,255,0.6)",
width: 2
}
},
// y轴分割线的颜色
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.1)"
}
}
}],
// 系列列表配置
series: [{
name: '直接访问',
type: 'bar',
barWidth: '35%',
// ajax传动态数据
data: [3, 1, 5, 2, 4, 4, 1, 2, 2],
itemStyle: {
// 修改柱子圆角
barBorderRadius: 5
}
}]
};
// 3.把配置项给实例对象
myChart.setOption(option);
// 4.让图表随屏幕自适应
window.addEventListener('resize', function () {
myChart.resize();
})
// 5.点击切换2020 和 2021 的数据
$('.bar h2 a').on('click', function () {
console.log($(this).text())
RewardData.map((item) => {
if (item.reward == $(this).text()) {
option.series[0].data = item.data;
option.series[0].name = item.reward;
option.xAxis[0].data=item.xdata;
}
})
// 选中年份高亮
$('.bar h2 a').removeClass('a-active');
$(this).addClass('a-active');
// 需要重新渲染
myChart.setOption(option);
})
$('.typeList a').on('click',function(){
if($(this).text()=="折线"){
option.series[0].type="line";
}else{
option.series[0].type="bar";
}
// 选中年份高亮
$('.typeList a').removeClass('a-active');
$(this).addClass('a-active');
// 需要重新渲染
myChart.setOption(option);
})
})();
</script>
</html>
type: 'bar' 改成 type: 'line'
- 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7708579
- 这篇博客也不错, 你可以看下ECharts---一个非常炫酷好用的图表库。发现自己写的好详细。怪不得当时弄那么久。
- 除此之外, 这篇博客: echarts中当横轴的数据过多的时候，可以在横轴加一个滚动条，还可以设置横轴一次显示多少个数据中的 echarts中当横轴的数据过多的时候，显得非常拥挤，可以在横轴加一个滚动条 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
下载echarts之后，导入echarts中的dataZoom
- 以下回答由chatgpt基于相关博客总结生成:
回答：
- 目前未遇到使用echarts时的问题。
- 没有特定的目标，但如果需要x轴刻度文本过长时换行、倾斜、竖直显示或隔一个换行，可以参照参考资料中的方法进行处理。
- 如果遇到问题，会先在echarts官方文档和相关论坛中寻找解决方案。
- 目前没有相关的代码或截图提供。
这种的话肯定需要一个按钮去切换类型，然后进行图表的切换，切换的时候修改seriers 的type