Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

配置柱状图的宽度,或者以某种形式支持echarts自身原有的各种配置✨ [Feature]: #1636

Open
kevin82008 opened this issue May 21, 2024 · 2 comments
Labels
enhancement New feature or request tiny-charts

Comments

@kevin82008
Copy link

What problem does this feature solve

echarts原有的一些配置应该怎么用,比如柱状图的柱子的宽度、最大宽度等。

What does the proposed API look like

支持按照echarts本身属性的配置方式配置参数,并且合并进去使用

What is your project name

管理类项目

@Issues-translate-bot
Copy link

Bot detected the issue body's language is not English, translate it automatically.


Title: Configure the width of the histogram, or support the various original configurations of echarts itself in some form✨ [Feature]:

@kagol kagol added enhancement New feature or request tiny-charts labels May 25, 2024
@Davont
Copy link
Member

Davont commented Jun 28, 2024

如果你想使用echarts原生配置,你可以用在extend中去编写,类似下面这段案例代码

<template>
    <tiny-chart-histogram :options="options" :extend="extend"></tiny-chart-histogram>
</template>

<script setup lang="jsx">
import { ref } from 'vue'
import { ChartHistogram as TinyChartHistogram } from '@opentiny/vue'

const options = ref({
  padding: [50, 30, 50, 20],
  legend: {
    show: true,
    icon: 'line'
  },
  data: [
    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
  ],
  xAxis: {
    data: 'Month'
  },
  yAxis: {
    name: 'precentage(%)'
  }
})
const extend = ref({
  series: [
    {
      barWidth: 10
    },
    {
      barWidth: 10
    }
  ],
  tooltip: {
    trigger: 'none'
  }
})

</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request tiny-charts
Projects
None yet
Development

No branches or pull requests

4 participants