工作中遇到的echarts

已于 2022-10-22 00:14:19 修改
阅读量2.9k 收藏 3
点赞数 1
文章标签： echarts javascript
于 2022-10-19 17:49:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40386177/article/details/127411737
版权

工作中写过的echarts，做个记录

1.折线图，折线点设置边框，加上y轴边框，更改网格颜色在这里插入图片描述

代码如下

option = {
  tooltip: {},
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['2018', '2019', '2020', '2021', '2022'],
    axisLabel: {
      interval: 0, // x轴内容过多会隐藏部分内容，这样可以显示隐藏掉的内容
      inside: false,
      textStyle: {
        color: '#fff', // 字体颜色
        fontSize: '12' // 字体大小
      }
    },
    axisLine: {
      show: true, //是否显示轴线
      lineStyle: {
        color: '#234F88' //刻度线的颜色
      }
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    name: '人数', // 这个设置只在末尾添加单位
    nameTextStyle: {
      //y轴上方单位的颜色
      color: '#4160AE'
    },
    axisLabel: {
      interval: 0, // x轴内容过多会隐藏部分内容，这样可以显示隐藏掉的内容
      inside: false,
      textStyle: {
        color: '#fff', // 字体颜色
        fontSize: '12' // 字体大小
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#184070'], // 这里设置网格颜色
        width: 1,
        type: 'solid'
      }
    },
    axisLine: {
      show: true, //是否显示轴线
      lineStyle: {
        color: '#234F88' //刻度线的颜色
      }
    }
  },
  series: [
    {
      data: [820, 200, 934, 1290, 1330],
      type: 'line',
      areaStyle: {},
      symbol: 'circle',
      symbolSize: 7, //设定实心点的大小
      itemStyle: {
        normal: {
          color: 'ffffff', //改变折线点的颜色.
          borderColor: '#ffffff49',
          borderWidth: 8,
          lineStyle: {
            color: '#12C8EF' //改变折线颜色
          }
        }
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(19,201,238,0.8)'
          },
          {
            offset: 1,
            color: 'rgba(19,201,238,0.3)'
          }
        ])
      }
    }
  ],
  // 调整grid属性
  grid: {
    top: '15%',
    left: '10%',
    right: '5%',
    bottom: '11%'
  }
};

2.环形饼图，每个饼图之间有间隔，可使用css引入的字体，自定义颜色

在这里插入图片描述

代码如下

  let data = [
        { value: 10, name: '拔丝地瓜' },
        { value: 10, name: '荔枝肉' },
        { value: 10, name: '慕斯蛋糕' },
        { value: 10, name: '菠萝咕噜肉' },
        { value: 10, name: '苦瓜炒蛋' }

      ]
     let colorList = ['#3B6BD9', '#D9AF85', '#1B8AD1', '#FF4E4E', '#6248B3', '#36CFDF', '#FD4D8E', '#49A4D0', '#31F5B5']
  option = {

        tooltip: {
          trigger: 'item'
        },

        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '50%'],
            itemStyle: {
              normal: {
                borderColor: '#00224B',
                borderWidth: 3,
                color: function (colors) {
                  return colorList[colors.dataIndex]
                },
              },
            },
            data: data.map((item, i) => {
              item.label = {
                color: colorList[i],
                formatter: "{b} \n{d} % ",
                fontSize: 14,
                fontFamily: 'youyuan', // css中引入的字体
              }
              return item
            }),

          }
        ],

      };

3. 南丁格尔玫瑰图，两个图形进行叠加，比较特别的饼图，形状有点像西瓜。

在这里插入图片描述
代码如下：

