v-charts 折线图多条线颜色设置

v-charts官网

v-charts这个组件是基于vue2和echarts封装的

安装

npm i v-charts echarts -S

示例

<template>
  <div>
    <ve-line :data="chartData"></ve-line>
  </div>
</template>

<script>
import VeLine from 'v-charts/lib/line.common'
export default {
  components: { VeLine },
  data () {
    return {
      chartData: {
        columns: ['date', 'PV', 'UV'],
        rows: [
          { 'date': '01-01', 'PV': 1231, 'UV': 1231 },
          { 'date': '01-02', 'PV': 1223, 'UV': 1231 },
          { 'date': '01-03', 'PV': 2123, 'UV': 1231 },
          { 'date': '01-04', 'PV': 4123, 'UV': 1231 },
          { 'date': '01-05', 'PV': 3123, 'UV': 1231 },
          { 'date': '01-06', 'PV': 7123, 'UV': 1231 }
        ]
      }
    }
  }
}
</script>

图表属性

图表属性

可选属性，直接覆盖了原有的，所以需要哪个加哪个就可以设置了。

比如需要给折线图不同线设置不同颜色, 代码如下：

colors: ['green', '#e4393c']

// 注意对应好下标就好了

<ve-line :data="chartData" :colors="colors"></ve-line>

完毕！祝您愉快！！！