This is the third day of my participation in the August Text Challenge.More challenges in August

Follow up with a # Echart Bar Bar to explain the style of the continuation in detail, you can first look at the last article, if not, the impact is not particularly big.

Horizontal bar chart

Update data and styles dynamically

Realize the dynamic switch between monthly statistics and daily statistics. Monthly statistics, monthly data will be displayed, X-axis shows 12 labels; When counting by day, the x axis does not fully display all labels, the spacing is displayed, and the width of the cylinder also varies. The main method is setOption.

The official document [setOption] : echarts.apache.org/zh/api.html…

<script>
  import * as R from "ramda";

  const source1 = [
    ["January".1330.Awesome!.560],
    ["February".820.760.660],... ["November".901.880.360],
    ["December".934.600.700]];const source2 = [
    ["1".1330.Awesome!.560],
    ["2".820.760.660],... ["29".934.600.700],
    ["30".1330.Awesome!.560]];// The specific configuration is shown in the preceding section
  const initOption = {
    ...
    dataset: { source: source1 },
  };

  export default {
    data() {
      return {
        charts: null.isDaily: false}; },mounted() {
      this.charts = this.$echarts.init(
        document.getElementById("barCharts"),
        null,
        {
          renderer: "svg"});this.charts.setOption(R.clone(initOption));
    },
    methods: {
      handleSource() {
        this.isDaily = !this.isDaily;
        this.charts.setOption(
          R.mergeDeepRight(initOption, {
            // Dynamically update the data source
            dataset: {
              source: this.isDaily ? source2 : source1,
            },
            xAxis: {
              // Dynamically update the label interval
              axisLabel: {
                interval: this.isDaily ? 4 : "auto",}},series: R.map(
              // Dynamically update the column width
              (o) = > ((o.barWidth = this.isDaily ? 12 : 24), o),
              initOption.series
            ),
          }),
          true
        );
        this.charts.resize(); ,}}};</script>
Copy the code

Solve the echarts width and height adaptive problem

When making diagrams in a Web project, the width and height of the diagram are not fixed and need to be adapted to the width and height of the browser. The method used is resize. If you have multiple charts, you need to resize them at the same time.

<script>
  export default {
    mounted() {
      window.addEventListener("resize".this.handleResize, false);
    },
    destroyed() {
      window.removeEventListener("resize".this.handleResize);
    },
    methods: {
      handleResize() {
        const _this = this;
        const timer = setTimeout(() = > {
          _this.lineCharts.resize();
          _this.barCharts.resize();
        }, 500);
        // Clear the timer
        this.$once("hook:beforeDestroy".() = > {
          setTimeout(timer); }); ,}}};</script>
Copy the code

Longitudinal bar chart

Longitudinal bar graph implementation

The essence is the same as the horizontal, which is to change the x and y values; The X-axis is value and the Y-axis is category

let option = {
  xAxis: {
    type: "value",},yAxis: {
    type: "category",}};Copy the code

Coordinate indicator background gradient

The principle is the same as the horizontal one, just change the x and y values where the gradient is

let horizontalColor = {
  type: "linear".x: 1./ / replace
  y: 0.x2: 0.y2: 0./ / replace
  colorStops: [{offset: 0.color: "rgba(234,244,255,1)" },
    { offset: 1.color: "Rgba (234244255,0.3)"},].global: false};Copy the code

The columns are set in different colors

Color in series can be a function, handled in a function. ColorList [params.dataindex]

let colorList = [
  "#1890ff"."#52c41a"."#faad14"."#f5222d"."#1DA57A"."#d9d9d9",];let series = [
  {
    type: "bar".barWidth: 16.itemStyle: {
      // Customize the display (in order) to achieve different colors of the column
      color: (params) = > {
        returncolorList[params.dataIndex]; }},dimensions: ["Type"."Quantity sold"],},];Copy the code

Values are shown at the top of the bar chart

The label in a series can be a function, handled in a function. You can set the position, font color and size. Value [params.encode.x[0]].

let series = [
  {
    / /...
    type: "bar".label: {
      // The column header displays the values
      show: true.position: "right".color: "# 333".fontSize: "12px".formatter: (params) = > {
        return params.value[params.encode.x[0]]. }},},];Copy the code

Tooltip Tooltip box User-defined

Params [0]. AxisValue, item.seriesName, item.value[item.encode. X [0]]

let tooltip = R.merge(tooltip, {
  formatter: function(params) {
    let html = `<div style="height:auto; width:163px;" > <div style="font-size:14px; font-weight:bold; color:#333; margin-bottom:16px; line-height:1;" >${params[0].axisValue}
          </div>
          ${params
            .map(
              (
                item
              ) => `<div style="font-size:12px; color:#808080; margin-bottom:8px; display:flex; align-items:center; line-height:1;" > <span style="display:inline-block; margin-right:8px; border-radius:6px; width:6px; height:6px; background-color:${ item.color };" ></span>${item.seriesName}<span style="flex:1; text-align:right;" >${
                  item.value[item.encode.x[0]]}</span>
              </div>`
            )
            .join("")}
        </div>`;
    returnhtml; }});Copy the code

The overall implementation

charts.setOption({
  title: {
    text: "Distribution of sales volume",},dataset: {
    source: [[The word "apple".200],
      ["Peach".180],
      ["Grapes".340],
      ["Banana".250],
      ["Mango".166],
      ["Durian".185]],},xAxis: R.merge(yAxis, {
    type: "value",}).yAxis: R.mergeDeepRight(xAxis, {
    type: "category".axisPointer: {
      shadowStyle: {
        color: horizontalColor,
      },
    },
  }),
  series,
  tooltip,
});
Copy the code