brock-charts

vue 基于Echarts的图表组件 charts-map 是一个显示中国地图各个省份的数据的图表

Build Setup

# 安装组件
npm install brock-charts -S

#在main.js 引入并且use
import Vue from 'vue'
import BrockCharts from 'brock-charts'
Vue.use(BrockCharts)

#在组件中使用
<charts-map></charts-map>

#对charts 组件进行编辑
<charts-map :width='width' :height='height' :data='data' :min='min' :max='max' :text='text' :in-range='inRange' :title='title'></charts-map>


参数|含义|类型|是否必填|默认值
---|:--:|---:|---:
width|图表的宽度|String|可选|50%
height|图表的高度|String|可选|500px
data|图表的数据|Array|可选|[{name: "内蒙古",value: 1},{name: "黑龙江",value: 2},{name: "吉林",value: 3},{name: "辽宁",value: 4},{name: "北京",value: 5},{name: "天津",value: 6},{name: "河北",value: 7},{name: "河南",value: 8},{name: "山西",value: 9},{name: "山东",value: 10},{name: "江苏",value: 11},{name: "安徽",value: 12},{name: "上海",value: 13},{name: "湖北",value: 14},{name: "湖南",value: 15},{name: "江西",value: 16},{name: "浙江",value: 17},{name: "福建",value: 18},{name: "台湾",value: 19},{name: "广东",value: 20},{name: "香港",value: 21},{name: "澳门",value: 22},{name: "海南",value: 23},{name: "广西",value: 24},{name: "贵州",value: 25},{name: "云南",value: 26},{name: "重庆",value: 27},{name: "四川",value: 28},{name: "甘肃",value: 29},{name: "陕西",value: 30},{name: "宁夏",value: 31},{name: "青海",value: 32},{name: "西藏",value: 33},{name: "新疆",value: 34}];
min|visualMap的最小值|String,Number|可选|0
max|visualMap的最大值|String,Number|可选|34
text|visualMap的两端的文本|Array|可选|['高', '低']
inRange|visualMap在选中范围中的视觉元素|Object|可选|{color: ["#6FCF6A", "#FFFD64", "#FF5000"]}
title|图表的标题|Object|可选|{show: true,text: "排名情况",textAlign: 'center',textStyle: {color: "#2D3E53",fontSize: 30},left: 'center',}

For detailed explanation on how things work, consult the docs for vue-loader.