应无所住,而生其心
排名
1
文章
860
粉丝
112
评论
163
net core webapi post传递参数
庸人 : 确实坑哈,我也是下班好了好几次,发现后台传递对象是可以的,但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器,因为现在百度富文本已经停止维护了,用tinymec...
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

echarts 显示坐标点。echarts 自定义显示坐标点。echarts 个性化坐标提升显示,

4829人阅读 2021/6/29 18:28 总访问:5182843 评论:0 收藏:0 手机
分类: 前端

最简单的显示出来,直接在series中对应的数据项里边设置一下label即可

  1. label: {
  2. show: true,
  3. position: 'top'
  4. }

完整一点的:

  1. series: [
  2. {
  3. //这里显示坐标点信息
  4. label: {
  5. show: true,
  6. position: 'top'
  7. },
  8. data: labClassStatisticsChartData.ySeriesData,
  9. //data: [32, 51, 41, 49,55,60,30,39,50,22],
  10. type: 'line',
  11. //显示出来折线图的面积
  12. areaStyle: {
  13. normal: {
  14. // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
  15. color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  16. offset: 0,
  17. color: 'rgba(80,141,255,0.39)'
  18. }, {
  19. offset: 0.34,
  20. color: 'rgba(56,155,255,0.25)'
  21. }, {
  22. offset: 1,
  23. color: 'rgba(38,197,254,0.00)'
  24. }])
  25. }
  26. }
  27. }
  28. ]

效果如下:

label里边的属性还可以支持设置,颜色,字体大小等等
比如我们这里设置了一下字号fontSize,以及文字偏移offset

  1. label: {
  2. fontSize:15,
  3. //是否对文字进行偏移。默认不偏移。例如:[30, 40] 表示文字在横向上偏移 30,纵向上偏移 40。
  4. offset:[30,40],
  5. show: true,
  6. position: 'top'
  7. }

还有很多可以设置的属性,看文档就知道了:
https://echarts.apache.org/zh/option.html#series-line.label

使用formatter函数格式化输出

比如我这里在数值加了一个百分号:

  1. label: {
  2. // 格式化输出
  3. formatter: function (params) {
  4. console.log(params)
  5. return params.value+"%";
  6. },
  7. show: true,
  8. position: 'top'
  9. }

效果如下:

关于formatter函数使用的官方文档:
https://echarts.apache.org/zh/option.html#series-line.label.formatter


欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

echarts中tooltip 基本样式问题处理

在echarts中遇到几个样式问题,现总结如下:1、tooltip中样式中 值换行在tooltip中修改加上一句代码formatter:'{b0}:{c...

ionic3实战使用echarts图表(柱状图)

在公司有些东西需要投到大屏幕上去显示,也就是电视显示屏(安卓版的),但是我没普通的html代码并不能打包到上去安装使用...

echarts自定义图表提示框。鼠标指上去显示。echarts tooltip的使用

官方文档:https://echarts.apache.org/zh/option.html#tooltip 使用的是tooltip,如果只是要显示出来,直接设置trigger: ...

echarts修改横纵坐标颜色。修改折线图线的宽度

echarts修改横坐标颜色代码主要是这样的 axisLine:{ lineStyle:{ ...

echarts图例legend颜色各不相同图例legend空心圆

代码如下:legend: { // x:'right', //可设定图例在左、右、居中 // padding:[0,50,0,0], //...

echarts折线图使用示例。包含颜色渐变节点样式图例legend样式等

设计图如下 代码如下<!-- 学习趋势图 --> <template> <div class="learnTrendChartContainer&q...

echarts提示框tooltip属性

tooltip: { show: true, // 是否显示提示框组件 trigger: 'axis', // 触发类型('item',...

echarts 仪表盘gauge颜色渐变。echarts圆环进度条。echarts圆环进度条弧形

效果如下: 配置项代码如下// 基于准备好的dom,初始化echarts实例 const myChart = this.$echarts.init(document.getEl...

echarts 设置x坐标刻度的颜色

是使用axisLabel下面的颜色设置,不是nameTextStyle不要搞混了。nameTextStyle官方解释是坐标轴名称的文字样式,要和坐标轴...

echarts setoption 不重新渲染

Echarts渲染的逻辑如果 echarts 未实例化则进⾏实例化过程,⼀旦实例化,便会在div容器⽣成⼀个 echarts_instance属性,该...

echarts 图表颜色设置饼图颜色渐变

[TOC]echarts 图表颜色设置在外层加一个color数组就行了 color:["#1890FF","#91CB74","#FAC858&...

echarts饼图通过grid设置位置不生效。饼图设置位置

grid 记得是平面直角坐标系的意思,而仪表盘、饼图这种,是通过设置中心点位置的方式定位的。所以仪表盘、饼图这种应该这样...

css弹性盒子flex布局

css弹性盒子由于版本不同浏览器问题造成了一些不同的写法display:flexbox;在google浏览器中如果使用下面的写法就不行displa...

可输入下拉文本框据输入动态加载数据 jquery-editable-select

用到一个jquery-editable-select的控件github地址:https://github.com/indrimuska/jquery-editable-select这个插件的原理是...

.net mvc分部页.net core分部页

.net分部页的三种方式第一种:@Html.Partial("_分部页")第二种:@{ Html.RenderPartial("分部页");}...