echarts

安装

npm i echarts -S

在vue3中基本使用

init、setOption

<script setup>
  import {onMounted, ref} from "vue";
  import * as echarts from "echarts";
  const echartsRef = ref();
  function initEcharts() {
    const instanceEcharts = echarts.init(echartsRef.value);
    instanceEcharts.setOption({
      title: {text: "标题"},
      tooltip: {},
      legend: {},
      xAxis: {data: ["衬衫", "裤子"]},
      yAxis: {},
      series: [{name: "库存", type: "bar", data: [18, 20]}],
    });
  }

  onMounted(() => {
    initEcharts();
  });
</script>

<template>
  <div class="home-style">
    <div ref="echartsRef" class="echartsRef"></div>
  </div>
</template>

<style scoped lang="scss">
  .home-style {
    .echartsRef {
      width: 100%;
      height: 300px;
    }
  }
</style>

title

标题

title: {
    show: true,
    text: '',
    target: 'blank',
    link: '',
    textStyle: {
        color: '',
    },
    subtext: '',
    subtarget: 'blank',
    sublink: '',
    subtextStyle: {
        color: '',
        fontSize: 18,
        fontWeight: 'bold',
    },
    padding: 5,
    itemGap: 10,
    top: 'auto',
    bottom: 'auto',
    left: 'auto',
    right: 'auto',
    backgroundColor: 'transparent',
    borderColor: "red",
    textAlign: "center",
    textVerticalAlign: "auto",
}

legend

图例

legend: {
    show: true,
    type: 'scroll',
    orient: 'horizontal',
    x: 'center',
    y: 'top',
    type: "scroll",
    backgroundColor: "pink",
    borderColor: "",
    borderWidth: "10",
    itemWidth: 100,
    itemHeight: 30,
    itemGap: 60,
    textStyle: {
      color: "red",
      fontSize: "20px",
      fontWeight: 700,
    },
    itemStyle: {
      color: "green",
      borderColor: "yellow",
      borderWidth: 6,
      borderType: "dotted",
    },
    lineStyle: {
      color: "red",
    },
    selected: {
      库存1: false,
      库存2: false,
    },
    data: [
      {
        name: "库存1",
        icon: "circle",
        textStyle: {fontWeight: "bold", color: "orange"},
      },
      "库存2",
    ],
}

grid

网格配置

grid: {
    show: true,
    left: "20%",
    right: "20%",
    top: "10%",
    bottom: "10%",
    borderColor: "red",
    borderWidth: 1,
    backgroundColor: "pink",
    containLabel: true, // 是否显示刻度标签
}

xAxis

x轴坐标

xAxis: {
    axisLabel: { // 标签的样式
        color: 'red',
    },
    axisLine: {
        show: false,
        lineStyle: {
            color: 'red',
        },
    },
    axisTick: { // 刻度的样式
        show: false,
    },
    splitLine: { // 分割线的样式
        lineStyle: {
            color: 'red',
        },
    },
    
}

yAxis

y坐标

yAxis: [
    {
        show: true,
        inverse: false,
    },
    {
        show: false,
        inverse: true,
    }
],

series

图表配置

series: [
    {
        name: '',
        type: 'bar',
        data: [],
        barWidth: '30%', // 柱子的宽度
        barCategoryGap: 50, // 柱子之间的距离
        itemStyle: {
            barBorderRadius: 5,
            color: (params) => { // params是对象
                return params.dataIndex
            },
            color: 'none',
            borderWidth: 1,
            borderColor: 'red',
        },
        label: { // 柱子内的文字
            show: true,
            position: 'inside',
            formatter: '{c}%',
        },
        yAxisIndex: 0,
    },
    {
        name: '',
        type: 'line',
        data: [],
        smooth: true,
        lineStyle: { // 修改当前线条的样式
            color: 'red',
            width: 2,
            type: 'solid',
        },
        areaStyle: { // 填充颜色
            color: 'red',
        },
        symbol: 'circle', // 小圆点的样式
        symbolSize: 22,
        showSymbol: false,
        itemStyle: { // 设置圆点的样式
            color: 'red',
            borderWidth: 10,
            borderColor: 'red',
        }
    }
]

tooltip

提示框

tooltip: {
    show: false,
    trigger: 'axis',
    axisPointer: {
        type: 'shadow', // 可选line
    }
}

toolbox

工具箱

toolbox: {}

color

颜色配置

color: []

自适应

resize()

不定期更新