vue中echarts的使用

柱状图渲染：

        /* 是否显示整个x轴线 */
        /* show:true, */
        axisLine: {
          /* 是否显示x轴的水平线(不包括刻度线) */
          show: true,
          /* 控制整个x轴的颜色 */
          lineStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              /* 颜色变化的顺序为从左到右 */
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "red",
                },
                {
                  offset: 1,
                  color: "blue",
                },
              ],
              global: false,
            },
            width: 5,
          },
        },
        /* 刻度线的设置 */
        axisTick:{
          /* 是否显示刻度线 */
          show:true,
          /* 刻度线是否在柱子的中间位置显示 */
          alignWithLabel:true,
          /* true刻度线显示在水平线的上方 false刻度线显示在水平线的下方 */
          inside:false,
          /* 控制刻度线的长度 */
          length:10,
          /* 设置刻度线的颜色样式 */
          lineStyle:{
            /* 设置颜色 */
            color:'green',
            /* 设置颜色的模糊度 */
            shadowBlur:4,
            /* 设置模糊颜色 */
            shadowColor:'red'
          },
        },
        /* x轴文字的样式 */
        axisLabel: {
          color:'blue',
          /* 显示所有的x轴的数据 */
          interval: 0,
          /* 放不下的倾斜角度 */
          rotate: 0,
          /* 数据距离顶部刻度线上面的距离 */
          margin: 15,
        },
        /* x轴的网格线 */
        splitLine:{
          /* 是否显示网格线 */
          show:true,
          /* 网格线的颜色样式  */
          lineStyle:{
            color:'#007ACC'
          }
复制代码

 yAxis: {
        /* y轴的网格线 */
        splitLine:{
          /* 是否显示网格线 */
          show:true,
          /* 网格线的颜色样式  */
          lineStyle:{
            color:'#007ACC'
          }
        },
        /* 不显示y轴的垂直线 */
        axisLine: {
          show:false,
        }
      },
复制代码

折线图渲染数据：

展示页面调接口：

/* 可视化数据 */
export const reportsGet = (path="",params={})=> httpServe({path,params});
复制代码

import {reportsGet} from '@/http/request.js'
 data(){
    return{
      reportsList:{}
    }
  },
  created(){
    reportsGet('reports/type/1')
    .then(res=>{
      let {meta,data} = res.data;
      /* 当状态为200表示数据获取成功
      把数据传递给子组件 */
      if(meta.status==200){
        this.reportsList = data;
      }else{
        this.$message.error(meta.msg)
      }
    })
    .catch(err=>{
      this.$message.error(err)
    })
  },
复制代码

  <el-card shadow="always">
          <!-- 一定要添加判断，因为接口获取数据是异步的，不加判断会直接把初始化的空对象
          传给组件，所以需要加判断，等待接口获取到数据之后，再渲染折线图组件 -->
          <line-chart :reportsList="reportsList" v-if="Object.keys(reportsList).length"/>
        </el-card>
复制代码

组件：

name: "LineChart",
  props: {
    reportsList: {
      type: Object,
      default: () => {
        return {
          title: {
            text: "折线图",
          },
          tooltip: {},
          /* grid: {
            left: 30,
            top: 100,
          }, */
          xAxis: {
            axisLabel: {
              /* 显示所有的x轴的数据 */
              interval: 0,
              /* 放不下的倾斜角度 */
              rotate: 0,
              /* 数据距离刻度线的距离 */
              margin: 15,
            },
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "line",
              data: [5, 20, 36, 10, 10, 20],
            },
            {
              name: "库存",
              type: "line",
              data: [15, 30, 26, 20, 50, 30],
            },
          ],
        };
      },
    },
  },
  data() {
    return {
      lineList: {},
    };
  },
  mounted() {
    //基于准备好的dom，初始化echarts实例
    // var myChart = echarts.init(document.getElementById('main'));
    var myChart = echarts.init(this.$refs.main);
    /* 深拷贝一下 生成两个不同的对象 */
    this.lineList = JSON.parse(JSON.stringify(this.reportsList));
    this.lineList.title = {
      text: "折线图",
    };
    /* 给折线图设置上下左右的距离和图表尺寸大小 */
    this.lineList.grid = {
      width: "80%",
      left: "20%",
      top: "30%",
    };
    /* 下面这种方式需要先给一个对象 */
    /*  this.lineList.grid = {};
    this.lineList.grid.width = '80%';
    this.lineList.grid.left = '20%';
    this.lineList.grid.top = '30%'; */

    /* 把图例的位置调整一下 */
    this.lineList.legend.top = '10%';
    /* x轴文字的样式 */
    this.lineList.xAxis[0].axisLabel= {
      /* 显示所有的x轴的数据 */
      interval: 0,
      /* 放不下的倾斜角度 */
      rotate: 30,
      /* 数据距离顶部刻度线上面的距离 */
      margin: 15,
    }

    /* 把折线图的所属区域删掉 */
    this.lineList.series.forEach(r=>{
      delete r.areaStyle;
      r.smooth = true;
    })
    console.log(this.lineList)