echarts的相关知识

如何使用echarts写柱状图

一、echarts是什么？
商业级数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

二、使用步骤
1.这是echarts官网

[https://echarts.apache.org/zh/index.html]
2 引入echarts.min.js到你的项目下面即可 直接再html调用此方法 如下


3 这是呈现的效果图

4 具体代码如下

   <div id="chartmain" style="width: 100%; height: 212px;></div>
   var xData = ["设备1", "设备2", "设备3", "设备4", "设备5"];
  var line = ["275", "206", "168", "296", "150"];
  var option = {
   grid: {
      left: "15%",
      top: "14%",
      right: "5%",
      bottom: "13%",
   
    },
    legend: {
      show: true,
      icon: "circle",
      orient: "horizontal",
      top: "90.5%",
      right: "center",
      itemWidth: 10.5,
      itemHeight: 3,
      // itemGap: 30,
      textStyle: {
        // color: '#FFFFFF'
        color: "#C9C8CD",
        fontSize: 12,
      },
    },
    xAxis: [{
      data: xData,
      axisLabel: {
        textStyle: {
          // 这是改变这个x轴文字 的颜色
          color: "#CDEEF1",
          fontSize: 11.4,
        },
        margin: 6, //刻度标签与轴线之间的距离。
      },

      axisLine: {
        show: true, //不显示x轴
        lineStyle: {
          color: " #616566",
        },
      },
      axisTick: {
        show: false, //不显示刻度
      },
      boundaryGap: true,
      splitLine: {
        show: false,
        width: 0.8,
        lineStyle: {
          type: "solid",
          color: "#03202E",
        },
      },
    }, ],
    yAxis: [{
      type: "value",
      min: 0,
      max: 400,
      splitLine: {
        show: false,
        lineStyle: {
          color: "#7C7F81",
          type: "solid",
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: " #6d7475",
        },
      },
      axisLabel: {
        textStyle: {
          color: "white",
        },
      },
    }, ],
    series: [{
        //柱底圆片
        name: "",
        type: "pictorialBar",
        symbolSize: [20, 12],
        symbolOffset: [0, 3],
        data: [275, 206, 168, 296, 150, 500],
        z: 5,
        itemStyle: {
          normal: {
            label: {
              show: true, //开启显示
              position: "top", //在上方显示
            
              textStyle: {
                //数值样式
                color: "#83D5D3",
                fontSize: 12,
              },
            
            },
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "#5BB7C5",
              },
              {
                offset: 1,
                color: "#5BB7C5",
              },
            ]),
          },
        },
        data: line,
      },

      //柱体
      {
        name: "",
        type: "bar",
        barWidth: 20,
        barGap: "0%",
        itemStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: "linear",
              global: false,
              colorStops: [{
                  //第一节下面
                  offset: 0,
                  color: "#6DB0B6",
                },
                {
                  offset: 1,
                  color: "#6DB0B6",
                },
              ],
            },
          },
        },

        data: line,
      },

      //柱顶圆片
      {
        name: "",
        type: "pictorialBar",
        symbolSize: [20, 12],
        symbolOffset: [0, -8],
        z: 12,
        symbolPosition: "end",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [{
                  offset: 0,
                  color: "#5BB7C4",
                },
                {
                  offset: 1,
                  color: "#9BF9F9",
                },
              ],
              false
            ),
          },
        },
        data: line,
      },
    ],
  };
   //使用制定的配置项和数据显示图表
  myChart.setOption(option);

以上就是今天要讲的内容，本文仅仅简单介绍了echarts遇到柱状图的使用，而官网提供了大量能使我们快速便捷地处理数据的函数和方法 没事的童鞋们可以去看看。