echarts：x轴y轴配置 真实接口获取数据分析

x轴

 xAxis: {
        // 是否显示x轴数据
        // show:false,
        // 是否显示x轴的水平线 不包括刻度线
        axisLine: {
          show: true,
          // 控制整个x轴的颜色
          lineStyle: {
            //  color:'red',
            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 刻度线显示在x轴水平线的上方 false 刻度线显示在x轴水平线的下方
            inside: false,
            length: 10, //控制刻度线的长度
            // 设置刻度线的颜色样式
            lineStyle: {
              //  设置颜色的模糊度
              shadowBlur: 4,
              // 设置模糊颜色
              shadowColor: "red",
              // 设置颜色
              color:"green"
            },
          },
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        // x轴文字的样式 数据很多 页面显示不下 ，配置如下
        axisLabel: {
          /* 显示所有的x轴的数据 */
          interval: 0,
          /* 放不下的倾斜角度 */
          rotate: 0,
          /* 数据距离刻度线的距离 */
          margin: 15,
          // 数据的颜色
          color: "blue",
        },
        //  x轴的网格线
        splitLine: {
          show: true,
          interval: "auto",
          // 网格线的颜色样式
          lineStyle:{
            color:"green"
          }
        },
      },```
      
  ***y***
复制代码

yAxis: { splitLine:{ show:true, lineStyle:{ color:"red" } }, // 不显示y轴的垂直线 axisLine:{ show:false }, }, series: [ { name: "销量", type: "bar", // 所有的柱子和手摸上去的提示都变成红色 // color:‘red’

      //   data: [5, 20, 36, 10, 10, 20],
      data: [
        {
          value: 5,
          name: "衬衫",
        },
        {
          value: 20,
          name: "羊毛衫",
        },
        //给某一个柱子填加颜色
        {
          value: 36,
          name: "雪纺衫",
          itemStyle: {
            //    color: "red"
            // 设置渐变色的柱子颜色
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "red", //柱子最上面的颜色是红色
                },
                {
                  offset: 1,
                  color: "blue", //柱子最下面的颜色是蓝色
                },
              ],
            },
          },
        },
        {
          value: 10,
          name: "裤子",
        },
        {
          value: 10,
          name: "高跟鞋",
        },
        {
          value: 20,
          name: "袜子",
        },
      ],
    },
  ],
});
window.BarChart = myChart;
复制代码

},

真实接口获取数据

• 父传以获取的后台数据

created(){
  reportsGet('reports/type/1').then(res=>{
     console.log(res.data)
     let {meta,data}=res.data
     if(meta.status==200){
       this.$message.success(meta.msg)
       this.reportsList=data
     }else{
       ths.$message.error(meta.msg)
     }
   })
  }
复制代码

• 子收

export default {
name: "LineChart",
props: {
  reportsList: {
    type: Object,
    default: () => {
      return {
        title: {
          text: "折线图",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          axisLabel: {
            /* 显示所有的x轴的数据 */
            interval: 0,
            /* 放不下的倾斜角度 */
            rotate: 0,
            /* 数据距离刻度线的距离 */
            margin: 15,
          },
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
    },
  },
},
data() {
  return {
    lineList: {},
  };
},
mounted() {
  // 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%",
      top: "30%",
      left: "20%",
    }),
  //   把图裂的位置调整一下
  this.lineList.legend.top='10%';
    this.lineList.xAxis[0].axisLabel = {
     
        /* 显示所有的x轴的数据 */
        interval: 0,
        /* 放不下的倾斜角度 */
        rotate: 30,
        /* 数据距离刻度线的距离 */
        margin: 15,
        // 数据的颜色
        color: "blue",
      
      },
      // 把折线图的阴影区域去除
      this.lineList.series.forEach(r=>{
          delete r.areaStyle;
          // 是否平滑显示曲线
          r.smooth=true
      })

    myChart.setOption(this.lineList);
  window.LineChart = myChart;
},
};