大数据图表组件

安装使用

第一步

npm install @alex_doone/echarts -D or
yarn add @alex_doone/echarts

第二步

在main.js文件里注册组件(注册所有图表组件)

import Doone from '@alex_doone/echarts'
import '@alex_doone/echarts/dist/doone-charts.cssß'
Vue.use(Doone)

按需注册

import { DoLine } from '@alex_doone/echarts'
Vue.use(DoLine)

第三步

from app.vue

<template>
    <div id="app">
        <DoLine width="500px" :color="['pink']"/>
    </div>
</template>
<script>
export default {
    name: "app"
};
</script>

效果图：

通用配置

地图型图表除外，下列图表配置不在做额外说明

|属性|说明|类型|默认值| |---|---|---|---| |width|图表宽度|String|"600px"| |height|图表高度|String|"400px"| |type|图表默认色系（dark|white）|Enum|"white"| |charsData|图表数据|Array|[{name: "Forest",data: [320, 332, 301, 334]}]...| |xAxisData|图表横轴类目|Array|["2014年", "2015年", "2016年", "2017年"]| |color|调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色|Array|String|["#358fff", "#32eaaa", "#e8a24c"]| |tooltipFormatter|提示框浮层内容格式器，支持字符串模板和回调函数两种形式|String|Function|Function，详情参看Click formatter| |animation|图表提示框浮层动画|Boolean|false| |animationTime|图表提示框浮层动画时间|Number|1000|

⚠️ 注意事项

引入源码版本

默认在 webpack 环境下会引入未编译的源码版本，如果你正在使用官方的 Vue CLI 来创建项目，可能会遇到默认配置把 node_modules 中的文件排除在 Babel 转译范围以外的问题。请按如下方法修改配置：

当使用 Vue CLI 3+ 时，需要在 vue.config.js 中的 transpileDependencies 增加 vue-echarts 及 resize-detector，如下：

// vue.config.js
module.exports = {
  transpileDependencies: [
    'vue-echarts',
    'resize-detector'
  ]
}

Props （均为响应式）

• initOptions

  用来初始化 ECharts 实例。

• theme

  当前 ECharts 实例使用的主题。

• options

  ECharts 实例的数据。修改这个 prop 会触发 ECharts 实例的 setOption 方法。

  如果直接修改 options 绑定的数据而对象引用保持不变，setOption 方法调用时将带有参数 notMerge: false。否则，如果为 options 绑定一个新的对象，setOption 方法调用时则将带有参数 notMerge: true。

方法

• mergeOptions（底层调用了 ECharts 实例的 setOption 方法）

  提供了一个更贴切的名称来描述 setOption 方法的实际行为。

• appendData

• resize

• dispatchAction

• showLoading

• hideLoading

• convertToPixel

• convertFromPixel

• containPixel

• getDataURL

• getConnectedDataURL

• clear

• dispose

静态方法

• connect
• disconnect
• registerMap
• registerTheme
• graphic.clipPointsByRect
• graphic.clipRectByRect

事件

支持如下事件：

• legendselectchanged
• legendselected
• legendunselected
• legendscroll
• datazoom
• datarangeselected
• timelinechanged
• timelineplaychanged
• restore
• dataviewchanged
• magictypechanged
• geoselectchanged
• geoselected
• geounselected
• pieselectchanged
• pieselected
• pieunselected
• mapselectchanged
• mapselected
• mapunselected
• axisareaselected
• focusnodeadjacency
• unfocusnodeadjacency
• brush
• brushselected
• rendered
• finished
• 鼠标事件
  • click
  • dblclick
  • mouseover
  • mouseout
  • mousemove
  • mousedown
  • mouseup
  • globalout
  • contextmenu

更多详细信息请参考 ECharts 的 API 文档。

柱状图

<DoBar />

效果图：

API

通过设置属性来产生不同的样式

|属性|说明|类型|默认值| |---|---|---|---| |barOpt|设置柱状图样式|Object|详情参看Click barOpt| |changeOpt|通用图表配置修改，优先级低于barOpt|Object|详情参看Click changeOpt|

折线图

