VUE - v-charts 图表高级设置

最新推荐文章于 2025-06-06 09:06:34 发布

原创最新推荐文章于 2025-06-06 09:06:34 发布 · 5.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #echart #v-charts

VUE 专栏收录该内容

6 篇文章

订阅专栏

本文档详细记录了在VUE项目中使用v-charts库进行图表高级设置的方法，包括调整线的粗细、标题样式、坐标轴字体颜色、线条区域颜色、x坐标标记以及隐藏线条的实现步骤。通过示例代码展示了具体操作过程。

VUE - v-charts 图表高级设置

2020-12

Max.Bai

记录VUE 使用v-charts 图表设置

先看下效果：

修改的内容包括：
1. 修改线的粗细
2. 修改标题的样式
3. 修改坐标轴字体颜色
4. 修改线条区域的颜色
5. 添加x坐标的标记
6. 默认不显示线条

模板代码：

<ve-line
          :title="chartTitle[index-1]"
          :loading="loading[index-1]"
          :legend="chartLegend"
          :data="chartData[index-1]"
          :extend="extend"
          :settings="chartSettings"
          :width-change-delay="500"
          :resize-delay="500"
          :change-delay="500"
          :colors="corlors"
          height="310px"
        />

JS 代码：

// 要显示的数据
const columsList = ['time', 'new_count', 'ma7', 'last10', 'p70', 'last_week']
const chartTitleDefault = {
  'textStyle.color': '#eee',
  show: true,
  left: 'center'
}

// 默认图表title
const normalChartTitle = [
  { ...chartTitleDefault, text: '全站' },
  { ...chartTitleDefault, text: 'ZF站' },
  { ...chartTitleDefault, text: 'GB站' },
  { ...chartTitleDefault, text: 'RG站' },
  { ...chartTitleDefault, text: 'CB站' },
  { ...chartTitleDefault, text: 'DL站' }
]
data() {
    this.chartSettings = {
      // 线条修改名字
      labelMap: {
        new_count: '实时数据',
        ma7: '最近7日平均',
        last10: '最近10次平均',
        p70: '最近7日70%线',
        p80: '最近7日80%线',
        p90: '最近7日90%线',
        last_week: '上周同期'
      }
    }
    // 扩展修改
    this.extend = {
      'grid.bottom': 0,   // 图下边距
      'xAxis.0.axisLabel.color': '#eee',  // 坐标轴文本 颜色
      'yAxis.0.axisLabel.color': '#eee',  // 坐标轴文本 颜色
      'legend.textStyle.color': '#eee',  // 样例文本 颜色
      'title.textStyle.color': '#eee',   // 标题文本 颜色
      'series.0.areaStyle.color': '#19d4ae3b',    // 第一条线区域颜色
      'series.0.z': 99,  // 第一条线显示的层级，越大越上层，不然会被其他线覆盖
      'series.0.markLine': {    // 第一条线添加标记，当前时间标记
        silent: true,
        symbol: ['none', 'pin'],     // 标记样式
        label: { formatter: '当前时间', distance: [0, 18] },    //标记显示文本，位置
        data: []    // 标记数据   {xAxis: 42, other: xxx}   xAxis x轴坐标的位置第42个数据
      },
      'series.0.showSymbol': false,    // 是否显示文本在图上
      'series.1.lineStyle.width': 1,   // 线的宽度
      'series.1.showSymbol': false,
      'series.2.lineStyle.width': 1,
      'series.2.showSymbol': false,
      'series.3.lineStyle.width': 1,
      'series.3.showSymbol': false,
      'series.4.lineStyle.width': 1,
      'series.4.showSymbol': false,
      'legend.selected': { '最近7日70%线': false, 上周同期: false }   // 是否显示线，默认全显示，false不显示
    }

    this.chartLegend = {
      top: 25
    }

    // 指定颜色顺序
    this.corlors = [
      '#19d4ae',
      '#fa6e86',
      '#ffb980',
      '#5ab1ef',
      '#0067a6',
      '#c4b4e4',
      '#d87a80',
      '#9cbbff',
      '#d9d0c7',
      '#87a997',
      '#d49ea2',
      '#5b4947',
      '#7ba3a8'
    ]


      loading: [false, false, false, false, false, false],
      chartData: [
        {
          columns: columsList,
          rows: []
        },
        {
          columns: columsList,
          rows: []
        },
        {
          columns: columsList,
          rows: []
        },
        {
          columns: columsList,
          rows: []
        },
        {
          columns: columsList,
          rows: []
        },
        {
          columns: columsList,
          rows: []
        }
      ],
      chartTitle:
        localUtils.getItem(PAYSUCCESS_CHART_TITLE, 'json') ||
        JSON.parse(JSON.stringify(normalChartTitle)),
      chartParms:
        localUtils.getItem(PAYSUCCESS_CHART_PARAMS, 'json') ||
        JSON.parse(JSON.stringify(normalChartParms)),

数据格式：

{
	last10: 4
	last_week: 3
	ma7: 3.71
	new_count: 4
	p70: 5
	time: 1608655200
}