首页 > 其他分享 >单曲线图

单曲线图

时间:2024-06-21 20:58:59浏览次数:9  
标签:false 曲线图 color data offset const type

function (data,params){
  // const myChart = this.myChart;
  const yearData2 = [2020, 2021, 2022, 2023, 2024, 2025];
  const personData2 = [820, 932, 901, 934, 1290, 1330, 1320];
  
  data.sort((a, b) => a.nj - b.nj);

  const yearData = [];
  const personData = [];
  data.forEach(item => {
    yearData.push(item.nj);
    personData.push(item.count);
  })
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      name: '年',
      nameTextStyle: {
        color: '#9AA6B8',
        fontSize: 16
      },
      type: 'category',
      boundaryGap: false,
      data: yearData,
      axisLabel: {
        show: true,
        fontSize: 16,
        textStyle: {
          color: '#9AA6B8',
        }
      },
    },
    yAxis: {
      name: '单位: 人',
      nameTextStyle: {
        color: '#9AA6B8',
        fontSize: 16
      },
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed', // 设置刻度线为虚线个数
        }
      },
      axisLabel: {
        show: true,
        fontSize: 16,
        textStyle: {
          color: '#9AA6B8',
        }
      }
    },
    series: [
      {
        data: personData,
        type: 'line',
        smooth: true,
        symbol: 'circle', // 设置曲线两头的形状为圆形
        symbolSize: 4, // 大小
        showSymbol: false, // 默认不显示圆点
        emphasis: { // 鼠标悬浮时显示原点【要配合tooltip: trigger: 'xxx'使用】
            focus: 'series',
            itemStyle: {
              color: '#FFFFFF', // 鼠标悬浮时折线点的颜色
              borderColor: '#FFE04D',
              borderWidth: 3
            }
        },
        lineStyle: {
          width: 2,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#F45A23' }, // %0 处的颜色
              { offset: 0.5, color: '#FFE04D' }, // %50 处的颜色
              { offset: 1, color: '#F45A23' }, // 100% 处的颜色
            ],
            global: false // 缺省为 false
          }
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(255, 224, 77, 0.75)' }, // 0% 处的颜色
              { offset: 1, color: 'rgba(255, 224, 77, 0)' } // 100% 处的颜色 
            ],
            global: false // 缺省为 false
          }
        },
      }
    ]
  };
  
  return option;
}

 

标签:false,曲线图,color,data,offset,const,type
From: https://www.cnblogs.com/ladybug7/p/18261329

相关文章

  • python-数据分析-Matplotlib-1-基础图形(曲线图-散点-柱状-堆叠柱状-饼状图-直方图)
    曲线图#-*-coding:utf-8-*-#基础、曲线图importnumpyimportmatplotlib.pyplotasplt#设置字体SimHei:黑体#需要注意的是,使用中文字体后坐标轴上的负号将会无法显示,需要将`axes.unicode_minus`参数设置为`False`,这样才能让坐标轴上的负号正常显示plt.rcParams['f......
  • python怎么画曲线图
    如何使用python画曲线图?下面是基本步骤:前提首先,为了实际使用Matplotlib,我们需要安装它。安装如果你安装了更高版本的Python,你应该能够打开cmd.exe或终端,然后执行:pip install matplotlib注意:如果上面的较短命令不工作,你可能需要执行C:/Python34/Scripts/pipinsta......
  • 基于Python GDAL为长时间序列遥感图像绘制时相变化曲线图
      本文介绍基于Python中gdal模块,对大量多时相栅格图像,批量绘制像元时间序列折线图的方法。  首先,明确一下本文需要实现的需求:现有三个文件夹,其中第一个文件夹存放了某一研究区域原始的多时相栅格遥感影像数据(每一景遥感影像对应一个时相,文件夹中有多景遥感影像),每一景遥感影像......
  • 爬取网页曲线图的后台数据——Python实现
    爬取网页曲线图数据的应用十分广泛。在市场分析领域,投资者可以通过分析金融网站上的股票曲线图数据来了解股市趋势,从而做出更明智的投资决策。在科学研究中,研究人员可以通过爬取科学期刊网站上的曲线图数据来分析实验结果,推动科学进步。在气象领域,气象学家可以通过爬取气象网站上......
  • Visifire显示实时曲线图
    前台代码:<Windowx:Class="WPFVisifireChartsApp.RealtimeLineGraph"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://s......
  • WPF中使用OxyPlot动态绘制曲线图
    安装Nuget包:Install-PackageOxyPlot.WpfXAML代码:<Windowx:Class="OxyPlotDemo.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"......
  • CV-Python画曲线图
    importmatplotlib.pyplotaspltimportnumpyasnpfromscipy.interpolateimportmake_interp_splinedefreadLoss(path,x,y):i=0y.append(float(0))x.append(float(0))withopen(path,"r",encoding='utf-8')asf......
  • 设置曲线图
    defadd_line_chart(self,title_info,coordinate="E2"):#D列2行是位置""":paramtitle::paramx_title::paramy_title::paramcoordinate::return:"""workbook=load_workbook(self.excel......
  • 常见曲线图
    ROC(ReceiverOperatingCharacteristics)ROC曲线是一种用于评估分类模型性能的工具,特别是在不同的决策阈值下。ROC曲线显示了当阈值变化时,真正例率(TruePositiveRate,TPR)和假正例率(FalsePositiveRate,FPR)之间的关系。在身份验证领域也可用来表示FAR(Falseacceptance......
  • WPF 绘制实时曲线图
    效果图地址:https://www.bilibili.com/video/BV1PN411W7Ut通过Writeablebitmapex,gdi+,然后渲染到前台image中实现实时绘制曲线图 部分源码  视频底部有源码联系方式......