用vscode绘制一个柱状图

最新推荐文章于 2024-07-06 03:46:44 发布
最新推荐文章于 2024-07-06 03:46:44 发布
阅读量736 收藏 2
点赞数 12
文章标签： 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z912631832/article/details/136609724
版权
本文详细介绍了如何在VSCode环境下，通过引入Echarts.js文件，设置DOM，配置图表选项和数据，实现一个简单的柱状图的全过程。
摘要由CSDN通过智能技术生成

在绘制一个柱状图之前你需要有Echarts.js文件

有了Echarts.js文件，就需要在vscode新建js，css，image这三个文件夹，然后把Echarts.js文件放在js文件下（如图所示）

然后新建html文件（如图所示）

第一步：把脚本引入到html文件里

第二步：设置Dom的大小

第三步：基于准备好的dom，初始化echarts实例

第四步：编写图表的配置项和数据

第五步：使用配置项和数据显示图表

最后右击点标注的英文运行，显示成功就OK了

图下是所有的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/echarts.min.js" ></script>
        <title></title> 
    </head>
    <body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option ={
            title:{
                text:'这里是绘制的图表的标题',
                subtext:'这里是副标题'
            },

        }
        option = {
            xAxis: {
                type: 'category',
                data: ['红枣', '草莓', '柠檬', '香蕉', '车厘子', '雪梨']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [5, 12, 18, 10, 15, 9],
                type: 'bar'
            }]
         };

         myChart.setOption(option);
    </script>
</body>
</html>

