HyperView 图表库

快速开始

• 安装依赖

npm i hv-chart

• 使用

// main.js
import { HvChart } from 'hv-chart'

Vue.use(HvChart)

// demo.vue
<template>
  <div class="demo">
    <hv-chart :options="chartOpt" auto-resize chart-width="100%" chart-height="600px" />
  </div>
</template>

<script>
import { themeColor, chartPx } from 'hv-chart'
export default {
  name: 'demo',
  data() {
    return {}
  },
  computed: {
    chartOpt() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          containLabel: false,
          x: chartPx(50),
          y: chartPx(50),
          x2: chartPx(40),
          y2: chartPx(45)
        },
        legend: {
          show: true,
          right: 0,
          top: 0,
          itemWidth: chartPx(10),
          itemHeight: chartPx(10),
          textStyle: {
            fontSize: chartPx(12)
          }
        },
        xAxis: {
          type: 'category',
          z: 2,
          axisLabel: {
            fontSize: chartPx(12)
          },
          splitLine: {
            show: false
          },
          nameTextStyle: {
            color: 'rgba(255,255,255,.45)',
            fontSize: chartPx(12)
          },
          data: ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008']
        },
        yAxis: [
          {
            name: '数量',
            type: 'value',
            max: 150,
            splitNumber: 6,
            z: 0,
            axisLabel: {
              formatter: '{value}K',
              fontSize: chartPx(12)
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dotted'
              }
            },
            nameTextStyle: {
              color: 'rgba(255,255,255,.45)',
              fontSize: chartPx(12),
              padding: [0, 0, chartPx(12), 0]
            }
          }
        ],
        series: [
          {
            type: 'bar',
            name: '类型一',
            itemStyle: {
              normal: {
                color: themeColor.linearColorVerticalBlue,
                barBorderRadius: [chartPx(6), chartPx(6), 0, 0]
              }
            },
            barWidth: chartPx(6),
            barGap: 1,
            data: [25, 75, 40, 20, 50, 60, 40, 50, 25]
          },
          {
            type: 'bar',
            name: '类型二',
            itemStyle: {
              normal: {
                color: themeColor.linearColorVerticalGreen,
                barBorderRadius: [chartPx(6), chartPx(6), 0, 0]
              }
            },
            barWidth: chartPx(6),
            barGap: 1,
            data: [35, 45, 90, 70, 100, 110, 120, 100, 75]
          },
          {
            type: 'bar',
            name: '类型三',
            itemStyle: {
              normal: {
                color: themeColor.linearColorVerticalYellow,
                barBorderRadius: [chartPx(6), chartPx(6), 0, 0]
              }
            },
            barWidth: chartPx(6),
            barGap: 1,
            data: [65, 85, 90, 90, 120, 80, 100, 80, 115]
          }
        ],
        animation: true
      }
    }
  }
}
</script>