- 主题theme的使用
- 调色盘
- 渐变色
主题的使用
内置主题
- echarts默认内置了两套主题:light 、dark
// echarts初始化init()方法,有两个参数,第一个为放置图表的dom元素,第二个为主题名称
this.barChart = this.$echarts.init(this.$refs.bar,'light');
自定义主题
- echarts官网——下载——主题下载——定制主题——自定义配置(修改名称)
- 方法一:下载主题(ququ.js)——放入项目——script标签引入js文件
- 方法二:复制json代码 —— vue项目新建theme.js(public/static/theme/theme.js)
//theme.js
const theme = 你复制的json
export default theme
//引入主题并注册
import theme from '....../theme' // 引入主题
this.$echarts.registerTheme('theme', theme) // 注册主题
let myChart = this.$echarts.init(document.getElementById('Line'),'theme') //使用主题
调色盘:一组颜色集合,图表会自动去集合中选取颜色(就近原则)
- 主题调色盘
在主题js文件中有一个方法:echarts.registerTheme( ‘主题名称’ , { color:[ ‘主题调色盘颜色集合’ ] }) - 全局调色盘
在配置项option的第一层定义的颜色color集合:let option = { color:[ ‘主题调色盘颜色集合’ ] } - 局部调色盘
在配置项option中的series数组中每一项定义的color
// 1、主题
import { ququ } from "../../public/static/theme/ququ";
init() {
this.$echarts.registerTheme("ququ", ququ);
this.barChart = this.$echarts.init(this.$refs.bar, "ququ");
// 监听鼠标移入移出事件
this.barChart.on("mouseover", (params) => {
console.log(params);
clearInterval(this.timerId);
});
this.barChart.on("mouseout", () => {
this.openTimer();
});
},
// 全局和局部
let option = {
color: ["red", "yellow", "green", "blue"], //2、全局调色盘
xAxis: {
type: "value",
},
yAxis: {
type: "category",
data: barDataY,
},
series: [
{
type: "bar",
data: barDataX,
color: ["#ccc"], // 3、局部调色盘
},
{
type: "bar",
data: barDataX1,
color: ["pink"],
}
],
};
渐变色:线性渐变、径向渐变
series: [
{
// 每一个条目的样式配置
itemStyle: {
barBorderRadius: [0, 34, 34, 0], // 圆角
// 1、简写——渐变色 1、指明颜色渐变的方向 2、指明不同百分比之下颜色的值
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "#5050ee" },
{ offset: 1, color: "#ab6ee5" },
]),
// 2、 线性渐变
color: {
type: "linear",
x: 0,
y: 0,
X2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "red",
},
{
offset: 1,
color: "blue",
},
],
},
// 3、径向渐变
color: {
type: "radial",
x: 0,
y: 0,
r: 1,
colorStops: [
{
offset: 0,
color: "red",
},
{
offset: 1,
color: "blue",
},
],
},
},
},
],