完整代码

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>第一个 ECharts 实例</title>

    <!-- 引入 echarts.js -->

    <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">

      // 基于准备好的dom，初始化echarts实例

      var myChart = echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据

      var option = {

        tooltip: {

          trigger: "axis",

          formatter: "{b0}({a0}): {c0}<br />{b1}({a1}): {c1}%",

        },

        legend: {

          data: ["销量", "占比"],

        },

        xAxis: {

          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],

        },

        yAxis: [

          {

            type: "value",

            name: "销量",

            show: true,

            interval: 10,

            axisLine: {

              lineStyle: {

                color: "#5e859e",

                width: 2,

              },

            },

          },

          {

            type: "value",

            name: "占比",

            min: 0,

            max: 100,

            interval: 10,

            axisLabel: {

              formatter: "{value} %",

            },

            axisLine: {

              lineStyle: {

                color: "#5e859e", //纵坐标轴和字体颜色

                width: 2,

              },

            },

          },

        ],

        series: [

          {

            name: "销量",

            type: "bar",

            barWidth: "50%",

            data: [5, 20, 36, 10, 10, 20],

          },

          {

            name: "占比",

            type: "line",

            smooth: true,

            data: [15, 30, 46, 20, 20, 30],

          },

        ],

      };

      // 使用刚指定的配置项和数据显示图表。

      myChart.setOption(option);

    </script>

  </body>

</html>

效果图展示

重点标记

使用图表类型

参考链接

https://blog.csdn.net/qq_38974638/article/details/108858145

Echarts: 同时显示柱状图和前端的更多相关文章

  1. 前端统计图 echarts 实现简单柱状图

    前端统计图   echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...

  2. ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。

    1.ajax导致Echarts不显示饼图数据.柱状图数据只显示气泡的问题. ajax的同步.这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个aj ...

  3. 如何基于 echarts 实现区间柱状图（包括横向）？

    目录 需求 借鉴 echarts 的 demo 最终实现思路 实现效果 遇到的问题: 代码映射 源码 最后 始终如一 需求 需要利用 echarts 实现区间柱状图,效果如下: 效果来源于:g2-柱状 ...

  4. echarts报表显示%+没有0

    function showTablegroup(page) { var series; $.ajax({ type:'post', url:"<%=basePath%>flowA ...

  5. echarts如何显示在页面上

    echarts如何显示在页面上 1.引入echarts的相关.js文件 <script src="js/echarts.min.js"></script> ...

  6. echarts —— 绘制横向柱状图（圆角、无坐标轴）

    UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...

  7. echarts来显示世界地图和全国地图，并且可以下钻层级

    echarts来显示世界地图和全国地图,并且可以下钻层级 使用echarts来显示世界地图和全国地图,并且可以下钻层级 使用的技术 现有的功能 遇到的问题解决 总结 参考内容 直接来源码,地球资源包我 ...

  8. 【前端统计图】echarts实现简单柱状图

    图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  9. echarts在一个折线/柱状图浮窗显示多条数据

    解决问题就在data里面,首先 data里面是可以json数组形式,如官方API上的 name:”“, value:”“,等 value是echart识别折线图的key值.1.来看数据格式 data: ...

  10. 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

随机推荐

  1. [OpenCV-Python] 9 图像的基础操作

    文章目录 OpenCV-Python: 核心操作 9 图像的基础操作 9.1 获取并修改像素值 9.2 获取图像属性 9.3 图像 ROI 9.4 拆分及合并图像通道 9.5 为图像扩边(填充) Op ...

  2. Python网络爬虫原理及实践

    作者:京东物流 田禹 1 网络爬虫 网络爬虫:是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本. 网络爬虫相关技术和框架繁多,针对场景的不同可以选择不同的网络爬虫技术. 2 Scrapy框架( ...

  3. 【CSS】画出宽度为1像素的线或边框

    由于多倍的设计图在移动设备上显示时会将设计图进行缩小到视口宽度,而1px的边框没有随着页面进行缩小而导致效果太粗,想要还原设计图1px的显示效果,因此需要一些方法来实现边框宽度小于1px. 实现方法很 ...

  4. 虚拟机中Docker下部署gitlab

    一.安装Gitlab 1.拉取镜像并启动 由于服务器的80端口可能被占用,所以这里我们改成了其他端口来启动 docker run -d -p 2443:443 -p 5678:80 -p 2222:2 ...

  5. SICP：元循环求值器（Python实现）

    求值器完整实现代码我已经上传到了GitHub仓库:TinySCM,感兴趣的童鞋可以前往查看.这里顺便强烈推荐UC Berkeley的同名课程CS 61A. 在这个层次结构的最底层是对象语言.对象语言只 ...

  6. Swagger UI接入配置

    Swagger UI接入配置 这里的接入我们依赖于DRF官方推荐的一个第三方包: drf-yasg,下面的接入步骤其实都是按照这个第三方库的文档进行配置,这里只是个最最入门的使用,对于更加高阶或者定制 ...

  7. Charles抓包补充解释

    配置 大佬的博客真的很详细很详细,我就不重复造轮子了,第一次直接看大佬的博客就好,这里Python爬取微信小程序(Charles) 补充解释 在这一步疑问很多,大佬说的不是很详细,就由我来补充下吧~ ...

  8. 在Winform中一分钟入门使用好看性能还好的Blazor Hybrid

    在Winform中一分钟入门使用好看性能还好的Blazor Hybrid 安装模板 dotnet new install Masa.Template::1.0.0-rc.2 创建 Winform的Bl ...

  9. vue iview 单击table行变色 获取行数据

    用到两个事件: 代码如下: 1 <Table :columns="columns" :data="tableData" @on-row-click=&qu ...

  10. ODDO之三 ：Odoo 13 开发之创建第一个 Odoo 应用

    Odoo 开发通常都需要创建自己的插件模块.本文中我们将通过创建第一个应用来一步步学习如何在 Odoo 中开启和安装这个插件.我们将从基础的开发流学起,即创建和安装新插件,然后在开发迭代中更新代码来进 ...