首页 > 其他分享 >柱状图(1)

柱状图(1)

时间:2024-02-07 20:23:00浏览次数:30  
标签:option -- myChart 柱状图 var type

案例1

<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=bar-simple
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="width: 400px;height: 350px"></div>

  
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts-gl/2/files/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts-stat/latest/files/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/china.js"></script>
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>
  • 效果图

标签:option,--,myChart,柱状图,var,type
From: https://www.cnblogs.com/dogleftover/p/18011254

相关文章

  • pandas 绘图 拆线图 多条拆线 柱状图 横向 纵向 饼状图
    Pandas利用plot()调用Matplotlib快速绘制出数据可视化图形。注意,第一次使用plot()时可能需要执行两次才能显示图形。可以使用plot()快速绘制折线图。df['Q1'].plot()#Q1成绩的折线分布 可以先选择要展示的数据,再绘图。df.loc['Ben','Q1':'Q4'].plot()#ben四个季度的成绩......
  • echart 柱状图x轴悬浮显示文字
    两种方法:1.自带属性,自带样式;2.自定义样式renderBarChart(){//letthat=thisconstbarChart=echarts.init(document.getElementById('bar-chart'))constbarOptions={title:{//text:this.selectEchartData.label.le......
  • [LeetCode Hot 100] LeetCode84. 柱状图中最大的矩形
    题目描述思路:枚举+优化(单调栈)先固定矩阵的高。然后向左向右找到第一个比当前元素值小的元素,确定好左右边界。对于元素2来说:向左找到第一个比当前元素值小的元素:1的右边界向右找到第一个比当前元素值小的元素:3的右边界枚举每个元素的上边界,确定往左数最远到达哪个边界......
  • Highcharts 用SVGRenderer方法使柱状图连接列边​
    需求在Highcharts中,可以使用SVGRenderer方法来创建路径连接柱状图的列边,并根据具体的数据和需求进行适当的调整和扩展。分析要使用Highcharts的SVGRenderer方法来绘制柱状图并连接列边,可以按照以下步骤进行操作:创建柱状图:使用Highcharts的 chart 方法创建一个柱状图,并......
  • vue中echarts图表---正负轴柱状图
    一、安装npmiecharts--save二、引入//全局引入importechartsfrom'echarts'Vue.prototype.$echarts=echarts//局部【这里使用局部引入】importechartsfrom'echarts';三、代码1<!--容器-->2<divid="cylinderEcharts"ref="cyl......
  • 代码随想训练营第六十天(Python)| 84. 柱状图中最大的矩形
    84.柱状图中最大的矩形1、双指针classSolution:deflargestRectangleArea(self,heights:List[int])->int:n=len(heights)#左右第一个小于i的下标min_l,min_r=[0]*n,[0]*nres=0min_l[0]=-1......
  • matlab中绘制三维柱状图bar3函数的使用方法
    ✅作者简介:热爱科研的算法开发者,Python、Matlab项目可交流、沟通、学习。......
  • HighCharts 极地图图表绘制及添加标示线+柱状图找最值
    需求:绘制极地图并给极地图图表加上标示线,在柱状图中找出最值分析:图表加上标示线在需要的轴上面用plotLines(标示线)属性来进行添加,极地图则是在chart(图表)属性里开启polar(极)属性然后进行绘制,找出最值需要在plotOptions属性里进行修改解决:源代码:示例:标示线总是垂直于它属于的轴。......
  • python Matplotlib库:根据excel生成各种柱状图
    我将向大家介绍如何使用Python和一些常见的库来根据Excel数据生成十种不同类型的图表。通过多维度的可视化,我们可以更全面地了解数据中的模式、趋势和关系。无论您是数据分析师、市场营销人员还是研究人员,这些图表将帮助您挖掘数据中更多的信息。1.准备工作 首先,我们需要安装一些......
  • echarts实现柱状图自动轮播/鼠标悬浮悬停
    1.dataZoom配置dataZoom:[//滑动条{xAxisIndex:0,//这里是从X轴的0刻度开始show:false,//是否显示滑动条,不影响使用type:"inside",//这个dat......