安装

import 'paiui/dist/packages/components/pChart.css'
import pChart from 'paiui/dist/packages/components/pChart'
Vue.use(pChart)

依赖说明

// p-chart是基于vue-echarts的二次封装
// 包含图形
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/radar'
import 'echarts/lib/chart/funnel'
import 'echarts/lib/chart/scatter'
import 'echarts/lib/chart/gauge'
// 包含组件
import 'echarts/lib/component/polar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
import 'echarts/lib/component/markLine'
import 'echarts/lib/component/markPoint'
if (typeof window !== 'undefined') {
  require('echarts-wordcloud')
}

配置

line

测试数据

lineData: {
  xAxis: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
  series: [{ name: '数据1', data: [820, 932, 901, 934, 1290, 1330, 1320] }],
},
lineMultipleData: {
  xAxis: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
  series: [
    { name: '数据1', data: [820, 932, 901, 934, 1290, 1330, 1320] },
    { name: '数据2', data: [100, 300, 200, 500, 1000, 600, 800] },
  ],
},

单折线

{{ lineData }}

<p-chart type="line" title="单折线" y-axis-name="数量" :options="lineData"></p-chart>

单折线+斑马背景

<p-chart type="line" title="单折线+斑马背景" y-axis-name="数量" :options="lineData" :split-area="true"></p-chart>

单折线+居中+子标题

<p-chart type="line" title="单折线" y-axis-name="数量" :options="lineData" title-align="center" subtitle="子标题"></p-chart>

单平滑线

<p-chart type="line" title="单平滑线" y-axis-name="数量" :options="lineData" :smooth="true"></p-chart>

单平滑线+隐藏y轴线

<p-chart type="line" title="单平滑线+隐藏y轴线" y-axis-name="数量" :options="lineData" :smooth="true" :y-axis-line="false"></p-chart>

单折线+隐藏y轴线+轴线颜色

<p-chart type="line" title="单折线+隐藏y轴线+轴线颜色" y-axis-name="数量" :options="lineData" :y-axis-line="false" x-axis-color="#6E7072" y-axis-color="#A7A8AA"></p-chart>

多折线

<p-chart type="line" title="多折线" y-axis-name="数量" :options="lineMultipleData"></p-chart>

多折线+格式化数据

<p-chart type="line" title="多折线+格式化数据" y-axis-name="面积" :options="lineMultipleData" formatter="{value}m²"></p-chart>

多折线+显示区域色

<p-chart type="line" title="多折线+显示区域色" y-axis-name="数量" :options="lineMultipleData" :area="true"></p-chart>

多折线+显示区域色+区域色

<p-chart
  type="line"
  title="多折线+显示区域色+区域色"
  y-axis-name="数量"
  :options="lineMultipleData"
  :area="true"
  :area-color="[
    {
      type: 'LinearGradient',
      color: [
        { offset: 0, color: '#188df066' },
        { offset: 1, color: '#188df011' },
      ],
    },
    {
      type: 'LinearGradient',
      color: [
        { offset: 0, color: '#BCB6E466' },
        { offset: 1, color: '#BCB6E411' },
      ],
    },
  ]">
</p-chart>

多折线+显示区域色+堆叠

<p-chart type="line" title="多折线+显示区域色+堆叠" y-axis-name="数量" :options="lineMultipleData" :area="true" :stack="true"></p-chart>

多折线+图例

<p-chart type="line" title="多折线+图例" y-axis-name="数量" :options="lineMultipleData" :legend="true"></p-chart>

多折线+平均线

<p-chart type="line" title="多折线+平均线" y-axis-name="数量" :options="lineMultipleData" :average="true"></p-chart>

多折线+最大、最小值

<p-chart type="line" title="多折线+最大、最小值" y-axis-name="数量" :options="lineMultipleData" :max="true" :min="true"></p-chart>

bar

测试数据

barData: {
  xAxis: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
  series: [{ name: '数据1', data: [820, 932, 901, 934, 1290, 1330, 1320] }],
},
barMultipleData: {
  xAxis: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
  series: [
    { name: '数据1', data: [820, 932, 901, 934, 1290, 1330, 1320] },
    { name: '数据2', data: [100, 300, 200, 500, 1000, 600, 800] },
  ],
},
barHorizontalData: {
  yAxis: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
  series: [{ name: '数据1', data: [820, 932, 901, 934, 1290, 1330, 1320] }],
},

单柱

<p-chart type="bar" title="单柱" y-axis-name="数量" :options="barData"></p-chart>

单柱+隐藏y轴线

<p-chart type="bar" title="单柱" y-axis-name="数量" :options="barData" :y-axis-line="false"></p-chart>

单柱+居中+子标题

<p-chart type="bar" title="单柱" y-axis-name="数量" :options="barData"  title-align="center" subtitle="子标题"></p-chart>

单柱+柱渐变

