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