Custom-charts NPM

custom-charts

适合有一定echarts基础的人使用
一个组件一种类型，传入的参数主要是对这种chart类型的样式进行修改
思路：ECharts=>/charts/mixins/=>/charts其他vue是对应的一个类型的图表组件，内部有写好的默认options，自己不满意可以传入outOptions来修改
mixin内部通过lodash的merge进行递归合并，将内部和外部options进行合并

包的特点

多数据传入（前提是支持多数据显示的图表）
outOptions实时监听变化
datas实时监听变化
无数据时候会显示暂无数据
因为echarts不能随屏幕变化而自适应字体，如果想自适应字体，自己需要先搭建好amfe-flexible，会自动读取html的font-size值，使用时候可以在需要字体自适应的地方传入字符串形式的'fontSize(xx)'，例如fontSize(0.12)表示12px；默认相对于1920分辨率
也支持手机端的使用，也是需要先配好amfe-flexible，使用方式和pc一样；默认相对375设备独立像素
y轴数据：大差距数据使用log类型

chart

公共props参数

id: {
  type: String,
  default() {
    return 'barchart'
  }
},
outOptions: { // 外部选项
  type: Object,
  default() {
    return null
  }
},
datas:{ // 数据，格式[[{name:xxx,value:xxx},{name:xxx,value:xxx}...],[{name:vvv,value:xxx}...]]
  type: Array,
  default () {
    return null
  }
},
legendDatas: {  // 数据图例名称
  type: Array,
  default () {
    return null
  }
}

柱状图

barCharts（标准柱状图）

isDiffColor：是否bar条都不一样颜色，布尔值

<barCharts id="barCharts" :outOptions="barChartsOptions" :datas="barChartsDatas" :legendDatas="barChartsLegend"/>

isDiffColor: {
  type: Boolean,
  default () {
    return false
  }
}

barCrosswiseCharts（标准横行柱状图）

饼图

pieCharts（标准挖空饼图）

colorAry：内置了颜色

地图

mapFly（地图飞线图）

<mapFly id="mapfly" :fly-to="{name:'丹巴',lnglat:[101.89077, 30.87868]}" />

flyTo

flyTo: {
  type: Object,
  default () {
    return { name: '丹巴', lnglat: [101.89077, 30.87868] }
  }
}

cityMap（地图图）

<cityMap id="cityMap" :datas="cityDatas" :city-json="cityJson"  />

// 城市json,和neiCity设置二选一,形式需要cityJson:{name:'广东',geojson:你的json文件}
cityJson: {
  type: Object,
  default: null
}

词云

wordCloudChart

<wordCloudChart id="wordCloudChart"/>

混合图

lineBarChart（折线柱形混合）

isDiffColor

isDiffColor:{
  type:Boolean,
  default:false
}

安装

无忧无虑使用方式

直接在自己项目 npm install custom-charts -S
本地代码调试或拓展
将项目克隆至本地并修改package.json的main为./src/components/index.js 然后npm link 之后在自己项目中npm link custom-charts关联次包即可

使用

// main.js中引入包
import CustomCharts from 'custom-charts'
Vue.use(CustomCharts)
// 项目中,以柱状图为例,参数务必按格式传
<lineCharts id="line1" :outOptions="outOptions" :datas="datas"/>