<p-chart
  type="bar"
  title="单柱+柱渐变"
  y-axis-name="数量"
  :options="barData"
  :color="[
    {
      type: 'LinearGradient',
      color: [
        { offset: 0, color: '#83bff6' },
        { offset: 0.5, color: '#188df0' },
        { offset: 1, color: '#188df0' },
      ],
    },
  ]">
</p-chart>

单柱+背景

<p-chart type="bar" title="单柱+背景" y-axis-name="数量" :options="barData" :show-background="true"></p-chart>

多柱

<p-chart type="bar" title="多柱" y-axis-name="数量" :options="barMultipleData"></p-chart>

多柱+数据格式化

<p-chart type="bar" title="多柱+数据格式化" y-axis-name="面积" :options="barMultipleData" formatter="{value}m²"></p-chart>

多柱+图例

<p-chart type="bar" title="多柱+图例" y-axis-name="数量" :options="barMultipleData" :legend="true"></p-chart>

多柱+图例+堆叠

<p-chart type="bar" title="多柱+图例+堆叠" y-axis-name="数量" :options="barMultipleData" :legend="true" :stack="true"></p-chart>

多柱+平均

<p-chart type="bar" title="多柱+平均" y-axis-name="数量" :options="barMultipleData" :average="true"></p-chart>

多柱+最大、最小值

<p-chart type="bar" title="多柱+最大、最小值" y-axis-name="数量" :options="barMultipleData" :max="true" :min="true"></p-chart>

多柱+自定义颜色队列

<p-chart type="bar" title="多柱+自定义颜色队列" y-axis-name="数量" :options="barMultipleData" :color="['#00ff00','#0000ff']"></p-chart>

单柱+横向

barHorizontalData: {
  yAxis: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'],
  series: [{ name: '数据1', data: [820, 932, 901, 934, 1290, 1330, 1320] }],
},

<p-chart type="bar" title="单柱+横向" x-axis-name="数量" :options="barHorizontalData"></p-chart>

pie

测试数据

pieData: {
  series: [
    { name: '直接访问', value: 335 },
    { name: '邮件营销', value: 310 },
    { name: '联盟广告', value: 234 },
    { name: '视频广告', value: 135 },
    { name: '搜索引擎', value: 600 },
  ],
},

饼图

<p-chart type="pie" title="饼图" :options="pieData"></p-chart>

饼图+子标题+居中

<p-chart type="pie" title="饼图+子标题+居中" :options="pieData" subtitle="子标题" title-algin="center"></p-chart>

饼图+图例

<p-chart type="pie" title="饼图+图例" :options="pieData" :legend="true"></p-chart>

饼图+隐藏label

<p-chart type="pie" title="饼图+隐藏label" :options="pieData" :label-show="false"></p-chart>

饼图+大小50%

<p-chart type="pie" title="饼图+大小50%" :options="pieData" radius="50%"></p-chart>

饼图+环形

<p-chart type="pie" title="饼图+环形" :options="pieData" :radius="['50%', '70%']"></p-chart>

饼图+环形+内标签+自动播放

<p-chart type="pie" title="饼图+环形+内标签+自动播放" :options="pieData" :radius="['50%', '70%']" label-mode="in" :auto="true"> </p-chart>

饼图+数据格式化+隐藏百分比

<p-chart type="pie" title="饼图+数据格式化" :options="pieData" formatter="{value}m²" :percent="false"></p-chart>

饼图+玫瑰图

<p-chart type="pie" title="饼图+玫瑰图" :options="pieData" :rose="true"></p-chart>

环形百分比

单数据

数据

circlePercentDataMultiple: {
  title: {
    text: '40间',
    subtext: '总体房间',
    textColor: 'rgba(0,0,0,0.85)',
    subtextColor: 'rgba(0,0,0,0.65)',
  },
  total: {
    name: '总体房间',
    value: 40,
  },
  series: [
    { name: '已租房间', value: 8 },
    { name: '已售房间', value: 12 },
    { name: '空闲房间', value: 5 },
  ],
},
circlePercentData: {
  total: {
    name: '总园区',
    value: 60,
  },
  series: [{ name: '科技园区', value: 45 }],
},

<p-chart
  type="circle-percent"
  title="单数据"
  :options="circlePercentData"
  :legend="true"
  formatter="{value}间"
  :bar-width="25"
  :color="[
    {
      type: 'LinearGradient',
      color: [
        {
          offset: 0,
          color: '#aaf14f',
        },
        {
          offset: 1,
          color: '#0acfa1',
        },
      ],
    },
  ]">
</p-chart>

多数据

<p-chart type="circle-percent" title="多数据" :options="circlePercentDataMultiple" :legend="true" formatter="{value}间"></p-chart>

雷达图

示例

数据

