const myChart = echarts.init(document.getElementById(‘line’));
// 指定图表的配置项和数据
const backgroundColor = ‘#ffffff’;
const color = [‘#0370FF’, ‘#15ECC8’, ‘#FFA303’, ‘#01E17E’, ‘#3DD1F9’, ‘#FFAD05’]; //2个以上的series就需要用到color数组
const title = {
text: ‘最近30天数据’,
textStyle: {
color: ‘#333333’,
fontSize: 18,
},
padding: 0,
top: 20,
left: 20,
};
const legend = {
//data，就是取得每个series里面的name属性。
orient: ‘horizontal’,
icon: ‘circle’, //图例形状
padding: 0,
top: 23,
right: 40,
itemWidth: 10, //小圆点宽度
itemHeight: 10, // 小圆点高度
itemGap: 20, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
textStyle: {
fontSize: 14,
color: ‘#333333’,
},
};
const tooltip = {
show: true,
trigger: ‘axis’,
axisPointer: {
type: ‘line’,
lineStyle: {
width: 1,
type: ‘solid’
}
},
};
let seriesData = [
{ name: ‘今日访问数’, data: [120, 132, 101, 134, 90, 230, 210] },
{ name: ‘今日付款数’, data: [220, 182, 191, 234, 290, 330, 310] },
{ name: ‘今日收益’, data: [150, 232, 201, 154, 190, 330, 410] },
];
const commonConfigFn = (index) => {
return {
type: ‘line’,
smooth: true,
symbol: ‘emptyCircle’, //空心小圆点。线条小圆点形状
symbolSize: 6, //小圆点大小
itemStyle: {
//还是小圆点设置
},
label: {
show: false, //不显示小圆点上的label文字
},
lineStyle: {
width: 3, //线条设置
},
areaStyle: {
//填充线条下面的面积区域颜色。（areaStyle只是锦上添花）
opacity: 0.2,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: color[index], // 上处的颜色
},
{
offset: 1,
color: 'transparent', // 下处的颜色
},
],
global: false, // 缺省为 false
},
},
};
};
seriesData = seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) }));
option = {
backgroundColor,
color,
title,
tooltip,
legend,
grid: {
top: '20%',
left: '3%',
right: '4%',
bottom: '5%',
containLabel: true,
},
xAxis: {
show: true, //显示x轴+x轴label文字
type: 'category',
boundaryGap: false, //从Y轴出发，这个false很好的
axisLine: {
show: true, //显示x坐标轴轴线
lineStyle: {
color: 'rgba(255,255,255,.4)',
},
},
axisTick: {
show: false, //不显示x坐标1cm刻度
},
axisLabel: {
color: '#333333', //x轴label文字颜色
},
splitLine: {
show: false, //不显示grid竖向分割线
},
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
},
yAxis: {
type: 'value',
axisLabel: {
color: '#333333',
},
axisLine: {
show: true,
lineStyle: {
color: '#333333',
},
},
splitLine: {
show: true, //不显示grid水平分割线
},
},
series: seriesData,
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
const myChart_Pie = echarts.init(document.getElementById(‘pie’));
let circularGraph = {
title: “测算支付排行”,
head: false,
tuglie: [“八字精批”, “紫微斗数”, “塔罗牌”, “姓名配对”, “奇门遁甲”, “月老姻缘”],
data: [
{
name: “八字精批”,
value: 22,
},
{
name: “紫微斗数”,
value: 26,
},
{
name: “塔罗牌”,
value: 44,
},
{
name: “姓名配对”,
value: 44,
},
{
name: “奇门遁甲”,
value: 50,
},
{
name: “月老姻缘”,
value: 60,
}
],
sum: {
name: [‘’],
number: 0,
},
color: [“#0075FF”, “#FFBB00”, ‘#A98BFF’, ‘#13CD88’, ‘#FF844D’, ‘#FF4D4D’],
}
let sum = 0;
circularGraph.data.map((item) => {
sum += item.value;
})
circularGraph.sum.number = sum;
option_pie = {
title: {
text: circularGraph.title, //标题文本
left: “center”,
show: circularGraph.head, //是否显示标题组件
},
tooltip: {
trigger: “item”,
formatter: “{b}: {c} ({d}%)”
},
legend: {
type: ‘scroll’,
orient: ‘vertical’,
right: 70,
top: 80,
bottom: 20,
icon: ‘circle’,
itemGap: 25,
backgroundColor: ‘#F8FBFE’,
itemWidth: 10,
itemHeight: 10,
textStyle: {
fontSize: 18
},
padding: 40,
formatter: (name) => {
let num = “”;
circularGraph.data.forEach(item => { //格式化图例文本，支持字符串模板和回调函数两种形式。
if (item.name === name) {
num = String(item.value).replace(/(\d)(?=(?:\d{6})+$)/g, "KaTeX parse error: Expected 'EOF', got '}' at position 67: … }̲ …)/g,
// “$1.”
// ) + “\n” + ‘总数’,
// textAlign: “center”,
// fill: “#000”,
// width: 30,
// height: 30,
// fontSize: 22
// }
elements: [{
type: 'text',
left: '28%',
top: '55%',
style: {
text: "总数",
textAlign: 'center',
fill: 'darkgray',
width: 30,
height: 30,
fontSize: 20,
color: '#999999',
}
}, {
type: 'text',
left: '26%',
top: '45%',
style: {
text: circularGraph.sum.number, //这里改用实际值
textAlign: 'center',
fill: '#000',
width: 30,
height: 25,
fontSize: 40,
color: 'black'
}
}]
},
series: [
{
type: "pie",
radius: ["50%", "60%"],
center: ['30%', '50%'],
label: {
//去除句柄
normal: {
position: "inner",
show: false,
},
},
itemStyle: {
normal: {
borderWidth: 4,
borderColor: '#ffffff',
label: {
show: true,
textStyle: { color: "#3c4858", fontSize: "12" },
formatter: function (val) {
//让series 中的文字进行换行
return val.name + "\n(" + val.percent + "%)";
}
},
labelLine: {
show: true,
lineStyle: { color: "#3c4858" }
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
textColor: "#000",
borderWidth: 0,
}
},
data: circularGraph.data //数据
}
],
color: circularGraph.color //颜色
};
// 使用刚指定的配置项和数据显示图表。
myChart_Pie.setOption(option_pie);
