charts使用心得

须求背景

一, v-charts简介

在应用 echarts
生成图表时,日常须求做繁缛的数据类型转变、改善复杂的安顿项,v-charts
的现身便是为了消弭那一个痛点。基于 Vue2.0 和 echarts 封装的 V-Charts
图表组件,只需求统一提供一种对内外端都本身的多寡格式设置轻便的配备项,便可轻松转移不以为奇的图样。

v-charts
已经管理了有关echarts注重引进的标题,保障所使用的图纸,都以小小的的公文。


假诺好似下图所示的图形供给展示两个网口在一段时间内的几个情景:y轴用于显示各网口,x轴用于展现时间,使用条形图的例外颜色来代表不相同有的时候间间间距段的情景,使用深蓝、浅蓝、橙色、红色独家代表正常、繁忙、故障、离线种种情状。以WAN0为例,图中则表示了0~10分钟为正常,10~25分钟为繁忙,25~45分钟为故障,45~60分钟为离线

二, 安装

npm安装

npm i v-charts -S


依赖此图,非常轻松想到能够用条形图试试。但后来意识,假若用聚积条形图,则每种状态在每三个网口对应的图形中只可以冒出二次,那不可能完成须要。于是继续查阅echart官方网址示例,终于在自定义类型图形中找到了叁个日常的演示,地址

三,使用

引入v-charts

完全引进

//main.js

import Vue from ‘vue’

import VCharts from ‘v-charts’

import App from ‘./App.vue’

Vue.use(VCharts)

new Vue({

    el:’#app’,

    render:h=>h(App)

金沙8331网址,    })

=


按需引进

V-Charts的每个图表组件,都独立打包到lib文件夹下,以下为案例

|- lib/

|- line.js  ————– 折线图

|- bar.js  ————— 条形图

|- histogram.js  ——— 柱状图

|- pie.js  ————— 饼图

|- ring.js  ————– 环图

|- funnel.js  ———— 漏斗图

|- waterfall.js  ——— 瀑布图

|- radar.js  ————- 雷达图

|- map.js  ————— 地图

charts使用心得。|- bmap.js  ————– 百度地图


接收时,可以直接将单个图表引进到花色中,对应上面图表看自个儿的品种要求

//main.js

import Vue from ‘vue’

import VeLine from ‘v-charts/lib/line’

import App from ‘./App.vue’

Vue.component(VeLine.name,VeLine)

new Vue({

el: ‘#app’,

render:h=>h(App)

})


通过研商示例代码并开展一番改动,终于实现了上述供给。

come on!哒哒哒~上图!

在贯彻的经过中境遇了叁个符合规律,那便是利用自定义图表达成chart之后,图例不佳管理。通过翻看条形图的言传身教,找到了一种突显图例的主意,这正是使用空的线形图来体现图例,因为在series里头配备了带状图并配置name后,echart会自动依照name的值去legend的配备中匹配成对应的图例名字并出示。

HTML

金沙8331网址 1

一体化代码如下,保存于本地之后再本人去echart官方网站下载库文件自此就可以运转:

JavaScript

金沙8331网址 2


     // 初始化echart var chart = echarts.init(document.getElementById; // 各状态的颜色 var colors = ['#2f4554', '#61a0a8', '#d48265', '#c23531']; // 四种状态 var state = ['正常', '繁忙', '故障', '离线']; // echart配置 var opt = { color: colors, tooltip: { formatter: function  { return params.name + ':' + params.value[1] + '~' + params.value[2]; } }, legend: { data: state, bottom: '1%', selectedMode: false, // 图例设为不可点击 textStyle: { color: '#000' } }, grid: { left: '3%', right: '3%', top: '1%', bottom: '10%', containLabel: true }, xAxis: { min: 0 // x轴零刻度对应的实际值 }, yAxis: { data: ['WAN0', 'WAN1'] }, series: [ // 用空bar来显示四个图例 {name: state[0], type: 'bar', data: []}, {name: state[1], type: 'bar', data: []}, {name: state[2], type: 'bar', data: []}, {name: state[3], type: 'bar', data: []}, { type: 'custom', renderItem: function  { var categoryIndex = api.value; var start = api.coord, categoryIndex]); var end = api.coord, categoryIndex]); var height = 24; return { type: 'rect', shape: echarts.graphic.clipRectByRect({ x: start[0], y: start[1] - height / 2, width: end[0] - start[0], height: height }, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }), style: api.style() }; }, encode: { x: [1, 2], y: 0 }, data: [ { itemStyle: { normal: { color: colors[0] } }, name: '正常', value: [0, 0, 10] }, { itemStyle: { normal: { color: colors[1] } }, name: '繁忙', value: [0, 10, 25] }, { itemStyle: { normal: { color: colors[2] } }, name: '故障', value: [0, 25, 45] }, { itemStyle: { normal: { color: colors[3] } }, name: '离线', value: [0, 45, 60] }, { itemStyle: { normal: { color: colors[0] } }, name: '正常', value: [1, 0, 15] }, { itemStyle: { normal: { color: colors[1] } }, name: '繁忙', value: [1, 15, 20] }, { itemStyle: { normal: { color: colors[2] } }, name: '故障', value: [1, 20, 35] }, { itemStyle: { normal: { color: colors[3] } }, name: '离线', value: [1, 35, 40] }, { itemStyle: { normal: { color: colors[0] } }, name: '正常', value: [1, 40, 45] }, { itemStyle: { normal: { color: colors[3] } }, name: '离线', value: [1, 45, 60] } ] } ] }; chart.setOption; 