let BookColorList = ['#09B3E7', '#47AAA1', '#FAC2F8', '#C9A353',]
let bookData = [
  { value: 40, name: '华硕' },
  { value: 23, name: '联想' },
  { value: 58, name: '小米' },
  { value: 62, name: '华为' },

]
option = {
  tooltip: {
    trigger: 'item',
    formatter: '{b} : {c} ({d}%)'
  },
  legend: {
    data: [
      '华硕',
      '联想',
      '小米',
      '华为',
    ],
    textStyle: { //图例文字的样式
      color: function (colors) {
        return BookColorList[colors.dataIndex]
      },
      fontSize: 13,
    },
    itemWidth: 6, //图例颜色块的宽度和高度
    itemHeight: 6,
    icon: "circle", // 图例前的图标为圆点
    top: 0,
    itemGap: 20
  },

  series: [
    {
      type: 'pie',
      silent: true, // 鼠标无操作
      radius: ['0', '70%'],
      center: ['50%', '58%'],
      roseType: 'radius',
      itemStyle: {
        normal: {
          color: function (colors) {
            return BookColorList[colors.dataIndex];
          }
        }
      },
      label: {
        show: true
      },

      data: bookData.map((item, i) => {
        item.label = {
          color: BookColorList[i],
          formatter: "{d} % ",
          fontSize: 15
        }
        return item
      }),
      labelLine: {
        normal: {
          length: 0,
          length2: 0,
          show: false    // 隐藏所有指示线
        }
      },
    },
    {

      type: 'pie',
      radius: ['0%', '63%'],
      center: ['50%', '58%'],
      roseType: 'radius',
      itemStyle: {
        normal: {
          color: '#1C3949',
          borderWidth: 2,
          borderColor: '#00224B',
        }
      },
      data: bookData,
      label: {
        show: false
      },

    },
  ],

};
option && myChart.setOption(option);

4.串行柱形图

![在这里插入图片描述](https://img-blog.csdnimg.cn/80518cb7b317496ebe38fbc6fd4d8c49.png

代码如下：

let data = {
  联想: 120,
  红米: 222,
  小米: 150,
  华硕: 111,
  宏碁: 141
};

let bardata = [];
let title = [];
for (let i in data) {
  bardata.push(data[i]);
  title.push(i);
}

let maxBarList = [];
let maxBar = Math.max(...bardata); // 数组最大值
if (maxBar % 50 == 0) {
  maxBarList = new Array(bardata.length).fill(maxBar);
} else {
  let r = maxBar + 50 - (maxBar % 50); // 白线补充
  maxBarList = new Array(bardata.length).fill(r);
}

option = {
  backgroundColor: '#081034',
  xAxis: {
    type: 'category',
    data: title,
    axisLine: {
      lineStyle: {
        color: '#fff' //更改坐标轴颜色
      }
    }
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#0B2C57'], // 这里设置网格颜色
        width: 0,
        type: 'solid'
      }
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#fff' //更改坐标轴文字颜色
      }
    }
  },
  series: [
  

    {
      type: 'pictorialBar',
      symbol: 'rect',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#24DDFF' },
            { offset: 1, color: '#0A6AB7' }
          ])
        }
      },

      symbolRepeat: true,
      symbolSize: [12, 6],
      symbolMargin: 2,
      z: 15,
      data: bardata
    },

    {
      type: 'bar',
      barWidth: 1,
      itemStyle: {
        color: '#fff'
      },
      data: maxBarList,
      z: 14
    }
  ],

  grid: {
    top: '5%',
    left: '10%',
    right: '5%',
    bottom: '8%'
  }
};

5.环形柱形图

在这里插入图片描述

代码:

let seriesDatum = [59, 24, 30, 60, 72]
let symbolArray = ['苹果', '菠萝', '橙子', '凤梨', '桃子']
let markPointDatum = []

var xFontcolor = ['#BD2020', '#E57D37', '#EBBE35', '#12ADBD', '#8274D0']


