首页 > 其他分享 >echarts折线实心圆点、折线阴影

echarts折线实心圆点、折线阴影

时间:2023-04-28 10:57:31浏览次数:37  
标签:小圆点 圆点 阴影 折线 折线图 实心 echarts

echarts作为我们前端小伙伴常用的可视化库,那我们画出有阴影的折线图,让折线图比较立体感。 可以使用折线图的 lineStyle

实现效果如图

代码如下:

series: [
  {
    data: [150, 230, 224, 218, 135, 147, 260],
    type: "line",
    smooth: true,
    symbol: 'circle', //将小圆点改成实心 不写symbol默认空心
    symbolSize: 5,    //小圆点的大小
    lineStyle: {      // 阴影部分
      shadowOffsetX: 0, // 折线的X偏移    
      shadowOffsetY: 9,// 折线的Y偏移  
      shadowBlur: 8,  // 折线模糊
      shadowColor: "rgba(145, 132, 132, 1)", //折线颜色
    },
},

标签:小圆点,圆点,阴影,折线,折线图,实心,echarts
From: https://www.cnblogs.com/ZerlinM/p/17361485.html

相关文章

  • 辽宁省 Echarts 图
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>辽宁省地图</title><scriptsrc="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script><scriptsrc=&q......
  • Echarts4.0 迁徙图模拟Echarts2.0样式
     由于公司业务需求做Echarts4.0的迁徙图,但是Echarts4.0默认的迁徙图的飞行轨迹和迁徙线的颜色都是一样的,比较单调,现在模拟Echarts2.0的样式模拟了一个demo,虽然没有全部相同,但大体相近。备忘一下letminigrateChart=echarts.init(document.getElementById("MinigrateChart"));......
  • vue项目中引入echarts中国地图
     最近项目中根据项目需求,展示中国地图一、下载echarts插件(我这里使用的是 4.9.0 版本)[email protected]二、在需要使用的页面引入echarts(这里是单独封装了地图组件) components/map.vue<template><divclass="map-view"><divid="main"></d......
  • Echarts
    官网:https://echarts.apache.org/examples/zh/index.html#chart-type-bar1、Echarts中饼图的使用(附:formatter中{d}百分比位数修改) 例如:label:{position:'inside',formatter:"{b}:{c}({d}%)"},效果: 参考文献:https://blog......
  • echarts treemap当份额太小时文字显示不全,解决为垂直显示全部文字
    before:after:解决: ......
  • echarts 数据密集,如果设置sampling: 'average' 会导致提示框(tooltip)无法正常显示,但是
    如果数据比较密集,设置sampling:'average'确实可以加速绘图,但同时也可能导致提示框无法正常显示的问题。这个问题的原因是,sampling会对数据进行抽样,因此不会显示原始的数据点,而是将数据点以一定规律进行采样,取平均值或最大或其他值,因此提示框的内容可能不准确。不过,有一个简单的......
  • 【前端可视化】ECharts中国地图+散点图demo
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="w......
  • echarts 更改背景
    遇到一个问题很有意思记录一下:需求如下:使用echarts的树形图结构,更改背景颜色为环形透明状,具体图形如下思路:使用echarts提供的color更改背景颜色结果:发现此属性不生效,暂未找到原因使用backgroundColor更改渐变色背景结果:该属性不支持渐变色修改直接......
  • ai问答:使用 Vue3 组合式API 和 TypeScript 封装 echarts 折线图
    <template><divref="chart"style="height:500px;"></div></template><scriptlang="ts">import{ref,onMounted,watch}from'vue'import*asechartsfrom'echarts'e......
  • 给echarts添加点击事件
    1、在echarts内写上myChart.off('click')//防止多次触发,在给ehcart绑定事件时,要先写上此代码。myChart.on('click',(params)=>{   console.log(params) }) ......