大数据图表组件

安装使用

第一步

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>

效果图：

通用配置

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

⚠️ 注意事项

引入源码版本

默认在 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

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

折线图

<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

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

折线柱状图

<DoLineAndBar />

效果图：

API

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

饼状图

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

效果图：

API

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

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

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

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

效果图：

API

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

联系我

添加好友请备注

QQ: 498513334 Wechat: qiushi884745

赞助

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