折线图基础用法

• 该插件基于echarts进行简化封装
• 所以的options采用合并覆盖，也就是直接添加参数会覆盖内置的默认选项

<template>
  <db-echarts-line :options="options" :series="series">
  </db-echarts-line>
</template>
<script>
  // const {
  //   DbEchartsLine
  // } = require('@/echarts/index.js')
  export default {
    data() {
      return {
        options: {
          tooltip: {
            formatter: function (params) {
              let res = ''
              params.map(item => {
                res += (!!(res) ? '<br/>' : '') + item.seriesName + "年份：" +
                item.name +
                "<br/>保费：" +
                item.data
              })
              return res;
            },
          },
          title: {
            text: '折线图堆叠'
          },
          xAxis: {
            data: [
              "01月",
              "02月",
              "03月",
              "04月",
              "05月",
              "06月",
              "07月",
              "08月",
              "09月",
              "10月",
              "11月"
            ],
          }
        },
        series: [
          {
            name: '战队1',
            data: [1220, 1223, 1300, 934, 1290, 1330, 1320, 1220, 1330, 1022, 890],
          },
          {
            name: '战队2',
            data: [1820, 2932, 2901, 2934, 1290, 1630, 2420, 2220, 3330, 2022, 2890],
          },
          {
            name: '战队3',
            data: [664, 242, 342, 546, 345, 234, 342, 437, 268, 387, 237],
          }
        ]
      }
    },
    // components: {
    //   DbEchartsLine
    // }
  }
</script>

Expand Copy Copy

<template>
  <db-echarts-line :options="options" :series="series" mode="easy">
  </db-echarts-line>
</template>
<script>
  // const {
  //   DbEchartsLine
  // } = require('@/echarts/index.js')
  export default {
    data() {
      return {
        options: {
          tooltip: {
            formatter: function (params) {
              let res = ''
              params.map(item => {
                res += (!!(res) ? '<br/>' : '') + item.seriesName + "年份：" +
                item.name +
                "<br/>保费：" +
                item.data
              })
                
              return res;
            },
          },
          title: {
            text: '折线图堆叠'
          },
          xAxis: {
            data: [
              "01月",
              "02月",
              "03月",
              "04月",
              "05月",
              "06月",
              "07月",
              "08月",
              "09月",
              "10月",
              "11月"
            ],
          }
        },
        series: [
          {
            name: '战队1',
            data: [1220, 1223, 1300, 934, 1290, 1330, 1320, 1220, 1330, 1022, 890],
          },
          {
            name: '战队2',
            data: [1820, 2932, 2901, 2934, 1290, 1630, 2420, 2220, 3330, 2022, 2890],
          },
          {
            name: '战队3',
            data: [664, 242, 342, 546, 345, 234, 342, 437, 268, 387, 237],
          }
        ]
      }
    },
    // components: {
    //   DbEchartsLine
    // }
  }
</script>

Expand Copy Copy