啊啊啊脑子要没了
关注
  • 12
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Visual Studio Code (echarts)数据可视化’会员入会情况分布柱形图‘
qq_45894761的博客
03-08 979
引入 echarts.js 文件 <!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">
用vscode绘制条形图和折线图
z912631832的博客
03-11 1052
第四步，我们可以开始编写最主要的身体部分了
【工具使用】在vscode中用python绘图
立志实现毛肚自由的博客
05-29 570
解决：在当前***的环境下，安装。
如何使用VSCode上运行Jupyter，详细案例过程出可视化图
心安成长的码字书房
02-02 4966
Python作为最受AI喜欢的语言之一，我们与大家共同学习下如何在VS Code上运行Jupyter，并且用简单案例实现出图。
C#ZedGraph柱状图程序
11-03
如何画ZedGraph控件的柱状图，能够调试成功的，是2008版本的visual studio程序。
vscode 数据可视化
最新发布
weixin_30120123的博客
07-06 21
数据可视化相关视频讲解：用python编程Excel有没有用处？用VSCode进行数据可视化 数据可视化是一种将数据转换为直观图形的过程，帮助人们更好地理解和分析数据。在软件开发领域，VSCode是一款非常流行的代码编辑器，它不仅可以用于编写代码，还可以用来进行数据可视化。在本文中，我们将介绍如何在VSCode中进行数据...
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
例如，一个简单的柱状图配置如下： ```javascript myChart.setOption({ title: { text: '在Vue中使用echarts' }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, ...
echarts 省市地图数据
10-20
ECharts 是一个基于 JavaScript 的开源可视化库，它提供了丰富的图表类型，包括柱状图、折线图、饼图以及地图等，广泛应用于数据分析和展示。在ECharts中，地图图表是展示地理位置数据的重要方式，特别适合于展示...
使用D3.js制作图表详解
10-19
对于柱状图，主要需要绘制X轴、Y轴以及各个柱形。X轴和Y轴可以通过`line`元素绘制线条，`text`元素用于显示刻度标签。柱形则由`rect`元素创建，通过调整其`x`, `y`, `width`, `height`等属性，以及可能的`rx`和`ry`...
智慧图书馆可视化大屏.rar
07-21
ECharts是百度推出的一个基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图等，能够帮助我们以图形方式展示图书馆的数据。在本项目中，ECharts将被用于绘制各类统计图表，如展示图书馆...
echarts结合echarts-gl实现3D飞线地球可视化
08-05
为了在本地运行这个示例，你需要一个本地服务器，例如使用VSCode的Live Server插件。这是因为浏览器的安全策略限制了本地文件直接引用资源，而通过服务器可以避免这个问题。 在实际应用中，你可能还需要处理数据...
VSCode插件ProjectTree，输出项目树状图
weixin_44754632的博客
07-02 1万+
今天写代码说明书，忽然想做代码树，vscode有超多插件，于是网上一搜，正好看到ProjectTree这个可以用上，实现效果图如下： gitbub项目源码
Vscode运行Echarts案例使用教程（大学生小白）
发财糕
03-12 1377
折线图示例：最高分（54）、最低分（15）、平均值（35）柱形图示例：最高分（54）、最低分（15）、平均值（35）本文案例为折线图与柱形图。
vsode (Visual Studio Code) JS -- HTML 教程
C++牲
06-03 1461
是一种基于，广泛用于在网页上实现。可以嵌入到页面中，通过在脚本标签中编写来实现各种功能。它主要用于处理等。
Visual Studio Code (echarts)数据可视化，柱状图与折线图混合，实现降水量，蒸发量，温度变化
qq_45894761的博客
04-26 5881
初始化 <!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&
还能这么玩？我用VsCode画类图、流程图、时序图、状态图不要太爽！
热门推荐
程序员柠檬
03-11 1万+
软件设计中，有好几种图需要画，比如流程图、类图、组件图等，我知道大部分人画流程图一般都会用微软的viso绘制，我之前也是这个习惯。 viso画图有个不好的地方是需要时刻去调整线条和边框已达到简洁美观，今天我给大家介绍一款程序员画图神器PlantUML，一款你用了就爱上的画图软件！ VsCode以插件的形式支持了这款画图神器，还不知道VsCode？ VsCode 强大地自定义功能，已经成为程序员最...
ECharts
small_rain_的博客
10-27 1121
转自黑马程序员pink老师 ## 可视化面板介绍 ​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。 ### 01-使用技术 完成该项目需要具备以下知识： - div + css 布局 - flex 布局 - Less - 原生js + jquery 使用 - rem适配 - **echarts基础** ### 02- 案例适配方案 - 设计稿是1920px 1. f...
使用android写一个控件绘制一个柱状图
05-27
好的，以下是一个简单的示例代码，可以绘制一个简单的柱状图： 首先，在你的布局xml文件中添加一个自定义View： ```xml <com.example.myapplication.BarChartView android:id="@+id/barChartView" android:layout_width="match_parent" android:layout_height="300dp" /> ``` 然后，在你的java文件中实现这个自定义View： ```java public class BarChartView extends View { private Paint mPaint; private List<Bar> mBars; public BarChartView(Context context) { super(context); init(); } public BarChartView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public BarChartView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { // 初始化画笔 mPaint = new Paint(); mPaint.setColor(Color.BLUE); mPaint.setStyle(Paint.Style.FILL); mPaint.setAntiAlias(true); mPaint.setTextSize(20); // 初始化柱状图数据 mBars = new ArrayList<>(); mBars.add(new Bar("Jan", 100)); mBars.add(new Bar("Feb", 200)); mBars.add(new Bar("Mar", 150)); mBars.add(new Bar("Apr", 300)); mBars.add(new Bar("May", 250)); mBars.add(new Bar("Jun", 180)); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 绘制坐标轴 mPaint.setColor(Color.BLACK); canvas.drawLine(50, 250, 450, 250, mPaint); canvas.drawLine(50, 250, 50, 50, mPaint); // 绘制柱状图 float barWidth = (400 - mBars.size() * 10) / mBars.size(); for (int i = 0; i < mBars.size(); i++) { Bar bar = mBars.get(i); float left = 60 + i * (barWidth + 10); float top = 250 - bar.getHeight(); float right = left + barWidth; float bottom = 250; canvas.drawRect(left, top, right, bottom, mPaint); // 绘制柱状图上的文字 mPaint.setColor(Color.WHITE); String text = bar.getLabel() + " " + bar.getValue(); float textWidth = mPaint.measureText(text); float textX = left + (barWidth - textWidth) / 2; float textY = top - 10; canvas.drawText(text, textX, textY, mPaint); } } private static class Bar { private String label; private float value; public Bar(String label, float value) { this.label = label; this.value = value; } public String getLabel() { return label; } public float getValue() { return value; } public float getHeight() { return value / 300 * 200; } } } ``` 这个自定义View会绘制一个包含6个柱状条的简单柱状图，并且每个柱状条都包含一个标签和一个值。你可以根据你的需求修改这个自定义View来绘制一个更加复杂的柱状图。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值