ECharts 学习笔记01, 柱状图

KunMinX 发布于2019-08-23 16:18 / 1628人阅读

摘要：编写文件我们需要通过方法初始化一个实例然后通过方法绘图。初始化实例设定图表的配置项和数据柱状图销量衬衫裤子袜子销量显示图表小结以上就是使用进行绘图的第一个例子。休息一下，马上开始下一次学习

目标

使用 ECharts 绘制简单的柱状图, 示例如下

搭建环境

新建文件夹 note01, 并新建 index.html, index.css, index.css 文件

获取 echarts
下载源代码版本, 保存为 ./note01/echarts.js

至此, note01 的目录结构应该是这样的

./note01/
 |---index.html
 |---index.js
 |---index.css
 |---echarts.js

编写 index.html

编写一个普通的 html5 文件即可, 然后引入我们的 js, css 文件




    
    echarts note01

编写 css 文件

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

main{
    width: 600px;
    height: 400px;
}

编写 js 文件

我们需要通过 echarts.init(domElement) 方法初始化一个 echarts 实例, 然后通过 setOption() 方法绘图。

"use strict";
// 初始化 echarts 实例
var myEChart = echarts.init(document.getElementsByTagName("main")[0]);

// 设定图表的配置项和数据
var option = {
    title:{
        text: "柱状图"
    },
    tooltip:{

    },
    legend:{
        data:["销量"]
    },
    xAxis:{
        data:["衬衫", "裤子", "袜子"]
    },
    yAxis:{

    },
    series:[{
        name: "销量",
        type: "bar",
        data: [5, 36, 20]
    }],
};

// 显示图表
myEChart.setOption(option);

小结

以上就是使用 ECharts 进行绘图的第一个例子。休息一下，马上开始下一次学习~

GPU服务器私有云柱状图画柱状图柱状图各种图形 mpandroidchart柱状图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102890.html

Echarts使用笔记

摘要：柱状图顶部数据展示柱状图自定义主题柱形图默认参数最小高度改为默认自适应柱间距离，默认为柱形宽度的，可设固定值类目间柱形距离，默认为类目间距的，可设固定值各异柱条边线柱条边线圆角，单位，默认为柱条边线线宽，单位，默认为默认自适应，水平布局为，柱状图顶部数据展示 itemStyle: { normal: { label: { show: true ...

geekidentity 2019-08-19 17:23 评论0 收藏0
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点

摘要：深夜学姐问我在中柱状图如何自定义顶部亮点先看效果图我们可以看到图中图表不仅有渐变色，同时柱状图顶部位置有一个不相同的顶部亮点图片接下来，我们一起来实现一下这个效果部分部分获取元素左侧名称列表号 ...

Blackjun 2021-10-11 10:59 评论0 收藏0
手把手教你用echarts和SovitChart开发带渐变色的柱状图

摘要：我们在开发应用的时候经常美工会设计一些样式比较特殊的图表，这对于前端开发人员来说会增加开发量，如下图就是笔者开发过程中要求制作的带渐变色效果的柱状图今天在这里教大家如何用原生和如何用图表开发工具来实现。我们在开发web应用的时候经常美工会设计一些样式比较特殊的图表，这对于前端开发人员来说会...

RaoMeng 2021-09-10 10:50 评论0 收藏0
echarts拆线图和柱状图叠加，双Y轴，动画延时

摘要：需求制作叠加的拆线图，柱状图，双轴工具代码交易日柱状图动画延迟成交价昨收价成交额成交价元成交额万元成交价昨收价成交额效果图关键说明中可以叠加多组数据，要指定中的第二个轴中的表示的位置，表示在最大值处，默认在值一端表示数值序列是否倒置。需求制作叠加的拆线图，柱状图，双Y轴工具 echarts 代码 var xAxisData = []; var data1 = []; var da...

LeexMuller 2019-08-23 10:52 评论0 收藏0