1,折线——-堆成堆面积图

金沙8331网址 3

对于自定义图表的data字段里多少项:

效益图如下

金沙8331网址 4

{ itemStyle: { normal: { color: colors[0] } }, name: '正常', value: [0, 0, 10]}


itemStyle: 所渲染的矩形的体裁 name: 该矩形的气象名 value:
第0项代表种类标记,例如0就意味着WAN0的,1正是WAN1的;第1和第2项代表该矩形区域对应的x坐标范围开头于0,停止于1。

2,柱状图 ——-聚成堆柱状图

金沙8331网址 5

以上正是本文的全体内容,希望对大家的就学抱有助于,也期待我们多都赐教脚本之家。

成效图如下 

金沙8331网址 6


3,饼图 ——-节制展现条数饼图

金沙8331网址 7

功效图如下  

金沙8331网址 8


4,雷达图 ——-设置彰显的目的维图

金沙8331网址 9

效果图如下  

金沙8331网址 10


5,地图 ——-设置目标维度

金沙8331网址 11

功能图如下

金沙8331网址 12


V-Charts属性V-Charts 的属性分为三种,一种是全体图片都负有的质量,举例 colors, grid 等

金沙8331网址 13

settings  配置项

配置项                            简介                       类型       
                    备注

data                              图表数据                 Object       
        columns 代表指标和维度名称,

                                                                       
                       rows 为多少内容

width                             图表宽度                  String      
          私下认可 auto

height                            图表高度                  String     
           私下认可 400px

settings                         图表配置项               Object       
        –

colors                            颜色列表                    Array     
           –

tooltip-visible                是不是出示提示框          Boolean         
  默感觉 true

legend-visible               是不是出示图例              Boolean         
  默以为 true

legend-position             图例彰显地点              String           
   可选’left’, ‘top’, ‘right’, ‘bottom’

grid                                网格配置                     Object 
             –

events                        为图表绑定事件              Object       
     包蕴事件名-事件管理函数的对象

before-config         对数码提前开展额外的管理   Function     
在数码转载为布局项开头前触发,

                                                                       
                         参数为 data,重临值为表格数据

after-config         生成echarts配置进行额外的拍卖  Function 
 在多少转载为结构项结束后触

                                                                       
      发,参数为 options,再次来到值为 echarts 配置

after-set-option       生成图后收获echarts实例             Function     
            参数为echarts实例

after-set-option-once  图后获取echarts只进行叁遍      Function         
     参数为echarts实例

mark-line                 图表标线                          Object     
                             –                

mark-area                图表标记区域                  Object           
                        –

visual-map              视觉映射组件                  Array, Object     
                      –

mark-point               图表标点                          Object       
                             –

data-zoom          区域缩放组件                       Array, Object     
                     –

toolbox                 工具箱                                Object   
                                 –

title                        图表标题                            Object 
                                   –

init-optionsinit       附加参数                              Object     
                              –

theme                 自定义大旨                            Object     
                   内容为自定义宗旨参数

theme-name      自定义核心名称                        String         
 内容为全局注册的自定义宗旨名称

loading               加载状态                                 
 Boolean               私下认可为false

data-empty         暂时未有数据状态                            Boolean     
        默感觉false

judge-width      是还是不是管理生成图表时的上升的幅度难题   Boolean           
 默以为 true

width-change-delay容器宽度变化的推移              Number             
默以为300


备考:使用loading和dataEmpty属性前需引入css import
‘v-charts/lib/style.css’

还要,为了能够更便利的装置属性配置项等,可以通过extend属性实现对已铺排好的中间属性实行独立的安装,extend为对象类型,对象内的习性能够是函数,也足以对象,也足以是其它类型的值当属性为函数时,设置的是函数的重临值当属性为对象时,倘使在options中对应的性质为对象(eg:
tooltip卡塔尔(قطر‎或包涵对象的数组(eg:
seriesState of Qatar,对应的配备会被统一,不然将直接覆盖对应的布置具体运用情势可以参见上面包车型大巴质量配置示范最终,上面那个与echarts配置项对应的性质也被加到了组件上,设置后将会一贯覆盖options原有的应和属性。

legend: Object

xAxis: Object

yAxis: Object

radar: Object

tooltip: Object

axisPointer: Object

brush: Object

geo: Object

timeline: Object

graphic: Object

series: [Object, Array]

backgroundColor: [Object, String]

textStyle: Object

备考:借使某属性加上去将来并未有一蹴而就,很大概是从未有过引进相应的模块

除此以外一种是图表本人的品质,譬如客户设置数据类型的dataType,那样的性质被放到settings内,各类图表的布置项不完全雷同,具体参数参考下述示例~


HTML

金沙8331网址 14

JavaScript

金沙8331网址 15


接待各位研究转载or收藏,新手求带~不喜勿喷!小叔,给小妞个表扬吧~

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注