安装图表option包
npm install echart-option
基础柱状图
- 必设配置
//横坐标
const xData = 你的横坐标数据 ['遂宁市','绵阳市'.....];
//数据源
const yData = 你的数据源 [11,33,44...] 或
const yData = 你的数据源 [{value:12//值,其他你想要的字段....}...]
//areaMap 多类柱状数据
const yData = areaMap.map((item, index) => ({
name: item.label, //展示lenged
type: "bar",
barWidth: 20, //调整柱子宽度
data: chartData.map((v, index) => {
return {
value: v[item.value],
//其他字段
};
}),
}));
const barChartOption = deepCopy(getBarBaseOption(xData, yData, true)); //横坐标 数据源 是否开始滚动
- 扩展配置
//自定义tooltip文字
barChartOption.tooltip.formatter = (params) => {
return params[0].marker + " " + params[0].name + " " + params[0].value;
};
//自定义x轴或y轴文字
barChartOption.yAxis.axisLabel.formatter = (param) =>
param > 10000 ? `${param / 10000}万` : param;
//改变柱子移上去的颜色
barChartOption.tooltip.axisPointer = {
type: "shadow",
shadowStyle: {
color: "rgba(250,173,20,0.1)",
},
}
//改变图表位置方位(后面横向柱状和折线同理)
barChartOption.grid.left = "..";
barChartOption.grid.top= "..";
barChartOption.grid.bottom= "..";
barChartOption.grid.right= "..";
横向柱状图
- 必设配置、扩展配置与基础柱状图大致一样
//横坐标
const xData = 你的横坐标数据 ['遂宁市','绵阳市'.....];
//数据源
const yData = 你的数据源 [11,33,44...] 或
const yData = 你的数据源 [{value:12//值,其他你想要的字段....}...]
//areaMap 多类柱状数据
const yData = areaMap.map((item, index) => ({
name: item.label, //展示lenged
type: "bar",
stack: "total",//同个类目轴上,系列配置相同的stack,后一个系列的值会加在前一个系列后 设置这个多横向是累加如图1 不设是顺序排列如图二
barWidth: 20, //调整柱子宽度
data: chartData.map((v, index) => {
return {
value: v[item.value],
//其他字段
};
}),
}));
const barChartOption = deepCopy(getBarBaseOption(xData, yData, true)); //横坐标 数据源 是否开始滚动
饼图/环形图
- 必设配置
//数据源
const pieData = chartData.map((item) => ({
name: item.name,//用于显示lenged字段
value: item.num,//数据
proportion: item.proportion,//你任意添加的字段
}));
const pieChartOption = deepCopy(getPieBaseOption(pieData));
- 扩展配置
//变成环形图
pieChartOption.series[0].radius = ["50%", "25%"]
//环形图中间加一个文字 如图2
pieChartOption.graphic.elements[0].style.text = '...';
pieChartOption.graphic.elements[0].top = "38%"; //根据top设置想要的位置
//环形图中间加两行文字 如图3
pieChartOption.graphic.elements[0].style.text = '...';
pieChartOption.graphic.elements[1].style.text = subTitle;
//自定义formatter
barChartOption.tooltip.formatter = (params) => {
return params[0].marker + " " + params[0].name + " " + params[0].value;
};
基础折线图
- 必设配置
//横坐标
//横坐标
const xData = 你的横坐标数据 ['遂宁市','绵阳市'.....];
//数据源
const yData = 你的数据源 [11,33,44...] 或
const yData = 你的数据源 [{value:12//值,其他你想要的字段....}...]
//areaMap 多类柱状数据
const yData = areaMap.map((item, index) => ({
name: item.label, //展示lenged
type: "line",
smooth: true,//平滑显示
data: chartData.map((v, index) => {
return {
value: v[item.value],
//其他字段
};
}),
}));
const lineChartOption= deepCopy(getLineBaseOption(xData, yData, true)); //横坐标 数据源 是否开始滚动
- 扩展配置
//自定义tooltip文字
lineChartOption.tooltip.formatter = (params) => {
return params[0].marker + " " + params[0].name + " " + params[0].value;
};
//自定义x轴或y轴文字
lineChartOption.yAxis.axisLabel.formatter = (param) =>
param > 10000 ? `${param / 10000}万` : param;
//使用渐变背景 如图一
lineChartOption.series[0].areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: chartType === "areaTrent" ? "rgba(91,146,252,0.1)" : "rgba(252,188,116,0.1)", // 100% 处的颜色
},
{
offset: 1,
color:
chartType === "areaTrent" ? "rgba(91,146,252,0.01)" : "rgba(252,188,116,0.01)", // 0% 处的颜色
},
]), //背景渐变色
},
}
特别雷达图
-
在鼠标移动到某个label上时用弹框显示所有轴该指标的值
具体代码 可参与这篇文章 -
必设配置
//areaMap指标项 第一个指标第二个指标。。。
//data 数据项 第一条数据 第二条数据。。
const radarData = this.areaMap.map((item) => ({ text: item.label })); //indicator数据
const seriesData1 = this.areaMap.map((item) => data[0][item.value]); //data数据
const seriesData2 = this.areaMap.map((item) => data[1][item.value]); //data数据
const option = deepCopy(getRadarExtraOption(radarData, seriesData1, seriesData2));
//设置tooltip展示需要获取的数据
const color = ["#4CDCA4", "#5B92FC", "#ACA4FC", "#FC8484", "#FCBC74"];
areaMap.forEach((item, index) => {
let initData = [];
data.forEach((o) => {
option.series[1].data[index].data = initData; //tooltip需要获取的数据
option.series[1].data[index].name = item.label;//tooltip需要获取的项名称
option.series[1].data[index].color = color[index];//tooltip需要获取的mark颜色
});
});
//tooltip展示
radarExtraChartsOption.series[1].tooltip.formatter = (params) => {
const { data, color } = params.data;
const mark = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background- color:${color};"></span>`;
const str = `<span style="color:#666;">${params.name}</span></br>`;
return `${str}${mark} ${data[0]}%<br/>${mark} ${data[1]}%<br/> 环比 ${data[2]}%`;
};
梯形图
- 必设配置
//数据源
const funnelOption = deepCopy(getFunnelOption(chartData));
- 扩展配置
//自定义展示文字
funnelOption.series[0].label.formatter = (param) => {
return `你的文字`; \n换行
};