radarData: {
  indicator: [
    {
      name: '销售',
      max: 6500,
    },
    {
      name: '管理',
      max: 16000,
    },
    {
      name: '信息技术',
      max: 30000,
    },
    {
      name: '客服',
      max: 38000,
    },
    {
      name: '研发',
      max: 52000,
    },
  ],
  series: [
    {
      name: '实际开销',
      value: [5000, 14000, 28000, 31000, 42000],
    },
  ],
},

<p-chart
  type="radar"
  title="示例"
  :options="radarData"
  :legend="true"
  :color="[
    {
      type: 'LinearGradient',
      color: [
        {
          offset: 0,
          color: 'rgba(104,218,65,0.49)',
        },
        {
          offset: 0.1,
          color: 'rgba(140,245,20,0.44)',
        },
        {
          offset: 0.4,
          color: 'rgba(28,166,255,0.50)',
        },
        {
          offset: 1,
          color: '#3FC7FF',
        },
      ],
    },
  ]">
</p-chart>

漏斗图

示例

数据

funnelData: {
  series: [
    { value: 60, name: '访问' },
    { value: 40, name: '咨询' },
    { value: 20, name: '订单' },
    { value: 80, name: '点击' },
    { value: 100, name: '展现' },
  ],
},

<p-chart type="funnel" title="示例" :options="funnelData" :legend="true" label-mode="in"> </p-chart>

散点图

示例

数据

scatterData: {
  series: [
    {
      name: '直接访问',
      data: [
        {
          x: 10,
          y: 20,
          value: 50,
          title: 'A',
        },
        {
          x: 30,
          y: 40,
          value: 20,
          title: 'B',
        },
      ],
    },
    {
      name: '邮件营销',
      data: [
        {
          x: 8,
          y: 20,
          value: 250,
          title: 'A',
        },
        {
          x: 15,
          y: 10,
          value: 20,
          title: 'B',
        },
      ],
    },
    {
      name: '联盟广告',
      data: [
        {
          x: 10,
          y: 10,
          value: 150,
          title: 'A',
        },
        {
          x: 20,
          y: 10,
          value: 15,
          title: 'B',
        },
      ],
    },
    {
      name: '视频广告',
      data: [
        {
          x: 5,
          y: 5,
          value: 500,
          title: 'A',
        },
        {
          x: 50,
          y: 25,
          value: 200,
          title: 'B',
        },
      ],
    },
  ],
},

<p-chart type="scatter" title="示例" :options="scatterData" :legend="true"> </p-chart>

仪表盘

示例

数据

gaugeData: {
  series: [
    {
      name: '业务指标',
      data: [{ value: 50, name: '完成率' }],
    },
  ],
},

<p-chart type="gauge" title="示例" :options="gaugeData"> </p-chart>

词云

示例

数据

wordCloudData: {
  series: [
    {
      name: '业务指标',
      data: [
        { name: '直接访问', value: 335 },
        { name: '邮件营销', value: 310 },
        { name: '联盟广告', value: 234 },
        { name: '视频广告', value: 135 },
        { name: '搜索引擎', value: 600 },
      ],
    },
  ],
},

<p-chart type="wordCloud" title="示例" :options="wordCloudData"> </p-chart>

主题

import 'paiui/dist/packages/components/pChart.css'
import pChart from 'paiui/dist/packages/components/pChart'
// 此处引入主题（仅支持json格式的主题）
import blue from '@/pages/blue.json'
pChart.registerTheme('blue', blue)
//
Vue.use(pChart)

<p-chart type="line" title="深色多折线" :options="lineMultipleData" theme="blue"></p-chart>

<p-chart type="line" title="深色多折线" :options="lineMultipleData" theme="blue"></p-chart>
<br />

<p-chart type="bar" title="深色多柱" :options="barMultipleData" theme="blue"></p-chart>

<p-chart type="bar" title="深色多柱" :options="barMultipleData" theme="blue"></p-chart>
<br />

<p-chart type="pie" title="深色饼图" :options="pieData" theme="blue"></p-chart>

使用原生vue-echarts

// 不在默认引入范围的元素，请自行引入
// import 'echarts/lib/chart/xxx'
// import 'echarts/lib/component/xxx'
//
var data = []
for (var i = 0; i <= 360; i++) {
  var t = (i / 180) * Math.PI
  var r = Math.sin(2 * t) * Math.cos(2 * t)
  data.push([r, i])
}
return {
  rawLineData: {
    title: {
      text: '极坐标双数值轴',
    },
    legend: {
      data: ['line'],
    },
    polar: {
      center: ['50%', '54%'],
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
      },
    },
    angleAxis: {
      type: 'value',
      startAngle: 0,
    },
    radiusAxis: {
      min: 0,
    },
    series: [
      {
        coordinateSystem: 'polar',
        name: 'line',
        type: 'line',
        showSymbol: false,
        data: data,
      },
    ],
    animationDuration: 2000,
  }, 
}

<v-chart type="line" :options="rawLineData"></v-chart>

参考

vue-echarts

vue-echarts - Demo