---
sidebarDepth: 2
---


# 图表通用配置项（基于echarts封装使用开始）
支持默认设置，自定义覆盖设置，echarts通用配置设置
(基于dataV的修改，如果是只需要使用以下图表的组件可以只全局安装该分类组件)
```
import {useEchart} from 'ts-vue-echarts/src/index'
Vue.use(useEchart)
```

::: tip 图表渲染提示
组件一定要有宽高
:::

::: warning 地图组件使用报错问题
如出现</br>
This dependency was not found:</br>
* @/utils/baidu-map</br>
问题
请在@/utils/baidu-map.js指向的目录新建一个baidu-map.js文件，将下面代码复制到该文件下。修改AK值（百度地图申请）
:::

<fold-box title="点击以展示/隐藏baidu-map.js内容">
<<< @/src/utils/baidu-map.js
</fold-box>

## echarts [术语速查手册](https://echarts.apache.org/zh/cheat-sheet.html)
帮助大家理解各个命名是什么意思。快速查找相关术语

## option配置项
配置参数 | 说明描述 |类型 | 默认值  | 可选值 | 备注
:--:|:--:|:--:|:--:|:--:|:--:
chartRef | 组件ref命名 | `String` | 'chart' + 随机16位哈希值 | `-` | `-`
data | 图表数据 | Array | data属性 | `-` | `-`
styleName | 基本样式选择 | `String` | `style1` |`style1- 10` | `-`
colorName | 颜色选择 | `String` | `style1` |`style1- 10`| `-`|
seriesName | series样式选择  | `String` | `style1` |`style1- 10`| `-`|
dataZoomLen | 超过多长开启滚动条 | `Number` | `8`|  | `-` | `-`
zoomSize | 开启缩放的长度 | `Number` | `0`|  | `-` | `-`
commonConfig |  这个是为了预设样式没有出来，但原有的图表满足互相拼装组成新的图表而采用的，并且能减少一些不常用的预设样式  | `Object` | `0`| `{ open: false}` | `-` | `配置选项，具体见下表(建议使用customConfig，完成自定义样式覆盖)`
customConfig |  当前图表存在的属性，可以直接替换  | `Object` | `0`| `{ open: false}` | `-` | `配置选项，具体见echarts属性，可开启console配置打印出当前渲染的图表`
optConfig | 直接使用echarts的图表option配置 | `Object` | `0`| `{ open: false, option: {}}` | `-` | `直接使用echarts的图表配置`


## commonConfig注释

[1] 这个是为了预设样式没有出来，但原有的图表满足互相拼装组成新的图表而采用的，并且能减少一些不常用的预设样式。
```
 *  常用需要修改的配置：
 *  以styleName为基本，
 *  根据预设的 toolTip (提示框组件)、xAxis(x轴)、yAxis(y轴)、legend(图例文字)
 *  注意：seriesName、colorName,dataZoomLen 也可以通过这个配置，但是如果其他不变更，只更改这几个的话，建议不要使用commonConfig（最新建议不要用预设值，记不住，目前也没有规划好主题，建议使用customConfig）
 *  超过多长进行滚动操作：滚动条配置(dataZoomLen: 10)
 *  tooltipNum: 轮训的长度
 *  tooltipTime: 单个循环的时间
 *  示例：
     *  commonConfig: {
     *    open: true,
     *    console: true, // 要不要打印整一個option
     *    xAxisName: 'style1',
     *    yAxisName: 'style1',
     *    tooltipName: 'style1',
     *    legendName: 'style1',
     *    seriesName: 'style1',
     *    colorName: 'style1',
     *    dataZoomLen: 10,
     *  }
     *
```
[2] `commonConfig` 参数详解
配置参数 | 说明描述 |类型 | 默认值  | 可选值 | 备注
:--:|:--:|:--:|:--:|:--:|:--:
open | 是否开始该配置 | `Boolean` | `false` |`-`| `-`|
console | 是否打印整一個option | `Boolean` | `false` |`-`| `-`|
colorName | 颜色选择 | `String` | `style1` |`style1- 10`| `-`|
seriesName | series样式选择  | `String` | `style1` |`style1- 10`| `-`|
dataZoomLen | 超过多长开启滚动条 | `Number` | `8`|  | `-` | `-`
xAxisName | 横坐标样式 | `String` | `style1`|  | `-` | `-`
yAxisName | 纵坐标样式 | `String` | `style1`|  | `-` | `-`
tooltipName | 提示框样式 | `String` | `style1`|  | `-` | `-`
legendName |图例样式 | `String` | `style1`|  | `-` | `-`
tooltipNum | 轮训的长度 | `Number` | 0|  | `-` | `-`
tooltipTime |单个循环的时间 | `Number` | 1000|  | `-` | `-`

## customConfig注释
::: tip customConfig配置说明
  1.open: true,开启customConfig参数覆盖  </br>
  2.console: true,开启控制台打印模式，open必须为true</br>
  3.consoleText: '控制台描述文字',不传则有默认的文字描述,console必须为true</br>
  4.剩余参数则是图标原本应有的属性，可以查看console: true,开启控制台打印模式打印出来的东西,也可以直接看echarts官网查看属性配置
:::
示例
```
// 值部分
customConfig = {
  open: true,
  console: true,
  consoleText: '控制台描述文字',
  title: {
    text: '2222'
  }
}

data = {
  axisList: [
    '11/06',
    '11/07',
    '11/08',
    '11/09',
    '11/10',
    '11/11',
    '11/12',
    '11/13',
    '11/14',
    '11/15',
    '11/16',
    '11/17',
    '11/18',
    '11/19',
    '11/20'
  ],
  dataList: [
    {
      name: '数量',
      data: [
        5860, 5550, 5100, 3700, 5600, 4300, 4900, 5100, 3000, 4800, 5300, 3000,
        4800, 5300, 5700
      ]
    }
  ]
}

// 组件部分
<ts-vue-bar-style-1
    class="chart"
    :data="data"
    :customConfig="customConfig">
</ts-vue-bar-style-1>


```
## optConfig注释
::: tip optConfig配置说明
  1.open: true, 直接使用echarts的图表option配置  </br>
:::
示例
```
// 值部分：
optConfig = {
  open: false,
  option: {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  }
}

// 组件部分,必定要有高度
  <ts-vue-bar-style-1
    class="chart"
    :optConfig="optConfig"
  ></ts-vue-bar-style-1>
```

## data属性
具体见组件

## 对比commonConfig、customConfig、optConfig配置的覆盖顺序
styleName =》colorName、seriesName、dataZoomLen、zoomSize =》commonConfig =》optConfig =》 customConfig
