ECharts官方文档及常用组件柱状图联动

最新推荐文章于 2024-06-20 09:30:03 发布

HalaMadrid.

最新推荐文章于 2024-06-20 09:30:03 发布

阅读量1.2k

点赞数

文章标签： echarts javascript elementui

本文链接：https://blog.csdn.net/qq_45868915/article/details/125116848

版权

本文介绍了如何在ECharts中实现柱状图的联动效果，详细讲解了导入ECharts库、设置图表尺寸、居中标题、每组三个柱状图的布局、x轴和y轴的配置以及数据绑定的过程，最终展示了一个完整的联动柱状图代码示例。

摘要由CSDN通过智能技术生成

ECharts官方文档及常用组件柱状图联动

导入js包

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<script src="echarts.js"></script>
</head>

图片大小和宽度

<div id="main" style="width: 900px; height: 600px"></div>

题目居中

title:{
        show:true,
        text:'销售经理能力对比分析',
        textStyle: mytextStyle,
        left:'center',
       },

每组数据中三个柱状图

legend:{
           data: ['王斌', '刘倩','袁波'],
           itemGap: 5,
           left:'left',
           top:'25'
        },

x轴与y轴

xAxis:[
          {
               type: 'category',
               data:['销售','沟通','服务','协作','培训','组织']
          }
       ],
yAxis:[
          {
               type: &

最低0.47元/天解锁文章

HalaMadrid.

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ECharts官方文档及常用组件柱状图联动

ECharts官方文档及常用组件柱状图联动
复制链接

扫一扫

ECharts官方文档及常用组件 柱状图联动

ECharts官方文档及常用组件柱状图联动