echarts两个常用饼图、平滑折线图效果展示、代码参考

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);