option = {
  title: [
    {
      text: ''
    }
  ],
  polar: {
    radius: [10, '90%']
  },
  angleAxis: {
    show: false, // 角度x轴刻度线
    max: 100, // 圆环最大值
    startAngle: 90, // 圆环开始绘制的位置，90度为12点的位置

  },
  radiusAxis: {
    type: 'category',
    data: symbolArray,
    show: true,
    axisLabel: {
      show: true, // x轴刻度文本
      interval: 0, // x轴内容过多会隐藏部分内容，这样可以显示隐藏掉的内容,
      textStyle: {
        color: function (value, index) { // 设置多种颜色
          return xFontcolor[index]
        },
        fontSize: 10
      },
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false // x轴刻度分割线
    },
    z: 25,
  },
  tooltip: {},
  series: [
    {
      type: 'bar',
      data: seriesDatum,
      coordinateSystem: 'polar',
      roundCap: true,
      barWidth: 5,
      label: {
        show: true,
        position: 'middle', // 柱体文字对齐方式
        // offset: [3, -6], // 文字偏移量
        align: 'top',
        formatter: '{c}%',
        textStyle: {
          color: '#fff', // 字体颜色
          fontSize: '10', // 字体大小
        }
      },
      itemStyle: {
        normal: {
          color: {
            type: 'linear',
            colorStops: [
              {
                offset: 0, color: '#2397F6' // 0% 处的颜色
              },
              {
                offset: 1, color: '#0ECDEE' // 100% 处的颜色
              },
            ],
            global: false // 缺省为 false
          }
        }
      },
      z: 15,
    },
    {
      type: 'bar',
      barWidth: 1,
      coordinateSystem: 'polar',
      roundCap: true,
      data: [100, 100, 100, 100, 100],
      z: 14,
      barGap: '-50%'
    },
  ],


};

6.仪表盘改造成进度条

在这里插入图片描述

