echars

分享7个常用的echarts示例

1、对于位置不够显示的坐标值，使用斜显示； “ xAxis >axisLabel>rotate”设置倾斜角度； 2、对于坐标值比较长的名称，使用换行显示； “ xAxis >axisLabel>formatter”设置换行格式； 3、对于坐标值超长的名称，使用省略号+移上去显示； “ xAxis >axisLabel>formatter”设置省略号格式； 增加“ tooltip ”，移上去显示详细内容； 4、修改折线图区域的渐变色； “ series >areaStyle”设置渐变色的数据； 5、饼图中间增加显示的内容； “ title ”设置内容、位置和颜色等； 6、实现三色仪表盘； 全代码如下； 7、实现数据定时切换，适合多数据无法全显示情况； 全代码如下；

ECharts 基础使用

一个网页中可以创建多个 echarts 实例。 每个 echarts 实例中可以创建多个图表和坐标系等等（用 option 来描述）。 准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。 在 echarts 里， 系列 （series）是指：一组数值以及他们映射成的图。 一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。 说人话就是， 系列 这个东西就是 用来描述图表的 ，包含了图表的数据、图表是什么类型：line（折线图）、bar（柱状图）、pie（饼图）... 、以及其它的构成参数。 也可以有另一种配置方式，系列的数据从 dataset 中取： 在系列之上，echarts 中各种内容，被抽象为“组件”。 例如，echarts 中至少有这些组件： xAxis （直角坐标系 X 轴）、 yAxis （直角坐标系 Y 轴）、 grid （直角坐标系底板）、 angleAxis （极坐标系角度轴）、 radiusAxis （极坐标系半径轴）、 polar （极坐标系底板）、 geo （地理坐标系）、 dataZoom （数据区缩放组件）、 visualMap （视觉映射组件）、 tooltip （提示框组件）、 toolbox （工具栏组件）、 series （系列）、... 我们注意到，其实 系列 （series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。 如下图，右侧的 option 中声明了各个组件（包括系列），各个组件就出现在图中。 echarts 的使用者，使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之， option 描述了： 数据 、 数据如何映射成图形 、 交互行为 。 系列里的 series.data 是本系列的数据。也可以使用另一种方式，系列数据从 dataset 中取： 多数组件和系列，都能够基于 top / right / down / left / width / height 绝对定位。 这种绝对定位的方式，类似于 CSS 的绝对定位（ position: absolute ）。绝对定位基于的是 echarts 容器 DOM 节点。 它们的值可以是 如下图的例子，对 grid 组件（也就是直角坐标系的底板）设置 left、right、height、bottom 达到的效果。 我们可以注意到， left right width 是一组（横向）、 top bottom height 是另一组（纵向）。这两组没有什么关联。每组中，至多设置两项就可以了，第三项会被自动算出。例如，设置了 left 和 right 就可以了， width 会被自动算出。 坐标系用于布局，以及显示数据的刻度等等。一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis （直角坐标系 X 轴）、 yAxis （直角坐标系 Y 轴）、 grid （直角坐标系底板）三种组件。 xAxis 、 yAxis 被 grid 自动引用并组织起来，共同工作。 下图，只声明了 xAxis 、 yAxis 和一个 scatter （散点图系列），echarts 暗自为他们创建了 grid 并关联起他们： 再来看两个 yAxis ，共享了一个 xAxis 的例子。两个 series ，也共享了这个 xAxis ，但是分别使用不同的 yAxis ，使用 yAxisIndex 来指定它自己使用的是哪个 yAxis ： 还存在一个 echarts 实例中，有多个 grid 的情况，每个 grid 分别有 xAxis 、 yAxis ，他们使用 xAxisIndex 、 yAxisIndex 、 gridIndex 来指定引用关系： 另外，一个系列，往往能运行在不同的坐标系中。例如，一个 scatter （散点图）能运行在 直角坐标系、极坐标系 、地理坐标系（GEO） 等各种坐标系中。同样，一个坐标系，也能承载不同的系列，如上面出现的各种例子，直角坐标系里承载了 line （折线图）、 bar （柱状图）等等。

如何使用echarts在节点显示动态数据及添加提示文本

这次给大家带来如何使用echarts在节点显示动态数据及添加提示文本，使用echarts在节点显示动态数据及添加提示文本的注意事项有哪些，下面就是实战案例，一起来看一下。 1、每个节点显示动态数据，这个其实可以通过配置项完成，在series数据绑定中，可以使用原本的配置项itemStyle中的标签格式化完成，如下：代码如下，如果需要修改文字显示的样式，则需另外配置项（如font-style,font-weigth等）完成{ name: '其中：少数民族', type: 'line', data: ssmz, markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, itemStyle: {//节点数据显示 normal: { label: { show: true, position: 'right', formatter: ssmz,//该值动态显示数据，若需固定的文本，则直接写入 } } } },2、有些客户会提出另外的要求，在折线显示最高值和最低值的同时，折线的末尾需要加上该折线代表的意义，此时也可以通过itemStyle完成，只是在formatter格式化文本提示的时候，需要自己写一个函数进行格式化判断之后显示.代码如下：{ name: '合计', type: 'line', data: hj, markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ], }, itemStyle: { normal: { label: { show: true, position: 'right',//居右 offset:[20,0],//横向往右20 formatter: function(para){//格式化提示文本 if(para.value == hj[hj.length-1]){ return '合计';//显示文本 }else{ return ''; } } } } } },相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：怎样使用Vue实现倒计时按钮怎样利用Vue写一个双向数据绑定