网页修改

cants7 · 发表于 6 天前

怎么将图中的数值间距调小一点，让蜡烛图显示大一些

<!DOCTYPE html>
<html lang="en" style="height:100%">
<head>
  <meta charset="GBK">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>


  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script>


  <script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
   renderer: 'canvas',
   useDirtyRect: false
});
var app = {};

var option;

option = {
  xAxis: {
data: ["2024年11月4日 0.26%","2024年11月1日 0.44%","2024年10月31日 0.53%","2024年10月30日 -1.91%","2024年10月29日 -0.86%","2024年10月28日 -0.60%","2024年10月25日 -0.34%","2024年10月24日 -0.93%","2024年10月23日 0.59%","2024年10月22日 -0.17%","2024年10月21日 -1.91%","2024年10月18日 0.75%","2024年10月17日 -0.91%","2024年10月16日 1.34%","2024年10月15日 -1.00%","2024年10月14日 2.56%","2024年10月11日 -2.17%","2024年10月10日 2.57%","2024年10月9日 -9.32%","2024年10月8日 5.49%"]
  },
  yAxis: {},
  series: [
{
   type: 'candlestick',
   data: [[11.43,11.46,11.46,11.26],[11.38,11.43,11.55,11.34],[11.33,11.38,11.44,11.24],[11.5,11.32,11.58,11.27],[11.62,11.54,11.74,11.53],[11.68,11.64,11.68,11.53],[11.77,11.71,11.78,11.69],[11.81,11.75,11.86,11.72],[11.82,11.86,11.89,11.75],[11.76,11.79,11.93,11.72],[11.94,11.81,11.94,11.63],[11.91,12.04,12.18,11.68],[12.07,11.95,12.23,11.93],[11.8,12.06,12.18,11.77],[11.94,11.9,12.23,11.88],[11.98,12.02,12.18,11.79],[12,11.72,12.17,11.58],[11.62,11.98,12.26,11.6],[12.63,11.68,12.63,11.66],[13.43,12.88,13.43,12.34]]
}
  ]
};

if (option && typeof option === 'object') {
   myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>

清壹 · 发表于 6 天前

用ChatGPT 比论坛快

zhongzutao · 发表于 6 天前

[JavaScript] 纯文本查看 复制代码

option = {
    // 其他配置项保持不变...

    grid: {
        left: '10%',  // 调整左边距，根据需要调整百分比或像素值
        right: '10%', // 调整右边距
        bottom: '15%', // 调整下边距，为x轴标签留出空间
        top: '10%',    // 调整上边距
        containLabel: true // 确保网格包含标签，避免标签被裁剪
    },

    xAxis: {
        // ...xAxis配置
        // 可以考虑缩短x轴标签，例如只显示日期而不显示百分比
        axisLabel: {
            formatter: function (value) {
                // 假设value是"2024年11月4日 0.26%"这样的字符串
                var parts = value.split(' ');
                return parts[0]; // 只返回日期部分
            }
        }
    },

    yAxis: {
        // ...yAxis配置
    },

    series: [
        // ...series配置
    ]
};

grid的left、right、bottom和top属性定义了图表内容相对于容器边缘的间距。通过减小这些值，你可以让图表内容（包括蜡烛图）占据更多的空间。

另外，我添加了axisLabel.formatter函数来缩短x轴的标签，这样即使标签之间的间距不变，每个标签占用的空间也会减少，从而间接地增加了蜡烛图之间的间距（实际上是减少了标签所占用的空间）。在这个例子中，我只保留了日期部分，去掉了百分比变化。

cobi · 发表于 6 天前

运行后用浏览器的F12调试控制台查看小蜡烛的name、id或属性，记住后，在：

[HTML] 纯文本查看 复制代码

window.addEventListener('resize', myChart.resize);
// 这里加入js改变页面上的小蜡烛间距、大小、颜色等.....
  </script>
</body>
</html>

无须改变echarts.min.js的源码内容，它的代码执行后，再执行你自己写的js就可以改变页面内容、style等。
当然只要你能获取到执行后页面上的html源码就能知道它的id等属性方面。

		自动登录	找回密码
密码			注册

[Web相关] 网页修改