Echarts图表之线性图、柱形图

最新推荐文章于 2024-10-29 16:44:12 发布

原创

最新推荐文章于 2024-10-29 16:44:12 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

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

<!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,