关于echart 的笔记

闲者无敌
636 阅读6分钟

自己之前 有用过echart 不过是1年前的事了 这次 对所有属性都做个记录复习下



题目  
 title: {
        text: 'Population Density of Hong Kong （2011）',//题目
        subtext: 'Data大苏打撒旦 from Wikipedia',  //超链接文字
        sublink:
          '',//超链接文字所指向的链接
          \
       subtarget: 'blank',//超链接打开方式  -   `'self'` 当前窗口打开 -   `'blank'` 新窗口打开
          
      },

关于标题的属性 echarts.apache.org/zh/option.h…

其中 有个重点的内容 富文本 在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。

例如：如下是标题的富文本写法

`` 具体在 echarts.apache.org/zh/tutorial…

title:
    {
         text: ['{a|动态数据}','{b|(全区)}'].join(''),
        left:100,
        textStyle:
        {
            rich:
            {
                        a:
                        {
                            color: 'ffffff'
                        },
                        b:
                        {
                            color: '7e8da8'
                        }
            }
        }
    },
————————————————
版权声明：本文为CSDN博主「aileen5150」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/aileen5150/article/details/87094433

==================================标题部分大致这些常用的================================

legend

为图例属性

image.png

地址为echarts.apache.org/zh/option.h… orient控制显示方式 orient:'horizontal',横 vertical竖

legend. formatter

支持字符串和函数方式 效果相同 formatter: 'Legend {name}'

formatter: function (name) { return 'Legend ' + name; }

image.png

legend. inactiveColor控制关闭的图例的颜色

legend可以设置显示哪些 给个数组即可 legend: { data: ['Forest', 'Steppe', 'Desert', 'Wetland'] },

image.png

===============================图例部分完结=========================================

以下为 ## grid 网格部分 echarts.apache.org/zh/option.h… 没有什么特别需要注意的地方

=======================grid部分完结================================================

以下为x轴部分 echarts.apache.org/zh/option.h…

xAxis. position

控制x轴的位置 取值有 top bottom 默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧。

xAxis. realtimeSort

动态排序仅当 X 轴的 type 是 'value' 时有效。

xAxis. type = 'category'

坐标轴类型

  • 'value' 数值轴，适用于连续数据。
  • 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
  • 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
  • 'log' 对数轴。适用于对数数据。

坐标轴名称属性 name决定内容 #### nameLocation 决定位置 需要一起使用

x轴点击事件#### xAxis. triggerEvent ** 只需要在 yAxis或者xAxis里添加triggerEvent:true 既可

然后在点击事件时做判断，判断用户点击的是柱状图还是y轴 x轴

myChart.on('click',function (params) { if(param.componentType =="yAxis" || param.componentType =="xAxis" ){ alert(param.value);

}else{ alert(param.name);

}

}); ———————————————— 版权声明：本文为CSDN博主「江河的江」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：blog.csdn.net/yangwang213…

x轴部分目前需要注意的这些 其他翻文档好了y轴基本相同

另外xy轴可以设置一个最大值 如下图就只能显示到最大100 另外也接受字符串

datamax 显示到最大数据值 image.png

image.png

xy轴label格式化

image.png image.png ==========================================xy轴部分完结================================

缩放功能 echarts.apache.org/zh/option.h…

image.png

image.png 缩放功能较简单

==========================缩放功能完结=================================

visualMap 热力显示

image.png

=============================热力图 用的方式比较固定====================完结

重点tooltip

tooltip. trigger = 'item' 'axis'

image.png

shandow

image.png cross

image.png

tooltip.formatter

tooltip. formatter **

stringFunction

提示框浮层内容格式器，支持字符串模板和回调函数两种形式。

1. 字符串模板

模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

  • 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
  • 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
  • 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
  • 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。

示例：

formatter: '{b0}: {c0}<br />{b1}: {c1}'

函数方式

    option = {
        title: {
            text: "",
        },
        tooltip: {
            trigger: "axis",//在轴上触发
            confine: true,//限制在图表区域内
            enterable: true,//鼠标是否可进入提示框浮层中，默认为false
            //params  是 formatter 需要的数据集
            formatter: params => {
          const { name, value } = params;
          console.log(params);
          const dotColor =
            '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#82ccdd;"></span>';

          return (

            `
                热词：${name} <br/>` +
            dotColor +
            `热度：${value}
            `
          );
          // 尝试ES6拼接
        }
      },
    }

params内容 如下

image.png

官方解释params { componentType: 'series', // 系列类型 seriesType: string, // 系列在传入的 option.series 中的 index seriesIndex: number, // 系列名称 seriesName: string, // 数据名，类目名 name: string, // 数据在传入的 data 数组中的 index dataIndex: number, // 传入的原始数据项 data: Object, // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中） value: number|Array|Object, // 坐标轴 encode 映射信息， // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等） // value 必然为数组，不会为 null/undefied，表示 dimension index 。 // 其内容如： // { // x: [2] // dimension index 为 2 的数据映射到 x 轴 // y: [0] // dimension index 为 0 的数据映射到 y 轴 // } encode: Object, // 维度名列表 dimensionNames: Array, // 数据的维度 index，如 0 或 1 或 2 ... // 仅在雷达图中使用。 dimensionIndex: number, // 数据图形的颜色 color: string, // 饼图的百分比 percent: number, }

===========================tooltip完结============================================

还有个就是工具栏## toolbox 之前没使用过

image.png

如下是自定义按钮 必须以my开头

{ toolbox: { feature: { myTool1: { show: true, title: '自定义扩展方法1', icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891', onclick: function (){ alert('myToolHandler1') } }, myTool2: { show: true, title: '自定义扩展方法', icon: 'image://http://echarts.baidu.com/images/favicon.png', onclick: function (){ alert('myToolHandler2') } } } } }

toolbox: { show: true, 
showTitle: false, // 隐藏默认文字，否则两者位置会重叠 
feature: { saveAsImage: { show: true, title: 'Save As Image' },
dataView: { show: true, title: 'Data View' }, },
tooltip: { // 和 option.tooltip 的配置项相同 show: true, formatter: function (param) { return return '<div>' + param.title + '</div>'; // 自定义的 DOM 结构 }, backgroundColor: '#222', textStyle: { fontSize: 12, }, extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' // 自定义的 CSS 样式 } },

控制每条线的颜色 按顺序读取颜色 image.png

image.png

============================关于series内容====================================

image.png 添加涟漪效果

 rippleEffect: {
              period: 2, // 涟漪特效的动画周期
              scale: 5, // 涟漪特效动画中波纹的最大缩放比例
              brushType: "fill" // 涟漪特效的波纹绘制方式
            },

symbol贴花的图案

'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

image.png image.png

image.png

image.png

image.png

image.png

image.png

可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。

URL 为图片链接例如：

URL 为 dataURI 例如：

可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

以json方式读取地图数据的方式

![$8VBB6_]GLIF}QBTYC2)1.png](p9-juejin.byteimg.com/tos-cn-i-k3…?)

image.png

==========================柱状图 渐变色===============================

avatar
文章
阅读
粉丝