echarts折线图例子

<template>
  <div class="content">
    <div ref="myChart" class="classChart"></div>
  </div>
</template>

<script>
// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/line");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
import baseFunc from "@/serves/baseFunc";
export default {
  props: ["title", "data"],
  mounted() {
    this.Myecharts();
  },
  methods: {
    Myecharts() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.myChart);
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.title,
          textStyle: {
            //标题内容的样式
            color: "#999", 
            fontWeight: "lighter", //可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
            fontSize: 16 //主题文字字体大小，默认为18px
          },
          left: "center"
        },
        tooltip: {},
        xAxis: {
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          axisLabel: {
            interval: 4,
            textStyle: {
              color: "#999"
            }
          },
          axisTick: {
            //x轴刻度线
            show: false
          },
          axisLine: {
            //x轴
            show: false
          }
        },
        yAxis: {
          //设置网格线颜色
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#eee"],
              width: 1,
              type: "solid"
            }
          },
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            //y轴
            show: false
          },
          axisLabel: {
            color: "#555",
            fontSize: 14,
            textStyle: {
              color: "#999"
            },
            formatter: function(value, index) {
              var value;
              if (value >= 1000) {
                value = value / 1000 + "k";
              } else if (value < 1000) {
                value = value;
              }
              return value;
            }
          }
        },
        series: [
          {
            type: "line",
            color: "#F21156",
            areaStyle: {
              color: "rgba(242,17,86,0.1)"
            },
            itemStyle: {
              normal: {
                color: "#F21156",
                borderColor: "#fff" //拐点边框颜色
              }
            },
            symbol: "circle",
            symbolSize:5,
            data: [
              25000,
              10000,
              16000,
              10000,
              10000,
              15000,
              10000,
              16000,
              10000,
              10000,
              20000,
              20000
            ]
          }
        ]
      });
    }
  }
};
</script>

<style lang='less' scoped>
.content {
  padding-top: 0.5rem;
}
.classChart {
  width: 100%;
  height: 5rem;
}
h4 {
  font-size: 0.24rem;
  color: #999;
}
</style>

Myecharts() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.myChart);
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.title,
          textStyle: {
            //标题内容的样式
            color: "#999", //京东红
            fontWeight: "lighter", //可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
            fontSize: 16 //主题文字字体大小，默认为18px
          },
          left: "center"
        },
        tooltip: {},
        xAxis: {
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月"
          ],
          axisLabel: {
            interval: 4,
            textStyle: {
              color: "#999"
            }
          },
          axisTick: {
            //x轴刻度线
            show: false
          },
          axisLine: {
            //x轴
            show: false
          }
        },
        yAxis: {
          //设置网格线颜色
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#eee"],
              width: 1,
              type: "solid"
            }
          },
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            //y轴
            show: false
          },
          axisLabel: {
            color: "#555",
            fontSize: 14,
            textStyle: {
              color: "#999"
            },
            formatter: function(value, index) {
              var value;
              if (value >= 1000) {
                value = value / 1000 + "k";
              } else if (value < 1000) {
                value = value;
              }
              return value;
            }
          }
        },
        series: [
          {
            type: "line",
            color: "#F21156",
            areaStyle: {
              color: "rgba(242,17,86,0.1)"
            },
            itemStyle: {
              normal: {
                color: "#F21156",
                borderColor: "#fff" //拐点边框颜色
              }
            },
            symbol: "circle",
            symbolSize:5,
            data: [
              25000,
              10000,
              16000,
              10000,
              10000,
              15000,
              10000,
              16000,
              10000,
              10000,
              20000,
              20000
            ]
          }
        ]
      });
    }