echarts中x、y轴的设置,以及vue中使用echarts实例.

开发实例:https://www.makeapie.com/explore.html#sort=rank_{timeframe=all}author=all

官网:https://echarts.apache.org/examples/zh/index.html?theme=light

1.设置轴的颜色和倾斜度

先贴出图

在上面的例子中，设置了x,y轴的颜色，还设置了x轴的倾斜角度，代码如下

2.设置轴的大小

效果图如下

代码设置如下

3.网格设置

4.自定义y轴

效果图如下

代码实现如下

https://blog.csdn.net/yijiupingfan0914/article/details/84974107

样例:

代码:

 <div
  id="formChart"
 :style="{width: '100%',height: '250px',margin: '0 auto',top:'-35px'}">
 </div>
 import echarts from "echarts";
 export default {
   mounted() {
    // 调用业绩报表
    this.formChart();
  },
  methods: {
    // 业绩报表
    formChart() {
      // 初始化echarts实例
      let formChart = echarts.init(document.getElementById("formChart")); // 绘制图表
      let option = {
        backgroundColor: "#ffffff", // 背景颜色
        color: ["#ff5a76", "#ffdd38", "#0fc7ab"], // 树状图颜色设置
        title: {
          text: "测试榜",
          top: 21,
          left: "21",
          textStyle: {
            fontSize: 16,
            color: "#262626",
          },
        }, // 标题设置
        animation: false,
        legend: {
          left: "center",
          bottom: "-5",
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          itemGap: 40, // 设置间距
          data: ["测试数1", "测试数2", "测试数3", "测试数4", "测试数5"],
          icon: "circle", // 设置图例为圆形显示
        }, // 树状图图例设置

        xAxis: [
          {
            type: "category",
            data: ["11-01", "11-02", "11-03", "11-04", "11-05"], // 显示内容
            axisTick: {
              show: false, //去掉x轴刻度线
            },
            nameTextStyle: {
              color: "#fff",
            },
            axisLine: {
              lineStyle: {
                color: "RGB(47,68,114)",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#262626",
              },
              margin: 20,
            },
            offset: -5, // 偏移距离
          },
        ],//x轴设置
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#262626",
              },
              formatter: "{value}",
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#262626",
              },
            },
            axisTick: {
              show: false, //去掉y轴刻度线
            },
            axisLine: {
              show: false, //是否显示坐标轴轴线
            },
            min: 0, // 设置y轴刻度的最小值
            max: 500, // 设置y轴刻度的最大值
            splitNumber: 5, // 设置y轴刻度间隔个数
            offset: 15, // 偏移距离
          },
        ],// y轴设置
        series: [
          {
            name: "测试数1",
            type: "bar",
            barWidth: "12",
            itemStyle: {
              normal: {
                barBorderRadius: [10],
              },
            }, // 树状图样式修改
            barGap: "0%" /*多个并排柱子设置柱子之间的间距*/,
            barCategoryGap: "50%" /*多个并排柱子设置柱子之间的间距*/,
            data:[120, 280, 220, 180, 198, 250]
            // data: [
            //   {
            //     value: 120,
            //   },
            //   {
            //     value: 280,
            //   },
            //   {
            //     value: 220,
            //   },
            //   {
            //     value: 180,
            //   },
            //   {
            //     value: 198,
            //   },
            //   {
            //     value: 250,
            //   },
            // ],
          },
          {
            name: "测试数2",
            type: "bar",// 设置为柱形显示
            barWidth: "12",
            itemStyle: {
              normal: {
                barBorderRadius: [10],
              },
            }, // 树状图样式修改
            data: [190,389,270,170,150,340]
          },
          {
            name: "测试数3",
            type: "bar",
            barWidth: "12",
            itemStyle: {
              normal: {
                barBorderRadius: [10],
              },
            }, // 树状图样式修改
            data: [250,333,228,230,260,230]
          },
          {
            name: "测试数4",
            data: [220, 440, 301, 354, 290, 330, 320],
            type: "line",// 设置为折线显示
            showSymbol: false, // 让圆点默认不显示,移入显示
            symbolSize: 5, // 设置折线上圆点大小
            itemStyle: {
              normal: {
                color: "#1890FF",
              },
            },
          },
          {
            name: "测试数5",
            showSymbol: false, // 让圆点默认不显示,移入显示
            symbolSize: 5, // 设置折线上圆点大小
            data: [500, 360, 450, 332, 265, 300, 309],
            type: "line", // 设置为折线显示
            itemStyle: {
              normal: {
                color: "#E22D2D",
              },
            },
          },
        ],// 参数设置
      };
      //防止越界，重绘canvas
      window.onresize = formChart.resize;
      formChart.setOption(option); //设置option
    },
   }
 }