柱状图

柱状图实战

介绍柱状图相关内容,数据收集,整理数据,编写柱状图的例子

01-30侠课岛    初级拔高       

前端/前端/Vue + ECharts实战 18     0     156

柱状图实战

这里的内容会以制作柱状图来介绍 setOption 部分的配置项,并介绍如何让与 vue 进行交互

首先新建一个组件文件 Third.vue,根据前一篇的思路配置路由并初始化页面布局。

一、引用

在上一篇文章中选其中一种方式引用 ECharts,这里元素方式三,在需要使用的 .vue 文件中直接引入

// 引入 ECharts 模块
let echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

二、创建图表容器

首先,需要创建模版结构,创建图表的容器。图表的容器必须要设置宽高,且以 px 为单位具体的值,不然图表可能会展示不出来。

<template>
  <div>
    <div id="myCharts"></div>
  </div>
</template>

<style scoped>
#myCharts {
  width: 640px;
  height: 400px;
}
</style>

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

18

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?