怎样使echarts柱状图的x轴文字纵向显示？

2023-05-15 15:23| 来源: 网络整理| 查看: 265

2023-05-12

为了使 ECharts 柱状图的 x 轴文字纵向显示，需要进行一些配置调整。具体来说，可以通过设置 xAxis 中的 axisLabel.rotation 属性值为 -90 或 90 来实现。

以下是详细步骤：

引入 ECharts 库和对应主题

在 HTML 页面中引入 ECharts 库和对应主题，例如：

[removed]"https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js">[removed] [removed]"https://cdn.jsdelivr.net/npm/echarts/theme/macarons.js">[removed] 准备数据源

准备柱状图所需的数据源，例如：

var data = [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ]; 创建 ECharts 实例，并配置基本参数

创建一个 div 容器并指定它的 ID，用于渲染 ECharts 实例，例如：

id="chart" style="width: 600px; height: 400px;">

然后，在 JavaScript 中创建 ECharts 实例，并配置基本参数，例如：

// 创建 ECharts 实例 var myChart = echarts.init(document.getElementById('chart'), 'macarons'); // 配置基本参数 var option = { xAxis: { type: 'category', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'], axisLabel: { interval: 0, // 强制显示所有标签 rotate: -90, // 设置旋转角度 }, }, yAxis: { type: 'value', }, series: [{ name: '访问来源', type: 'bar', data: data, }], }; // 使用指定的配置项和数据展示图表 myChart.setOption(option);

在这个例子中，我们设置了 xAxis 中 axisLabel 的 rotate 属性值为 -90，这将使 x 轴文字沿着垂直方向旋转，从而实现纵向显示。

美化柱状图

除了基本参数之外，还可以对柱状图进行美化。例如，可以设置标题、颜色、动画效果等。以下是一个完整的例子：

// 创建 ECharts 实例 var myChart = echarts.init(document.getElementById('chart'), 'macarons'); // 准备数据源 var data = [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ]; // 配置参数 var option = { title: { text: '柱状图示例', textStyle: { fontWeight: 'normal', }, }, tooltip: {}, xAxis: { type: 'category', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'], axisLabel: { interval: 0, // 强制显示所有标签 rotate: -90, // 设置旋转角度 }, }, yAxis: { type: 'value', }, series: [{ name: '访问来源', type: 'bar', data: data, itemStyle: { color: '#0099CC', }, }], }; // 使用指定的配置项和数据展示图表 myChart.setOption(option);

在这个例子中，我们添加了标题和提示框，并设置了柱状图颜色

为了更加美观，我们还可以添加动画效果。通过设置 series 中的 animationDelay 属性和 animationDuration 属性来实现。例如：

// 配置参数 var option = { title: { text: '柱状图示例', textStyle: { fontWeight: 'normal', }, }, tooltip: {}, xAxis: { type: 'category', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'], axisLabel: { interval: 0, // 强制显示所有标签 rotate: -90, // 设置旋转角度 }, }, yAxis: { type: 'value', }, series: [{ name: '访问来源', type: 'bar', data: data, itemStyle: { color: '#0099CC', }, animationDelay: function (idx) { return idx * 50; // 延迟时间递增 }, animationDuration: 1000, // 动画时长 }], }; // 使用指定的配置项和数据展示图表 myChart.setOption(option);

在这个例子中，我们设置了动画延迟时间和动画时长，使柱状图在加载时呈现出渐进式增长的效果。

总结

通过以上步骤，我们成功地将 ECharts 柱状图的 x 轴文字纵向显示，并优化了柱状图的美观程度。需要注意的是，在实际开发中，可能需要根据具体需求对参数进行更加详细的配置。

完谢谢观看

上一篇: PHP建立MySQL数据表的时候，如何指定 ... 下一篇: MySQL为什么使用线程的模型而不是epol ...

柱状图索引 echarts 分享收藏相关课程学习[点击了解]