Echarts图表之线性图、柱形图

最新推荐文章于 2025-05-19 11:38:42 发布

原创最新推荐文章于 2025-05-19 11:38:42 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

本文介绍了一个使用ECharts实现的动态图表案例，包括背景颜色、网格布局、工具栏功能、图例样式、类目轴配置及坐标轴指示器等详细设置。通过线性和柱状图展示了两年的数据对比，并配有同比增速的折线图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>Echarts图表</title>
       
       <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
   </head>
   <body>
       <div id="main" style="width: 600px;height:400px;"></div>
       <script type="text/javascript">
           var myChart = echarts.init(document.getElementById('main'));
           var option = {
               backgroundColor: 'rgba(1,202,217,.2)',
               grid: {
                   left: 60,
                   right: 60,
                   top: 50,
                   bottom: 40
               },
               //工具栏组件
               toolbox: {
                   //辅助线开关
                   feature: {
                       //数据视图工具
                       dataView: {
                           show: true,
                           readOnly: false
                       },
                       //动态类型切换
                       magicType: {
                           show: true,
                           //线性图,柱形图
                           type: ['line', 'bar']
                       },
                       //配置项还原
                       restore: {
                           show: true
                       },
                       //保存为图片
                       saveAsImage: {
                           show: true
                       }
                   }
               },
               legend: {
                   top: 10,
                   textStyle: {
                       fontSize: 10,
                       color: 'rgba(255,255,255,.7)'
                   },
                   data: ['2017年', '2018年', '同比增速']
               },
               xAxis: [{
                   //类目轴,强制显示所有文本标签
                   type: 'category',
                   axisLine: {
                       lineStyle: {
                           color: 'rgba(255,255,255,.2)'
                       }
                   },
                   splitLine: {
                       lineStyle: {
                           color: 'rgba(255,255,255,.1)'
                       }
                   },
                   axisLabel: {
                       color: "rgba(255,255,255,.7)"
                   },

                   data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                   //配置坐标轴指示器
                   axisPointer: {
                       //坐标轴指示器的阴影样式
                       type: 'shadow'
                   }
               }],
               yAxis: [{
                       //替换显示内容
                       type: 'value',
                       name: '',
                       min: 0,
                       max: 250,
                       //设置刻度间隔
                       interval: 50,
                       axisLine: {
                           lineStyle: {
                               color: 'rgba(255,255,255,.3)'
                           }
                       },
                       splitLine: {
                           lineStyle: {
                               color: 'rgba(255,255,255,.01)'
                           }
                       },

                       axisLabel: {
                           formatter: '{value} ml'
                       }
                   },
                   {
                       type: 'value',
                       name: '',
                       max: 25,
                       interval: 5,
                       axisLine: {
                           lineStyle: {
                               color: 'rgba(255,255,255,.3)'
                           }
                       },
                       splitLine: {
                           lineStyle: {
                               color: 'rgba(255,255,255)'
                           }
                       },
                       axisLabel: {
                           formatter: '{value} °C'
                       }
                   }
               ],
               series: [

                   {
                       name: '2017年',
                       type: 'bar',
                       itemStyle: {
                           normal: {
                               color: new echarts.graphic.LinearGradient(
                                   0, 0, 0, 1,
                                   [{
                                           offset: 0,
                                           color: '#b266ff'
                                       },
                                       {
                                           offset: 1,
                                           color: '#121b87'
                                       }
                                   ]
                               )
                           }
                       },
                       data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                   },
                   {
                       name: '2018年',
                       type: 'bar',
                       itemStyle: {
                           normal: {
                               color: new echarts.graphic.LinearGradient(
                                   0, 0, 0, 1,
                                   [{
                                           offset: 0,
                                           color: '#00f0ff'
                                       },
                                       {
                                           offset: 1,
                                           color: '#032a72'
                                       }
                                   ]
                               )
                           }
                       },
                       data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                   },
                   {
                       name: '同比增速',
                       type: 'line',
                       itemStyle: {
                           normal: {
                               color: new echarts.graphic.LinearGradient(
                                   0, 0, 0, 1,
                                   [{
                                           offset: 0,
                                           color: '#fffb34'
                                       },
                                       {
                                           offset: 1,
                                           color: '#fffb34'
                                       }
                                   ]
                               )
                           }
                       },
                       yAxisIndex: 1,
                       data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                   }
               ]
           };
           myChart.setOption(option);
       </script>
   </body>
</html>