✨ [Feature]: 请问Chart 图表 柱状图和折线图合在一起咋整

[qq286674943]

What problem does this feature solve

Chart 图表 柱状图和折线图合在一起咋整

What does the proposed API look like

类似这种

What is your project name

tiny-vue

[Issues-translate-bot]

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

---

Title: ✨ [Feature]: How to combine Chart chart, bar chart and line chart?

[qq286674943]

这是来自QQ邮箱的假期自动回复邮件。你好，我最近正在休假中，无法亲自回复你的邮件。我将在假期结束后，尽快给你回复。

[Issues-translate-bot]

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

---

This is the holiday automatic reply email from QQ mailbox. Hello, I am currently on vacation and cannot reply to your email personally. I will reply to you as soon as possible after the holiday.

[Davont]

折柱混合我们这边有lineDataName属性，你可以将你想要变为折线的数据放入对应的数组中，下面是示例代码，

<template>
  <div>
    <tiny-histogram :options="options"></tiny-histogram>
  </div>
</template>

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

export default {
  components: {
    TinyHistogram: ChartHistogram
  },
  data() {
    return {
      options: {
        data: [
          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
          { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
          { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
          { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
          { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
          { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
          { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
          { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
          { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
          { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
        ],
        lineDataName: ['Domestic'],
        xAxis: 'Month',
        yAxis: {
          name: 'Percent(%)'
        }
      }
    }
  }
}
</script>

折柱混合我这边之后会在案例中添加上去

[Issues-translate-bot]

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

---

For polyline mixing, we have the lineDataName property here. You can put the data you want to turn into a polyline into the corresponding array. The following is a sample code.

<template>
  <div>
    <tiny-histogram :options="options"></tiny-histogram>
  </div>
</template>

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

export default {
  components: {
    TinyHistogram: ChartHistogram
  },
  data() {
    return {
      options: {
        data: [
          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
          { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
          { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
          { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
          { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
          { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
          { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
          { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
          { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
          { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
        ],
        lineDataName: ['Domestic'],
        xAxis: 'Month',
        yAxis: {
          name: 'Percent(%)'
        }
      }
    }
  }
}
</script>

After I mix the folding column, I will add it to the case.