请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

@Martin.Zhang
超级版主   /  发表于:2024-2-4 15:11  /   查看:124  /  回复:0


显示效果:
PixPin_2024-02-04_15-01-28.gif15921629.png

实现步骤:
1.使用Echarts图表
image.png352457579.png
2.绑定数据
image.png411673888.png
3.属性中调整自定义属性
image.png168192137.png
代码内容:

  1.     let color = ['0, 124, 250','0, 254, 210']

  2.     // 创建用于显示动画效果的系列数组
  3.     let news=[]
  4.     option.series.forEach ((s,i)=>{
  5.         let data1 = []
  6.         s.data.forEach((item,index) =>{
  7.             data1.push([option.xAxis.data[index].value,item.value])
  8.         })
  9.         let s1 =
  10.             {
  11.                 "name": s.name,
  12.                 "data": [{
  13.                     "coords": data1,
  14.                 }],
  15.                 "type": "lines",
  16.                 "coordinateSystem": "cartesian2d",
  17.                 "zlevel": 1,
  18.                 "polyline": true,
  19.                 "smooth": true,
  20.                 "symbol": "circle",
  21.                 "effect":
  22.                     {
  23.                         "show": true,
  24.                         "trailLength": 0.4,
  25.                         "symbol": "circle",
  26.                         "period": 8,
  27.                         "symbolSize": 8
  28.                     },
  29.                 "lineStyle":
  30.                     {
  31.                         "normal":
  32.                             {
  33.                                 "color": `rgba(${color[i]},1)`,
  34.                                 "width": 0,
  35.                                 "opacity": 0,
  36.                                 "curveness": 0
  37.                             }
  38.                     }
  39.             }
  40.         news.push(s1)

  41.     })

  42. let datas = []
  43.     let cates = []
  44.     let maxNums = [];
  45.     let maxNum = 0;
  46.     option.series[0].data.forEach(item => {
  47.         if (maxNum < item.value) {
  48.             maxNum = item.value;
  49.         }
  50.         datas.push(item.value)
  51.     })
  52. maxNum*=1.1
  53.     option.xAxis.data.forEach(item => {
  54.         cates.push(item.value)
  55.         maxNums.push(maxNum)
  56.     })


  57.     const _option = {
  58.         grid: {
  59.             top:option.grid.top,
  60.             left: option.grid.left,
  61.             right: option.grid.right,
  62.             bottom:option.grid.bottom+50,
  63.             containLabel: false,
  64.         },
  65.         xAxis: {
  66.             data: cates,
  67.             axisLine: {
  68.                 show: false,
  69.             },
  70.             axisTick: {
  71.                 show: false,
  72.             },
  73.             axisLabel: {
  74.                 color: option.xAxis.axisLabel.color,
  75.                 fontFamily: option.xAxis.axisLabel.fontFamily,
  76.                 fontSize: option.xAxis.axisLabel.fontSize,
  77.                 fontStyle: option.xAxis.axisLabel.fontStyle,
  78.                 fontWeight: option.xAxis.axisLabel.fontWeight,
  79.                 textStyle: {
  80.                     backgroundColor: '#013443',
  81.                     padding: 10,
  82.                     borderColor: 'rgba(0, 185, 211, .9)',
  83.                     borderWidth: '1',
  84.                 },
  85.             },
  86.         },
  87.         yAxis: {
  88.             show: false,
  89.         },
  90.         series: [
  91.             {
  92.                 name: '柱图',
  93.                 type: 'bar',
  94.                 // barWidth: '10%',
  95.                 data: maxNums,
  96.                 tooltip: {
  97.                     show: false,
  98.                 },
  99.                 barGap: '-50%',
  100.                 itemStyle: {
  101.                     normal: {
  102.                         color: '#013f4b',
  103.                         label: {
  104.                             show: false, //开启显示
  105.                             position: 'top', //在上方显示
  106.                             textStyle: {
  107.                                 //数值样式
  108.                                 color: 'aqua',
  109.                                 fontSize: 15,
  110.                             }
  111.                         },
  112.                     },
  113.                 },
  114.             },
  115.             {
  116.                 name: '外圈点',
  117.                 type: 'line',
  118.                 showAllSymbol: true,
  119.                 symbol: 'circle',
  120.                 symbolSize: 25,
  121.                 lineStyle: {
  122.                     normal: {
  123.                         color: '#1766a7',
  124.                         shadowColor: 'rgba(9, 64, 96, .9)',
  125.                         shadowBlur: 0,
  126.                     },
  127.                 },
  128.                 itemStyle: {
  129.                     color: '#083b45',
  130.                     borderColor: '#45c9b2',
  131.                     borderWidth: 2,
  132.                     shadowBlur: 0,
  133.                 },
  134.                 label: {
  135.                     ...option.series[0].label
  136.                 },
  137.                 tooltip: {
  138.                     show: false,
  139.                 },
  140.                 data: datas,
  141.             },
  142.             {
  143.                 name: '内部点',
  144.                 type: 'line',
  145.                 showAllSymbol: true,
  146.                 symbol: 'circle',
  147.                 symbolSize: 8,
  148.                 lineStyle: {
  149.                     normal: {
  150.                         color: '#1766a7',
  151.                         shadowColor: 'rgba(0, 0, 0, .3)',
  152.                         shadowBlur: 0,
  153.                     },
  154.                 },
  155.                 itemStyle: {
  156.                     color: '#45c9b2',
  157.                     borderWidth: 0,
  158.                     shadowBlur: 0,
  159.                 },
  160.                 tooltip: {
  161.                     show: false,
  162.                 },
  163.                 data: datas,
  164.             }
  165.         ],
  166.     };

  167.     news.forEach(item => {
  168.         _option.series.push(item)
  169.     })
  170. return _option;
复制代码
运行,浏览效果。
示例案例: wyn-export-20240204150915.zip (399.05 KB, 下载次数: 9)

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部