option = {
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%'
  },
  series: [
    {
      name: 'Pressure',
      type: 'gauge',
      progress: {
        show: true
      },
      detail: {
        valueAnimation: true,
        formatter: '{value}'
      },
      data: [
        {
          value: 50,
          name: ''
        }
      ],
      axisTick:{
        show:false, // 刻度是否显示
     
      },
      splitLine:{
        show:false // 分隔符是否显示
      },
      axisLabel:{
        show:false // 数字是否显示
      },
      pointer:{
        show:false
      },
      detail:{
        show:false // 数据是否显示
      }
    }
  ]
};
折花入酒丶
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts 设置地图外边框、地图背景渐变以及在地图上打点.js
05-13
主要配置 echart 中 地图的外边框和地图整体背景颜色渐变以及在对应的地图上做标记等功能。详细效果图：https://blog.csdn.net/qq_36437172/article/details/106099547
web前端在工作中遇到的问题及解决方案
01-30
Web 前端在工作中遇到的问题及解决方案 在 Web 前端开发中，我们经常会遇到各种问题，这些问题可能来自于 JavaScript、Vue、ECharts 等技术栈。以下是我们在工作中遇到的问题及解决方案。 Vue 中的 ref 和 $ref ...
echarts的柱形图增加背景框，背景框比柱形图宽
最新发布
weixin_45443118的博客
06-20 875
animationDurationUpdate: 0,//关键代码 数据更新动画的时长。//因为我的柱形图要求的是渐变效果，所以我在这写了个colorlist，使用graphic时需要引用嗯，要不报错呢。barGap: '-65%', //这句话就是为了让柱形图的柱子到达背景图上。z: 1,//层级问题，加上嗯，这个必须加嗯，"name": "设备1","name": "设备2","name": "设备3","name": "设备4","name": "设备5",
echarts 设置柱状图边框颜色
SM_Cute的博客
02-22 1270
echarts 设置柱状图边框颜色
eCharts给图标添加边框
m0_61265297的博客
11-08 2394
【代码】eCharts给图标添加边框。
echarts barEchart柱状图边框、透明、文字靠左展示
qq_38866594的博客
08-11 3529
说明： 给柱状图加上 边框，改变柱状图颜色并透明，改变 X,Y轴字体颜色，改变 轴线颜色，将所有的轴线全都改成一致效果。说明： 第二是在第一个第二个基础改成渐变色。echarts 的代码。
echarts 柱状图设置边框_Echarts图表的悬浮框位置的调整
weixin_34266290的博客
01-12 2948
下面的代码实现了悬浮框的位置不会超出界面 最多在离界面边缘5px的地方tooltip:{position:function(point,params,dom,rect,size){//提示框位置varx=0;//x坐标位置vary=0;//y坐标位置//当前鼠标位置varpointX=point[0];varpointY=point[1];//提...
Echarts 设置 tooltip 背景框颜色文字颜色
weixin_44590591的博客
01-24 6624
Echarts 设置 tooltip 背景框颜色文字颜色 设置前 vs 后： // 自定义气泡样式 tooltip: { trigger: "axis", backgroundColor: "#2D8CF0", //设置背景颜色 textStyle: { color: "white" //设置文字颜色 }, border
ECharts多折线图——自定义悬浮提示框内容、自定义折线图线条颜色、自定义y轴单位、气泡单位，轴线颜色、图表网格容器大小
winne雪
06-16 1万+
1、自定义tooltip悬浮提示框内容（数据处理后加单位），需要在tooltip配置项的formatter使用回调函数的形式 参数详解：https://echarts.baidu.com/option.html#legend.formatter 2、自定义折线图线条颜色，直接在color配置项数组中写自己喜欢的颜色，在线条绘制的时候就会在数组中自动选择。 具体如下配置： option = { ...
uni-app封装echarts折线图，安卓真机测试可以使用
02-09
总结来说，将ECharts封装在uni-app的安卓真机环境中，需要利用renderjs和原生插件的能力，将ECharts的渲染工作交由原生代码处理，以克服H5环境中的限制。通过这种方式，我们可以在保持代码复用性的同时，提供更好的...
echarts-2.0.2
01-29
10. **文档与示例**：ECharts 提供详尽的文档和丰富的示例代码，帮助开发者快速上手并解决使用过程中遇到的问题。 在实际使用中，开发者通常会将 `echarts.js` 或 `echarts.min.js` 文件引入到 HTML 页面中，然后...
问一个关于echarts本地路径的问题
02-21
在前端开发中，尤其是在本地环境中使用ECharts时，经常会遇到路径问题。这通常涉及到HTML、CSS和JavaScript文件之间的引用，以及图片、数据文件等静态资源的定位。ECharts库本身需要通过`<script>`标签引入到HTML...
echarts3API
09-07
7. **常见问题**：解答在使用过程中可能遇到的问题和解决方案。 **ECharts 3 配置手册** 配置手册通常包含了所有图表和组件的配置选项，每个选项都有详细的解释和示例，帮助开发者理解如何根据自己的需求定制图表...
【vue】echarts的tooltip（提示框）基础配置和样式改写
意初的博客
06-29 3万+
为了能够使得echarts的tooltip提示框触发的格式，使用valueFormatter回调函数，能按照自定义的格式 项目场景②： 改写提示框里的样式 echarts的tooltip的样式需要官网api属性，贴一下常用的 项目场景③： 自定义提示框里的样式 为了能够使得echarts的tooltip改写样式，就不得不提formatter函数 作者上一篇文章，vue+echarts折线图拐点样式的配置和教程（简单易懂）_意初的博客-CSDN博客vue+echarts折.........
【可视化开发】echarts配置项——修改tooltip默认样式
jiurikeai的博客
12-30 4681
在可视化开发中我们通常会遇到修改tooltip样式问题，下面分享给大家代码片段和最终呈现效果。trigger 触发类型 axisPointer 坐标轴指示器配置项 borderColor：自定义边框颜色 borderWidth：自定义边框宽度 backgroundColor：自定义背景 confine是否将tooltip框限制在图表的区域内，默认为false extraCssText：额外附加到浮层的css样式 formatter：格式化悬浮框文字格式 triggerOn:：触发时机 textStyle：设
echarts 自定义tooltip显示图例颜色
阑珊伊人
11-23 7502
echarts默认的tooltip是自带图例颜色的，如下图： 可是很多时候，功能需求会要求提示框带单位或者调整样式。这个时候我们就需要用tooltip的formatter来自定义提示框内容。 点我跳转echarts tooltip自定义 可一旦用到formatter，图例颜色就会消失。如下图 如何设置呢？ 上代码： formatter(params) { let val0 = params[0]["value"]; let val1 = params[1]["v
【Echarts】一文快速上手Echarts（持续更新）
热门推荐
慕白Lee的博客
10-29 13万+
如示例代码中的dataFormatter方法就是将原始数据进行格式化，转换为Echarts图表渲染所需要的形式，将Echarts官网的图表对应代码迁移到Vue文件中。如示例代码中的option、dataMap等，它们保存了一些原始数据或者Echarts图表渲染的属性值等。这行代码的意思就是将Echarts引入到Vue文件中，然后就可以直接使用Echarts的功能了。那肯定代码错了呗, 你对比对比上面的代码。以该例为例，是如下代码。选择一个最基本的柱状图吧。
echarts地图添加外边框（散乱地图块添加区域边界线）
echo
06-12 576
echarts地图添加外边框（散乱地图块添加区域边界线）
csdn echarts地图
07-23
### 回答1： CSDN ECharts 地图是一个功能强大的数据可视化工具，基于百度 ECharts 开源项目开发而成。它主要用于在网页中展示各种地理数据和地图的信息。 CSDN ECharts 地图具有以下特点： 1. 强大的数据可视化功能：ECharts 地图提供了丰富多样的地图展示效果，可以展示全球、国家、省市、区县等各种地图信息。同时，它还支持在地图上绘制各种图表、标记和热力图，方便用户对数据进行更直观、更易懂的分析和展示。 2. 灵活易用的配置和交互：ECharts 地图提供了丰富的配置选项，用户可以根据自己的需求定制地图的样式、标记的图形、颜色等。同时，它还支持交互操作，用户可以通过点击、滚动等方式与地图进行互动，方便用户深入了解数据。 3. 跨平台兼容性好：ECharts 地图支持在多种平台上运行，包括 PC、移动设备和各种主流浏览器。无论是在网页端还是移动端，都可以流畅地展示和操作地图。 4. 社区活跃，资源丰富：作为百度 ECharts 项目的一部分，CSDN ECharts 地图拥有庞大的开发者社区，用户可以在社区中获取到大量的示例代码、文档和教程，帮助用户更好地上手和使用地图。 总的来说，CSDN ECharts 地图是一个功能丰富、灵活易用的数据可视化工具，能够帮助用户实现地理数据的展示和分析，更好地呈现数据的价值。无论是在数据分析、商业决策还是学术研究中，CSDN ECharts 地图都能够为用户提供强有力的支持。 ### 回答2： CSDN是一个IT技术社区，提供了各种技术教程和文章供开发者学习参考。而Echarts是一个基于JavaScript的数据可视化库，可以通过使用Echarts来创建各种图表，包括地图。 Echarts的地图组件是其中的一个核心功能，用于展示各种类型的地理数据。通过CSDN，我们可以轻松地学习和了解如何使用Echarts的地图组件来创建地图可视化效果。 首先，我们可以搜索关于Echarts地图的教程和指南，CSDN上有很多技术博文和视频教程可以学习。这些教程通常会介绍如何加载地图数据、选择合适的地图类型以及如何自定义地图样式。 其次，我们可以在CSDN的论坛或社区中提问和交流关于Echarts地图的问题。这样可以获得其他开发者的帮助和解答，共同解决遇到的困难和问题。 此外，CSDN的资源库中也会有一些Echarts地图的示例代码和项目案例，我们可以参考这些示例来理解和掌握如何使用Echarts地图组件。 总之，通过CSDN可以找到Echarts地图的相关资源和学习资料，帮助开发者了解和掌握如何使用Echarts来创建各种类型的地图可视化效果。 ### 回答3： CSDN Echarts地图是一种基于Echarts的地理信息可视化组件，它在CSDN平台上提供了丰富的地图展示功能。Echarts是百度开源的一款可定制化的数据可视化库，而CSDN作为一个IT技术社区，提供了这一地图组件给其广大的开发者和用户使用。 CSDN Echarts地图可以将各种数据以地域分布的形式直观地展示出来。不论是销售状况、用户分布还是疫情数据，都能通过地图的方式进行展示。这种可视化的方式能够帮助用户更好地理解数据，发现其中的规律和趋势。同时，CSDN Echarts地图也支持用户进行自定义样式的设置，包括地图的颜色、标注的大小和形状等，从而使用户能够根据自己的需求进行定制化的展示。 使用CSDN Echarts地图并不复杂，用户只需要在CSDN平台中引入相关的代码和资源即可。CSDN Echarts地图提供了丰富的API接口，用户可以根据自己的业务需求进行使用。另外，CSDN Echarts地图还具备良好的兼容性和响应速度，在展示大量数据时也能够保持较好的性能。 总的来说，CSDN Echarts地图是一种功能强大、可定制化的地图可视化组件，它能够帮助用户将地理数据以直观的方式展示出来，并且在CSDN平台上使用非常方便。无论是数据分析还是业务展示，使用CSDN Echarts地图都能够提升用户的工作效率和数据可视化效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值