echart样式属性设置

会飞的蚂蚁

已于 2023-05-04 19:53:59 修改

阅读量781

点赞数

文章标签： javascript 前端开发语言 echarts

于 2022-08-19 10:57:31 首次发布

本文链接：https://blog.csdn.net/zyfmxc/article/details/126420544

版权

本文详细探讨了如何使用Echarts库进行图表样式的个性化设置，涵盖了颜色、边框、背景等多个方面，帮助开发者实现美观的数据可视化效果。

摘要由CSDN通过智能技术生成


// 预设柱状图颜色3种颜色
export const barColorList = [
  '#1875F0',
  '#68CFA0',
];

// 预设图表颜色3种颜色
export const colorList = [
  '#1875F0',  
  '#68CFA0',
  '#FDB336'
];

export const fontColor = '#6C7E8E';

// 条状图
let clickIndex = {};
export function echartOptionForShadow(nameList, valueList) {
  return {
    color: barColorList,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      position: function (point, params, dom, rect, size) {
        return [10, point[1] + 20];
      },
      // formatter: function (params) {
      //   clickIndex = params;
      //   return params[0].axisValueLabel + '：' + params[0].data.value + '%';
      // }
    },
    grid: {
      left: '3%',
      right: '8%',
      bottom: '20px',
      top: '20px',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      scale: true,
      // max: 120,
      min: 0,
      minInterval: 1, // 设置分割线最小间隔为1
      boundaryGap: [0, 0.01],
      show: true,
      axisLine: { // 设置主轴线的样式
        show: true,
        lineStyle: {
          color: fontColor
        }
      },
      axisLabel: { // 设置主轴的文字样式
        fontSize: 14,
        color: fontColor
      },
      splitLine: { // 设置分割线样式
        show: true,
        lineStyle: {
          type: 'dashed'