echarts的使用

 

 

 

1

<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button style="float: right; padding: 3px 0" type="text">eachars图</el-button>
      </div>

      <!-- 内容 -->
      <div class="text item">
          <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main" style="width: 100%;height:600px;"></div>
      </div>
    </el-card>
  </div>
</template>

2本图形的地址 https://gallery.echartsjs.com/editor.html?c=xSJJXiE1Wx

https://www.cnblogs.com/1996zy/p/8963385.html  配置说明  
遇见的问题1  报错option是未定义的   解决：添加一个var

<script>

var echarts = require("echarts");

export default {
  data() {
    return {};
  },

  mounted() {
    var myChart = echarts.init(document.getElementById("main")); //// 基于准备好的dom，初始化echarts实例
    var xData = (function() {
      var data = [];
      for (var i = 1; i < 13; i++) {
        data.push(i + "月份");
      }
      return data;
    })(); //自调用函数

    var option = {
      backgroundColor: "green", //背景色
      title: {
        text: "本年商场顾客男女人数统计", //标题
        subtext: "BY Wang Dingding", //理解成副标题
        padding: [12, 4], //距离上下4px
        x: "4%", //标题和副标题距离左边的距离
        textStyle: {
          color: "red", //主标题的颜色
          fontSize: "22" //主标题的大小
        },
        subtextStyle: {
          color: "#90979c", //副标题
          fontSize: "16"
        }
      },

      //提示框 与series 有关    hover显示效
      tooltip: {
        trigger: "axis", // 触发类型，默认数据触发，见下图，可选为：'item' 只会显示一部分   ¦ 'axis'显示整个  hover显示效果不同
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          textStyle: {
            color: "#fff"
          }
        }
      },

      //网格
      grid: {
        borderWidth: 0, //此配置项生效的前提是，设置了 show: true
        top: 110,
        bottom: 95, //grid 组件离容器下侧的距离。
        textStyle: {
          color: "#fff"
        }
      },
      
      //图例组件
      legend: {
        x: "4%",
        top: "11%",
        textStyle: {
          color: "#90979c"
        },
        data: ["女", "男", "平均"]
      },

      calculable: true,

      //直角坐标系 grid 中的 x 轴
      xAxis: [
         {
          type: "category", // 'value' |  log' | 'time' | 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
          axisLine: {
            lineStyle: {
              color: "90979c"  //X轴线的颜色
            }
          },
          splitLine: {  //是否显示分隔线。默认数值轴显示，类目轴不显示。
            show: false   
          },
          axisTick: { //是否显示坐标轴刻度。
            show: false
          },
          splitArea: {  //坐标轴分隔区域的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。
            show: false 
          },

          axisLabel: {  ////是否显示刻度标签。
            interval: 0
          },
          data: xData //X轴的数据
        }
      ],
      
      //直角坐标系 grid 中的 Y 轴
      yAxis: [
        {
          type: "value",
          splitLine: { ////是否显示分隔线。默认数值轴显示，类目轴不显示。
            show: false  // 就是这种 | | | |
          },
          axisLine: { //y轴的线
            lineStyle: {
              color: "#90979c"
            }
          },
          axisTick: { ////是否显示坐标轴刻度。
            show: false
          },
          axisLabel: {
            interval: 0
          },
          splitArea: {  ////坐标轴分隔区域的显示间隔，
            show: false
          }
        }
      ],
      
      //内置型数据区域缩放组件   
      dataZoom: [
        {
          show: true, //是否显示 组件。如果设置为 false，不会显示  但是缩放功能还在
          height: 30,
          xAxisIndex: [0],
          bottom: 30,
          start: 10, //数据窗口范围的起始百分比
          end: 80,  //数据窗口范围的结束百分比
          handleIcon: //手柄的 icon 形状，支持路径字符串
            "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
          handleSize: "110%", //控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，
          handleStyle: {
            color: "#d3dee5"
          },
          textStyle: {
            color: "#fff"
          },
          borderColor: "#90979c"
        },
        {
          type: "inside",
          show: true,
          height: 15,
          start: 1,
          end: 35
        }
      ],

      series: [  //系列列表。每个系列通过 type 决定自己的图表类型 
        {
          name: "女",  //系列名称，用于tooltip的显示，
          type: "bar",  //类型
          stack: "总量",  //数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
          barMaxWidth: 35,  //柱条的最大宽度，不设时自适应。支持设置成相对于类目宽度的百分比。
          barGap: "10%", //不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）。
          itemStyle: {
            normal: {
              color: "rgba(255,144,128,1)",
              label: {
                show: true,
                textStyle: {
                  color: "#fff"
                },
                position: "insideTop",
                formatter: function(p) {
                  return p.value > 0 ? p.value : "";
                }
              }
            }
          },
          data: [
            709,
            1917,
            2455,
            2610,
            1719,
            1433,
            1544,
            3285,
            5208,
            3372,
            2484,
            4078
          ]
        },

        {
          name: "男",
          type: "bar",
          stack: "总量",
          itemStyle: {
            normal: {
              color: "rgba(0,191,183,1)",
              barBorderRadius: 0,
              label: {
                show: true,
                position: "top",
                formatter: function(p) {
                  return p.value > 0 ? p.value : "";
                }
              }
            }
          },
          data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220]
        },
        {
          name: "总数",
          type: "line",
          stack: "总量",
          symbolSize: 10,
          symbol: "circle",
          itemStyle: {
            normal: {
              color: "rgba(252,230,48,1)",
              barBorderRadius: 0,
              label: {
                show: true,
                position: "top",
                formatter: function(p) {
                  return p.value > 0 ? p.value : "";
                }
              }
            }
          },
          data: [
            1036,
            3693,
            2962,
            3810,
            2519,
            1915,
            1748,
            4675,
            6209,
            4323,
            2865,
            4298
          ]
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
};
</script>