大数据图表组件
安装使用
第一步
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 |
charsData | 图表数据 | Array | [{name: "Forest",data: [320, 332, 301, 334]}]... |
xAxisData | 图表横轴类目 | Array | ["2014年", "2015年", "2016年", "2017年"] |
color | 调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色 | ```Array | String``` |
tooltipFormatter | 提示框浮层内容格式器,支持字符串模板和回调函数两种形式 | ```String | Function``` |
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" |
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
赞助
您的支持就是我开发的动力