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

增加vuecharts3 #41

Merged
merged 1 commit into from
Jun 23, 2022
Merged

增加vuecharts3 #41

merged 1 commit into from
Jun 23, 2022

Conversation

lloydzhou
Copy link
Contributor

以组件方式调用echarts绘制图表(API参考BizCharts)

@lloydzhou
Copy link
Contributor Author

DEMO

import 'echarts'
import Echarts from 'vuecharts3'

const { Chart, Title, Tooltip, Line, Bar, Legend, Grid, XAxis, YAxis } = Echarts

export default defineComponent({

  components: {
    Chart,
    Title, Tooltip, Bar, Line, Legend, Grid, XAxis, YAxis,
  },

  setup() {
    return {}
  }
})


// template

<template>
  <div class="container">
    <Chart>
      <Grid :top="100" />
      <Legend :data="['data1', 'data2']" :top="65" />
      <Title text="顶部标题" subtext="顶部小标题" left="center" :top="10" />
      <Title text="底部标题" top="bottom" left="center" />
      <Bar name="data1" :data="[0.32, 0.45, 0.2]" />
      <Bar name="data2" :data="[0.2, 0.5, 0.3]" />
      <Line name="data2" :data="[0.2, 0.5, 0.3]" />
      <YAxis />
      <XAxis :data="['x1', 'x2', 'x3']" />
      <Tooltip trigger="axis" />
    </Chart>
    <h2>Heatmap必须搭配VisualMap</h2>
    <Chart>
      <Tooltip position="top" />
      <Grid top="10%" height="50%" />
      <XAxis :data="hours" />
      <YAxis :data="days" type="category" />
      <VisualMap :calculable="true" orient='horizontal' left='center' bottom="15%" :min="0" max="10" />
      <Heatmap name="Punch Card" :data="data" :label="{show: true}" :emphasis="{itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)'}}" />
    </Chart>
  </div>
</template>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants