<template>
  {{ colorPure }}
  <s-color v-model="colorPure" />
  {{ colorCss }}
  <s-color v-model="colorCss" type="css"/>
  {{ colorEcharts }}
  <s-color v-model="colorEcharts" type="echarts" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const colorPure = ref('#00ff23')
const colorCss = ref('linear-gradient(180deg,red 0%,blue 100%)')
const colorEcharts = ref({ "type": "linear", "global": false, "x": 0, "y": 0, "x2": 0, "y2": 1, "colorStops": [ { "offset": 0, "color": "rgba(181,63,63,1)" }, { "offset": 1, "color": "rgba(0,0,0,1)" } ] })
</script>

<style lang="scss" scoped>
</style>
