echarts的几个主题，比较好的

最新推荐文章于 2024-08-14 10:04:32 发布

林强181

最新推荐文章于 2024-08-14 10:04:32 发布

阅读量943

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qlin_11/article/details/131555559

版权

本文探讨了Echarts官方主题的配置结构，补充了官方文件中缺失的部分系列配置，并分享了一些从网络获取的基础配色方案。建议在实际应用中结合UI设计进行调整。

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

这里的代码是echarts的官方主题的配置结构，这里代码放置了两个连续性的变化的color数组。这里主要用文件结构，因为官方的文件里面，会缺少部分的系列的配置，这里增加了一下。做好记录。
关于配色，也记录一下基础色。这里的颜色是从网上的一些文章里面尝试配置出来的。实际还是要ui画一个来看要更为好。

var color = [
 
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 1,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "rgb(237,25,65)" // 0% 处的颜色
      },
      {
        offset: 1,
        color: "rgb(218,31,24)" // 100% 处的颜色
      }
    ]
  },
  {
    type: "linear",
    x: 0,
    y: 0,
    x2: 1,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "rgb(105,77,159)" // 0% 处的颜色
      },
      {
        offset: 1,
        color: "rgb(112,24,102)" // 100% 处的颜色
      }
    ]
  },


];
// 不渐变颜色，用于饼图
var singleColor = [
  "rgb(7,128,207)",
  "rgb(118,80,5)",
  "rgb(202,51,30)",
  "rgb(14,44,130)",
  "rgb(182,181,31)",
  "rgb(218,31,24)",
  "rgb(112,24,102)",
  "rgb(244,122,117)",
  "rgb(0,157,178)"
];
// 背景色：一般为透明
var bgColor = "rgba(51,51,5,0)";
// 基础色调：坐标轴
var baseColor = "#fff";
// 热力图颜色
var visualMapColor =["#00f", "#0f0", "#ff0", "#f00", "#f00"]
// time时间轴基础色
var timeColor ="#009ad6"

var dark = {
  color: color,
  backgroundColor: bgColor,
  textStyle: {},
  title: {
    textStyle: {
      color: baseColor
    },
    subtextStyle: {
      color: baseColor
    }
  },
  line: {

    itemStyle: {
      borderWidth: 1
    },
    lineStyle: {
      width: 2
    },
    symbolSize: 4,
    symbol: "circle",
    smooth: false
  },
  radar: {
    itemStyle: {
      borderWidth: 1
    },
    lineStyle: {
      width: 2
    },
    symbolSize: 4,
    symbol: "circle",
    smooth: false
  },
  bar: {
    itemStyle: {
      barBorderWidth: 0,
      barBorderColor: baseColor
    }
  },
  pie: {
    color: singleColor,
    itemStyle: {
      borderWidth: 0,
      borderColor: baseColor
    }
  },
  scatter: {
    itemStyle: {
      borderWidth: 0,
      borderColor: baseColor
    }
  },
  boxplot: {
    itemStyle: {
      borderWidth: 0,
      borderColor: baseColor
    }
  },
  parallel: {
    itemStyle: {
      borderWidth: 0,
      borderColor: baseColor
    }
  },
  sankey: {
    itemStyle: {
      borderWidth: 0,
      borderColor: baseColor
    }
  },
  funnel: {
    itemStyle: {
      borderWidth: 0,
      borderColor: baseColor
    }
  },
  gauge: {
    itemStyle: {
      borderWidth: 0,
      borderColor: baseColor
    }
  },
  candlestick: {
    itemStyle: {
      color: "#fd1050",
      color0: "#0cf49b",
      borderColor: "#fd1050",
      borderColor0: "#0cf49b",
      borderWidth: 1
    }
  },
  graph: {
    itemStyle: {
      borderWidth: 0,
      borderColor: "#fff"
    },
    lineStyle: {
      width: 1,
      color: baseColor
    },
    symbolSize: 4,
    symbol: "circle",
    smooth: false,
    color: singleColor,
    label: {
      color: baseColor
    }
  },
  map: {
    itemStyle: {
      areaColor: "#ddd",
      borderColor: "#eee",
      borderWidth: 0.5
    },
    label: {
      color: "#c12e34"
    },
    emphasis: {
      itemStyle: {
        areaColor: "#e6b600",
        borderColor: "#ddd",
        borderWidth: 1
      },
      label: {
        color: "#c12e34"
      }
    }
  },
  geo: {
    itemStyle: {
      areaColor: "#eee",
      borderColor: "#444",
      borderWidth: 0.5
    },
    label: {
      color: "#000"
    },
    emphasis: {
      itemS