标签：show color data value 类目 使用 type 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>

标签：show,color,data,value,类目,使用,type,echarts
来源： https://www.cnblogs.com/IwishIcould/p/11222881.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。