Echarts在线免费图表

 
            // 折线图
let captions = ['2017', '2018', '2019', '2020', '2021', '2022']; //日期
let values1 = [11, 21, 31, 41, 51, 61]; //专著
let values2 = [13, 23, 33, 43, 53, 63]; //编著
let values3 = [15, 25, 35, 45, 55, 65]; //译著
let values4 = [17, 27, 37, 47, 57, 67]; //电子
let values5 = [19, 29, 39, 49, 59, 69]; //其他
let lineData = [values1, values2, values3, values4, values5];
// 柱状图
let getname = ['专著', '编著', '译著', '电子出版物', '其他读物'];
let getbl = [150, 20, 16, 10, 9]; // 数量
let data = [];
for (let i = 0; i < getname.length; i++) {
  data.push({ name: getname[i], value: getbl[i] });
}
// 其他数据
let currentYear = '2022'; // 当年
let colorList = ['#5B8FF9', '#61DDAA', '#2F467A', '#F6BD16', '#FA8974']; // 色系

// series整合
let seriesData = [];
getname.map((item, index) => {
  seriesData.push({
    name: item,
    type: 'line',
    data: lineData[index],
    color: colorList[index],
    symbolSize: 10, //标记的大小
    lineStyle: {
      color: colorList[index],
      width: 3
    },
    itemStyle: {
      //折线拐点标志的样式
      color: colorList[index],
      borderColor: colorList[index],
      borderWidth: 3
    },
    emphasis: {
      focus: 'series'
    }
  });
});
seriesData.push({ // 饼图
  type: 'pie',
  radius: ['25%', '35%'],
  center: ['20%', '50%'],
  itemStyle: {
    shadowBlur: 8,
    shadowColor: 'rgba(255, 255, 255, 0)',
    borderColor: '#FFF',
    borderWidth: 2,
    borderRadius: 5,
    color: function (params) {
      return colorList[params.dataIndex];
    }
  },
  label: {
    show: false
  },
  labelLine: {
    show: false
  },
  tooltip: {
    trigger: 'item',
    axisPointer: {
      type: 'none'
    },
      formatter: `{b}<br/>${currentYear}年：{c}本({d}%)`
  },
  data: data
});

function calMax(arr) {
  let max = 0;
  arr.forEach((el) => {
    el.forEach((el1) => {
      if (!(el1 === undefined || el1 === '')) {
        if (max < el1) {
          max = el1;
        }
      }
    });
  });
  let maxint = Math.ceil(max / 9.5);
  //不让最高的值超过最上面的刻度
  let maxval = maxint * 10;
  //让显示的刻度是整数
  return maxval;
}
var max =
  Math.ceil(calMax([values1, values2, values3, values4, values5]) / 100) * 100;

var option = {
  color: colorList,
  tooltip: {
    trigger: 'axis',
    //axisPointer: {
    //type: 'none'
    //},
    formatter:
      '{b0}年<br/>{a0}：{c0}<br/>{a1}：{c1}<br/>{a2}：{c2}<br/>{a3}：{c3}<br/>{a4}：{c4}'
  },
  legend: {
    data: getname,
    top: '5%',
    left: 'center',
    itemGap: 25,
    itemWidth: 10,
    selectedMode: 'multiple',
    textStyle: {
      fontSize: 14,
      color: 'rgba(0, 0, 0, 0.45)',
      fontFamily: 'Source Han Sans CN-Regular',
      padding: [0, 0, 0, 5]
    }
  },
  grid: [
    {
      left: '40%',
      right: '5%',
      top: '15%',
      bottom: '15%',
      containLabel: true
    }
  ],
  xAxis: {
    type: 'category',
    data: captions,
    gridIndex: 0,
    axisTick: {
      show: false //隐藏X轴刻度
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(204, 204, 204, 1)'
      }
    },
    axisLabel: {
      show: true,
      textStyle: {
        fontSize: 14,
        color: 'rgba(0, 0, 0, 0.65)', //X轴文字颜色
        fontFamily: 'Source Han Sans CN-Regular'
      }
    }
  },
  yAxis: {
    name: '著作：本',
    nameTextStyle: {
      fontSize: 14,
      color: 'rgba(0, 0, 0, 0.65)', //X轴文字颜色
      fontFamily: 'Source Han Sans CN-Regular',
      align: 'left',
      verticalAlign: 'center'
    },
    min: 0,
    max: max, // 计算最大值
    interval: max / 5, //  平均分为5份
    splitNumber: 5,
    type: 'value',
    axisTick: {
      show: false
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        width: 1,
        color: 'rgba(223, 223, 223, 1)',
        opacity: '1'
      }
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      show: true,
      textStyle: {
        fontSize: 14,
        color: 'rgba(0, 0, 0, 0.65)',
        fontFamily: 'HarmonyOS Sans-Regular'
      }
    },
    splitArea: {
      show: false
    }
  },
  series: seriesData
};
myChart.on('mouseover', 'series.pie', function (params) {
  myChart.dispatchAction({
    type: 'highlight', // 高亮
    seriesName: params.name
  });
});