<DoLine :charsData="line.charsData" :xAxisData="line.xAxisData"/>
<script>
export default {
    name: "app",
    data() {
        return {
            line: {
                xAxisData: [
                    "2014年",
                    "2015年",
                    "2016年",
                    "2017年",
                    "2018年"
                ],
                charsData: [
                    {
                        name: "人均年收入",
                        data: [11, 11, 15, 13, 12],
                    },
                    {
                        name: "人均年收入2",
                        data: [12, 13, 14, 15, 13],
                    }
                ]
            }
        };
    }
};
</script>

效果图：

API

通过设置属性来产生不同的样式

|属性|说明|类型|默认值| |---|---|---|---| |lineOpt|设置柱状图样式|Object|详情参看Click lineOpt| |changeOpt|通用图表配置修改，优先级低于lineOpt|Object|详情参看Click changeOpt|

折线柱状图

<DoLineAndBar />

效果图：

API

通过设置属性来产生不同的样式

|属性|说明|类型|默认值| |---|---|---|---| |barData|柱状图表数据|Object|{name: "最低气温",data: [11, 11, 15, 13, 12, 13, 10]}| |lineData|折线图表数据|Object|{name: "最高气温",data: [11, 11, 15, 13, 12, 13, 10]}| |barOpt|设置柱状图样式|Object|详情参看Click barOpt| |lineOpt|设置折线图表样式|Object|详情参看Click barOpt| |changeOpt|通用图表配置修改，优先级低于barOpt与lineOpt|Object|详情参看Click changeOpt|

饼状图

<DoPie 
    insertText="hah" 
    insertColor="pink" 
    insertTextColor="#000" 
    :changeOpt="{legend:{icon:'rect'}}" 
    :pieOpt="{radius: ['40%', '70%']}"/>

效果图：

API

通过设置属性来产生不同的样式

|属性|说明|类型|默认值| |---|---|---|---| |charsData|图表数据|Array|[{ value: 335, name: "直接访问" },{ value: 310, name: "邮件营销" },{ value: 234, name: "联盟广告" },{ value: 135, name: "视频广告" },{ value: 1548, name: "搜索引擎" }]| |center|饼图的中心（圆心）坐标，支持设置成百分比|Array|['50%', '60%']| |pieFormatter|饼图提示框浮层内容格式器|Function|params => `${params.name}\n${params.percent}%` ,详情参看Click| |pieOpt|设置饼图样式|Object|详情参看Click pieOpt| |insertPieOpt|设置内饼图样式|Object|详情参看Click pieOpt| |insertText|设置内饼图文字|String|'测试\n文案'| |insertColor|设置内饼图颜色|String|'#02072C'| |insertTextColor|设置内饼图文字颜色|String|'#02cdff'| |changeOpt|通用图表配置修改，优先级低于pieOpt|Object|详情参看Click changeOpt|

地图（中国、武汉、黄陂）

目前地图只有三种类型的，暂不支持导入geojson

<DoMap />
<DoMap type="wuhan"/>
<DoMap type="hp"/>

效果图：

API

通过设置属性来产生不同的样式

|属性|说明|类型|默认值| |---|---|---|---| |type|地图类型("china"|"hp"|"wuhan"|"caidian"|"dongxihu"|"hannan"|"jiangxia"|"xinzhou")|Enum |"china"| |formatter|地图提示框浮层内容格式器|Function|params => `<span class="mapTooltipStyle"></span>${params.name}` | |labelText|地图点位文字显示 |Boolean|false| |mapData|地图点位数据|Array|[{ name: "大庆", value: [125.03, 46.58] },{ name: "武汉", value: [114.31, 30.52] },{ name: "合肥", value: [117.27, 31.86] },{ name: "菏泽", value: [115.480656, 35.23375] },{ name: "廊坊", value: [116.7, 39.53] },{ name: "衢州", value: [118.88, 28.97] }]| |mapOpt|设置地图样式|Object|详情参看Click mapOpt| |changeOpt|通用图表配置修改，优先级低于mapOpt|Object|详情参看Click changeOpt| |animation|图表提示框浮层动画|Boolean|false| |animationTime|图表提示框浮层动画时间|Number|1000|

联系我

添加好友请备注

QQ: 498513334 Wechat: qiushi884745

赞助

您的支持就是我开发的动力