举报投诉联系我们 手机版 热门标签 鳄鱼CMS
您的位置:鳄鱼CMS > echarts例设置 更多有关ECharts表的设置

echarts例设置 更多有关ECharts表的设置

2023-03-26 04:31 ECharts教程

echarts例设置 更多有关ECharts表的设置

echarts例设置

echarts是一款功能强大的可视化图表库,它可以帮助我们快速创建出各种类型的图表,并且可以自定义图表的样式。在使用echarts时,我们需要对其进行例设置,以便能够正确显示出我们想要的图表。

首先,我们需要在HTML文档中引入echarts.js文件,这样才能使用echarts库中的方法和属性。然后,我们需要创建一个div元素来作为echarts图表的容器,并且记住div元素的id。接下来,就是初始化echarts实例了。我们可以使用如下代码来初始化echarts实例:

var myChart = echarts.init(document.getElementById('main'));

上面代码中的'main'就是div元素的id。接下来就是设置图表的相关参数了。我们可以使用setOption()方法来设置图表相关参数:

myChart.setOption({  // 这里写你想要显示的图表相关参数 });

在setOption()方法中传递一个对象作为参数,该对象中包含了所有你想要显示在图表上的信息。这些信息包括标题、x轴、y轴、数据集、tooltip、legend、grid 等信息。最后一步就是将生成好的option对象传递到echarts实例中去显示出来了:

myChart.setOption(option);

更多有关ECharts图表的设置

blendMode

ECharts使用blendMode来设置图形的混合模式,不同的混合模式请参考 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation 。

默认为 'source-over'。 支持每个系列单独设置。

'lighter' 也是比较常见的一种混合模式,该模式下图形数量集中的区域会颜色叠加成高亮度的颜色(白色)。常常能起到突出该区域的效果。见示例 全球飞行航线

hoverLayerThreshold

图形数量阈值,决定是否开启单独的 hover 层,在整个图表的图形数量大于该阈值时开启单独的 hover 层。

单独的 hover 层主要是为了在高亮图形的时候不需要重绘整个图表,只需要把高亮的图形放入单独的一个 canvas 层进行绘制,防止在图形数量很多的时候因为高亮重绘所有图形导致卡顿。

ECharts 2 里是底层强制使用单独的层绘制高亮图形,但是会带来很多问题,比如高亮的图形可能会不正确的遮挡所有其它图形,还有图形有透明度因为高亮和正常图形叠加导致不正确的透明度显示,还有移动端上因为每个图表都要多一个 canvas 带来的额外内存开销。因此 3 里默认不会开启该优化,只有在图形数量特别多,有必要做该优化时才会自动开启。

useUTC

是否使用 UTC 时间。

  • true: 表示 axis.type 为 'time' 时,依据 UTC 时间确定 tick 位置,并且 axisLabel 和 tooltip 默认展示的是 UTC 时间。
  • false: 表示 axis.type 为 'time' 时,依据本地时间确定 tick 位置,并且 axisLabel 和 tooltip 默认展示的是本地时间。

默认取值为false,即使用本地时间。因为考虑到:

  • 很多情况下,需要展示为本地时间(无论服务器存储的是否为 UTC 时间)。
  • 如果 data 中的时间为 '2012-01-02' 这样的没有指定时区的时间表达式,往往意为本地时间。默认情况下,时间被展示时需要和输入一致而非有时差。

注意,这个参数实际影响的是『展示』,而非用户输入的时间值的解析。 关于用户输入的时间值(例如 1491339540396, '2013-01-04' 等)的解析,参见 date 中时间相关部分。

阅读全文
以上是鳄鱼CMS为你收集整理的echarts例设置 更多有关ECharts表的设置全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 鳄鱼CMS eyucms.com 版权所有 联系我们