首页 > 其他分享 >v-charts 自定义堆叠面积图背景颜色

v-charts 自定义堆叠面积图背景颜色

时间:2023-08-16 17:23:28浏览次数:39  
标签:颜色 自定义 color charts 堆叠 offset VeLine 255

下载

npm i v-charts -S

main.js引入

import VeLine from 'v-charts/lib/line.common'
Vue.component(VeLine.name, VeLine)

使用

<ve-line :data="chartData" :settings="chartSettings"></ve-line>
export default {
  data() {
    this.yearSettings = {
      area: true, //是否展示为面积图
      itemStyle: { //面积图颜色设置
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0, //offset 可取范围 0、0.1、0.2、到1
              color: 'rgba(0, 231, 137, 0.4)', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(255, 255, 255, 0)' // 100% 处的颜色
            }
          ],
          globalCoord: false // 缺省为 false
        }

      }
    }
  }
}

最终效果

 更多的配置项目参考 https://echarts.apache.org/zh/option.html#title

 

标签:颜色,自定义,color,charts,堆叠,offset,VeLine,255
From: https://www.cnblogs.com/tlfe/p/17635696.html

相关文章

  • python中自定义类对象json字符串化的方法
    1.用json或者simplejson就可以2.定义转换函数:defconvert_to_builtin_type(obj):print'default(',repr(obj),')'#把MyObj对象转换成dict类型的对象d={}d.update(obj.__dict__)returnd 3.定义类classObject():name=""size=0def__init__(......
  • echarts 学习1
    构建代码varecharts=require('echarts');//基于准备好的dom,初始化echarts实例varmyChart=echarts.init(document.getElementById('main'));//绘制图表myChart.setOption({title:{text:'ECharts入门示例'},tooltip:{},......
  • jQuery自定义动画
      ......
  • Java自定义注解
    注解(Annotation),也叫元数据。一种代码级别的说明。它是JDK1.5及以后版本引入的一个特性,与类、接口、枚举是在同一个层次。本文将通过示例详解Java如何实现自定义注解,需要的可以参考一下 −目录概念作用JDK中预定义的一些注解注解生成文档案例自定义注解格式本质属......
  • 微信小程序解决ec-canvas偶现echarts未显示问题
    使用ec-canvas展示echarts图表,但是在实际操作中,偶现echarts空白问题。解决<viewclass="echarts-con"><ec-canvasid="pie-echarts"canvas-id="pie-echarts":ec="ec"@inited="getData"/></view>constgetData=as......
  • Jmeter 安装自定义插件
    1.下载PluginsManager下载地址:https://jmeter-plugins.org/install/Install/2.将下载的jar包复制到JMeter中的lib\ext目录下3.打开jmeter->选项->PluginsManager->availableplugins->搜索CustomThreadGroups插件->勾选->点击ApplyChangesandRestartJmeterInstalledPl......
  • 自定义MarkupExtension的学习,以及WPF中Combobox绑定枚举类型
    我们上一期讲到ComBobox绑定数据,https://www.cnblogs.com/guchen33/p/17630808.html这次我们简单化一下,正常来讲WPF中绑定不了枚举的像这样//前台代码<ComboBoxItemsSource="{BindingMyEnum}"/>//后台VMpublicenumMyEnum{One,Two,Three,Fo......
  • @JsonComponent注解自定义JSON序列化与反序列化
    1.概述本篇教程将聚焦于如何使用SpringBoot中的@JsonComponent通过使用这个注解,我们不需要手动引用ObjectMapper对象就可以将一个类暴露为Jackson的serializer与deserializer。由于这是SpringBoot提供的功能,所以我们不需要添加额外的依赖,我们可以直接在SpringBoot程序中使用它......
  • odoo15自定义小部件widget
    添加自定义widget的步骤比较简单,以下三步就可以了:1、JS实现widget的功能/*这个文件(文件名为my_basic_fields.js)要在__manifest__.py中设置,如下:'assets':{'web.assets_backend':['testaddons/static/src/js/my_basic_fields.js',],},*/odoo.define(�......
  • python重采样tif影像,自定义空间分辨率
    importwarningsimportnetCDF4warnings.filterwarnings('ignore')warnings.filterwarnings('ignore',category=DeprecationWarning)importnetCDF4importpandasaspdimportnumpyasnpfromosgeoimportgdalimportmatplotlib.pyplotasp......