1. Y-axis arrow

axisLine: {
    show: true.symbol: ["none"."arrow"].// One end of the arrow has no effect, the other end of the arrow
        symbolOffset: [0.10].// Move the arrow segment 10 pixels
        lineStyle: {
            color: "# 000"}},Copy the code

Two, x axis text display is not complete

1. Tilt text

xAxis: {
  axisLabel: {
    interval: 0.rotate: 40,}}Copy the code
2, newline display

xAxis: {
  axisLabel: {
    formatter: function(params) {
      var newParamsName = "";
      var paramsNameNumber = params.length;
      var provideNumber = 5; // Display several characters in a row, and display vertically when the value is 1.
      var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
      if (paramsNameNumber > provideNumber) {
        for (var p = 0; p < rowNumber; p++) {
          var tempStr = "";
          var start = p * provideNumber;
          var end = start + provideNumber;
          if (p == rowNumber - 1) {
            tempStr = params.substring(start, paramsNameNumber);
          } else {
            tempStr = params.substring(start, end) + "\n"; } newParamsName += tempStr; }}else {
        newParamsName = params;
      }
      returnnewParamsName; }}},Copy the code
Add a scroll bar

dataZoom: [{
    type: 'slider'.show: true.xAxisIndex: [0].height: 15.// Scroll bar height
    left: '5%'.// The percentage to the left of the scrollbar distance
    bottom: 0.//// Percentage of bottom scrollbar distance
    start: 0.// Start position of the scroll bar
    end: 60 // Cut off position of the scroll bar (divide the X-axis length of your bar graph proportionally)}].Copy the code

Three, x axis data between a display problem solved

The original:

Set interval:0 to force all tags to be displayed. Set interval:0 to force all tags to be displayed. Set interval:0 to force all tags to be displayed.

xAxis: {
  axisLabel: {
    interval: 0,}}Copy the code

After the solution:

Echarts using gradient error

Error: Echarts is not defined

Solution:

Reintroduce echarts in vue, import * as echarts from ‘echarts’

5. Add click events to pie chart items

// Click the pie chart to jump to the specified page
let _this = this;
pieOptions.on("click".function (param) {
    /* if (param.name == "1") { _this.$router.push({ name: "Page1", }); } else if (param.name == "2") { _this.$router.push({ name: "Page2", }); } * /
});
Copy the code

\