Echars（基本图标配置）

npm 安装 ECharts

npm install echarts --save

引入 echarts

以柱状图为例，下例为一个简单的柱状图组件：

<template>
  <div class="bar-chart">
    <div id="main" ref="main"></div>
  </div>
</template>

<script>
// 引入 echarts
import * as echarts from "echarts";
export default {
  name: "BarChart",
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    // 通过 document.getElementById("main") 获取原生dom ，项目中有多个图表时，须使用不同的 id
    // var myChart = echarts.init(document.getElementById("main"));
    // 通过 ref 获取dom ，不同于上面， ref 作用于这个组件实例内，保证 ref 在这个组件实例中是唯一的即可
    var myChart = echarts.init(this.$refs.main);
    // 绘制图表
    myChart.setOption({
      // 标题
      title: {
        // 主标题文本
        text: "柱状图",
      },
      // 提示框
      tooltip: {},
      // 直角坐标系 grid 中的 x 轴
      xAxis: {
        // 所有类目名称列表
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        // 坐标轴刻度标签的相关设置。
        axisLabel: {
          /* 显示所有的x轴的数据 可以设置成 0 强制显示所有标签 */
          interval: 0,
          /* 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠 */
          rotate: 5,
          /* 刻度标签与轴线之间的距离 */
          margin: 15,
        },
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [
            {
              value: 5,
              // 单个数据的图形样式设置
              itemStyle: {
                /* 设置渐变色的柱子颜色 */
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "red", // 柱子最上面的颜色是红色
                    },
                    {
                      offset: 1,
                      color: "blue", // 柱子最下面的颜色是蓝色
                    },
                  ],
                  global: false,
                },
              },
            },
            { value: 20 },
            {
              value: 36,
              itemStyle: {
                /* 设置渐变色的柱子颜色 */
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "skyblue", 
                    },
                    {
                      offset: 1,
                      color: "pink",
                    },
                  ],
                  global: false,
                },
              },
            },
            { value: 10 },
            { value: 10 },
            { value: 20 },
          ],
        },
      ],
    });
    // 将柱状图echarts实例挂载到window下，通过window.onresize函数实现柱状图能自适应浏览器窗口大小的变化
    window.BarChart = myChart;
  },
};
</script>

<style scoped lang="scss">
#main {
  height: 300px;
}
</style>
复制代码

// 使用柱状图组件的组件
import BarChart from '@/components/BarChart.vue';

export default {
  name:'ReportsView',
  components:{
    BarChart,
  },
  mounted(){
    window.onresize = function(){
      // 使柱状图能自适应浏览器窗口大小的变化
      window.BarChart.resize();
    }
  }
};