echarts图使用的总结

淡淡的烟草味﹌ 2022-12-26 04:58 191阅读 0赞

### 1 整个echarts图的大小及位置 ###

grid: {
        x: "12%",//x 偏移量
        y: "18%", // y 偏移量
        width: "76%", // 宽度
        height: "70%"// 高度
    }

### 2 提示框位置 ###

position: function (point, params, dom, rect, size) {
          return [point[0]+20, point[1]-25];
    }

### 3 去掉刻度线 ###

axisTick: {
        show: false
    }

### 4 去掉网格线 ###

splitLine:{
        show:false
    }

### 5 y轴刻度的设置 ###

//最小值
    min: 0,
    //最大值
    max: 800,
    //间隔值
    interval: 200,

### 6 y轴顶部加单位 ###

name: "产能(万升)", //坐标名字
    nameLocation: "end",//坐标位置，支持start,end，middle
    nameTextStyle: {//字体样式
          fontSize: 12,//字体大小
          color:'#9daab3',
          fontFamily:"shishangzhongheijiantiregular",
          padding: -5 //距离坐标位置的距离
    }

### 7 折线图标记大小 ###

symbolSize:2

### 8 填充区域样式 ###

areaStyle: {
       normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 { offset: 0, color: "rgba(36,134,187,0.8)" },
                 { offset: 1, color: "rgba(36,134,187,0)" }
                 ])
       }
    }

### 9 提示框信息的自定义 ###

formatter: function(param) { 
         var value = param.value;  
         return 
             `<div
             style="font-size:16px;color:#9daab3;padding-left:5px;box-sizing:border-box;
             background-image:url(../../static/image/bian.png);background-size:100% 100%;background-repeat:no-repeat;">
             <p>产量 5,202,500克</p>
             <p>达成率  ${value[1]}%</p>
             </div>`
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，191人围观）

还没有评论，来说两句吧...

相关阅读

相关使用echarts做关系图

先看效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

待我称王封你为后i/ 2023年06月13日 09:38/ 0 赞/ 7 阅读

相关 echarts中graphic_ECharts的使用与总结

ECharts的使用与总结一,介绍与需求 1.1,介绍 ECharts商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大

清疚/ 2022年12月31日 11:22/ 0 赞/ 199 阅读

相关 echarts图使用的总结

1 整个echarts图的大小及位置 grid: { x: "12%",//x 偏移量 y: "18%", // y 偏移量

淡淡的烟草味﹌/ 2022年12月26日 04:58/ 0 赞/ 192 阅读

相关使用Echarts实现饼图

效果如图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L

心已赠人/ 2022年11月21日 04:25/ 0 赞/ 306 阅读

相关 echart 图绘制--基础使用

文章目录学习echart 简单绘制图像如何使用echart 如何查阅文档文档内容解析

你的名字/ 2022年11月12日 14:58/ 0 赞/ 291 阅读

相关 ECharts使用心得总结（二）

前言：前一段时间一直都挺忙的，各种事，也没来得及每周的总结，趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下，趁着周末跟大家分享一下。之前写过

刺骨的言语ヽ痛彻心扉/ 2022年08月17日 14:22/ 0 赞/ 376 阅读

相关使用echarts的一点总结

首先要下载最新echarts，旧版可能很多功能不支持 1.饼图中心写文字 ![70][] var myChart = echarts.init(docum

川长思鸟来/ 2022年05月12日 13:06/ 0 赞/ 257 阅读

相关 react单车项目，echart图的使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

妖狐艹你老母/ 2022年04月17日 00:20/ 0 赞/ 261 阅读

相关 echarts-liquidfill 水球图使用

下载及文档：[https://github.com/ecomfe/echarts-liquidfill\api][https_github.com_ecomfe_echarts

╰半橙微兮°/ 2022年03月17日 02:38/ 0 赞/ 1111 阅读

相关 Echarts使用笔记--饼图，柱状图

开始做前端了，感觉自己是要变成全栈工程师了。。。今天使用了echart，用之前觉得好高大上好厉害，肯定很复杂。用了以后才发现，使用起来超简单，当然，精通很难，里面的各种配

痛定思痛。/ 2022年01月26日 09:35/ 0 赞/ 428 阅读